OVERVIEW

MyFlix is a single-page, responsive movie application built using the MERN stack (MongoDB, Express, React, and Node.js). Users can interact with this application read information on all of the movies in the database and create a list of favorite movies from those available. This app allows registered users to browse movies by title.

Opening a movie reveals the movies synopsis, genre, and director. Selecting a genre or director opens up another screen with additional information. From their profile view, users can change their username, email address and birthday. While browsing the movies collection, users can add movies to their list of favorites, as well as remove them.

PURPOSE AND CONTEXT

MyFlix was a personal application that I built as a part of Career Foundry’s full-stack immersion course. This app was used to demonstrate my knowledge of front-end and back-end development, combing skills I acquired in building a server-side, REST API from scratch to a client-side user interface (see “Movie API” in my “Recent Work” section, or check out my code here)

Skills and Technologies Used:

• JSX
• React library
• Parcel (build tool)
• React Redux
• Bootstrap (UI)

OBJECTIVE

To practice the crux of full-stack development, implementing a server-side REST API and client-side user interface built from scratch.

APPROACH: SERVER-SIDE

I created a RESTful API using Node.js and Express, which interacts with MongoDB (a non-relational database). MongoDB was the perfect fit for this project as it offers a flexible document schema and code-native data access. It could easily read the JSON objects I wrote for the data to be used, arranged in collections (movies, users) with different sets of fields (movie Title, Genre, Director, etc., vs user’s Username, Password, Birthday), as well as allow me to make changes to the collections with ease.

The API can be accessed using HTTP methods like GET, POST, PUSH, and DELETE. I used CRUD (create, read, update, delete) methods to interact with the data stored in the database.

These methods will be reflected on the client-side with user interfaces. The data was kept in a database service called Mongo Atlas, where a container-based cloud Platform as a Service (PaaS), Heroku, fetched the data to be deployed and accessed by the cloud. I used Node.js and its framework, Express, to create different routes. I frequently tested endpoints locally and on Heroku using Postman. Node.js allowed me to use JavaScript for the back-end development, which prepared me to match the back-end functions with the front-end functions I would be writing in the next approach: Client-Side.

see API documentation

I also included user authentication and authorization code in the form of basic HTTP authentication and JWT authentication. To practice extra security, passwords added by the user were encrypted with a password-hashing function, BCrypt.

APPROACH: CLIENT-SIDE

The MERN stack was completed after building the client-side of the MyFlix application using React (and React Redux)—the R in MERN. Now that there was an established API to work from, I could build the client-side of the application for users to interface with and experience real data and functionalities.

Using React’s component-based architecture approach, different interface views of the app were represented and used accomplish all of the targeted features, including: a “movie” view, where registered users are able to view all movies; a “movie card” view, where users are able to view specific movies and add them to a list of favorites; a “genre” view, where users are able to view a selected genre’s description, as well as other movies in that genre; and so on.

The client-side of the application was written using JSX, an extension of JavaScript that uses a markup-like syntax, resembling writing in HTML—ideal for creating React Elements.

I was able to implement a Kanban methodology to manage this project and all of its features with a visual representation of my progress. I aimed to complete the least complicated features first (genre view, director view, welcome screen), and more complicated features last. The Profile component was the most time-consuming as it required more CRUD methods than any other component, and thus was the final component that I completed.

To understand the app in further detail, here is a list of all features:

• App displays a welcome view where users will be able to either log in or register an account.
• Once authenticated, the user will be able to view all movies.
• Movie cards have options to view the movie details, switching to a single-movie view
• The movie view contains the selected movie's details, including a synopsis, genre, and director information
• Genre views can be accessed from the movie view, returning data about the genre (name, description, and example movies associated with that selected genre)
• Director descriptions can also be accessed from the movie view, returning a new view about the selected director (name, biography, birthyear, and example movies written by that director)
• Users can select specific movies to add to their list of favorites or remove favorites. This list is displayed on their profile.
• Users can update their information from their profile (username, birthday, email), or delete their account

CHALLENGES

This was the first big project that I completed in Career Foundry’s Full-Stack Immersion course, and my first introduction to React. Ensuring that the server-side that I had previously created was compatible with the user interface I was aiming to complete proved to be a bigger task than I had anticipated.

Some issues arose with the server-side of my app when I was well underway with developing the client-side. I ran into a roadblock with the login component, where anytime I would try to “login” (a function that is supposed to fetch data from the database, recognize valid data, and allow for an authenticated user to access the rest of the app), I would get the dreaded “CORS Policy error”.

This error, that I became well acquainted with, does not blatantly tell you what is wrong with your code and requires a bit more investigating that brought me back to the beginning.

• Checking program logs: I looked at the logs in Heroku, and saw that something was making my app crash.
• Testing mode: Back in Postman, I had to check that all endpoint functions were working properly and transferring data as expected, testing endpoints locally and on the cloud-based platform. After many “503 Service Unavailable” errors in Postman, I went to the next step.
• Check actual database: make sure that the HTTP methods (GET, POST, PUT, DELETE), were reaching Mongo Atlas.
• Findings: no existing data!

My next thought was to just check my actual database and see what my requests were doing. What I can only assume was a glitch in Mongo Atlas appeared to have deleted all of my collections. Regardless, I found my problem: no existing data. It was a lengthy and tedious process that lacked an easy solution as I did have to recreate all of my collections; however, this experience was able to reinforce in my understanding of how everything works together between the server-side and client-side of applications.

This was both my favorite and most challenging project. After completing MyFlix, I found that building more applications (either with React or other libraries/frameworks) was far easier and I gained a lot of confidence as a full-stack developer.

DURATION

The server side of this application was built in about one month, and the client side in about two months. I spent the most time on this project than I did on any other project in Career Foundry’s course, though I think it is thanks to this project that I was able to complete following projects quicker.

A succeeding project was another MyFlix application with similar features, but this time built with Angular instead of React (see “MyFlix Angular” from my project section). The Angular app even used the same Movie API. This project took me about half the time I spent with the React app. Though this was a completely different framework, I used my experience with React to understand the relationship between front-end and back-end development, as well as the troubleshooting and debugging skills that I had previously acquired to move through the Angular project with additional ease.