MyFlix Client (React)
This is a single-page, responsive movie app developed using the MERN stack.
Purpose & Context
myFlix was done as part of Careerfoundry coursework to demonstrate my mastery of full-stack JavaScript development. myFlix React app is a client for myFlix API.
​
​
​
Duration
The complete project was done in 3 weeks. One week was spent on developing the server-side code, and 2 weeks were spent on developing the client-side code.
myFlix API Details
myFlix is a custom API that contains details about movies and their genre, director, and other details.
​​​
myFlix server github repo: https://github.com/pshegde123/cf_myflix_server
Tech Stack
-
MERN Stack
-
Postman
-
Heroku
-
React Bootstrap, React Router
-
Netlify
Server Side
The server side consists of a well-designed REST API and an architected database built using JavaScript, Node.js, Express, and MongoDB.
The REST API will be accessed via HTTP methods like GET and POST.
Similar methods (CRUD) will be used to retrieve data from the database and store that data in a non-relational way.
To test the app, I used Postman. I also included the basic HTTP authentication and JWT (token-based) authentication.
GET query results on Postman
Client Side
After completing the server API, I built the interface users would need to interact with the server side.
It is a single-page, responsive application, developed with React Bootstrap.
The app provides several interface views, including a movie view, a login view, a registration view, and a profile view (where users can update their user data and list of favorites). Page routing in the app is handled using React Router.
Page Views
Login View
Single Movie View
Signup View
User Profile View
All Movies View
User Profile View
Challenges
I learned a lot by building the API, building the MongoDB database, testing the API using Postman, and setting up the backend.
Understanding React state data flow was a bit challenging for me. While saving the favorite movies list in the user profile page, the updated movies list needed to be passed down from the MainView (parent) component to the ProfileView (child) component. After understanding that data flow in React is unidirectional, from parent to child,
I was able to figure out how to display the favorite movie list in the child component.
​
In the future, I would like to add more movies, and on each movie view page, I would like to add a new section called ‘Similar Genre Movies’.​
Credits​
​
Developer: Pradnya Hegde, Tutor: Jay Quach, Mentor: Alfredo Velez