Overview
myFlix is a web app, developed using the MERN stack, that provides users with access to information about movies, directors, and genres. Users are able to create an account, update their personal data, and create a list of favorite movies.
myFlix is a web app, developed using the MERN stack, that provides users with access to information about movies, directors, and genres. Users are able to create an account, update their personal data, and create a list of favorite movies.
myFlix was a project I built as part of my web development course at CareerFoundry to demonstrate my mastery of full-stack JavaScript development.
The aim of the project was to build the complete server-side and client-side application from scratch.
45 Days
I created a RESTful API using Node.js and Express, that interacts with a non-relational database (MongoDB). The API can be accessed via commonly used HTTP methods like GET or POST. To retrieve and store data in the database, CRUD methods are used. The API provides movie information in JSON format.
I first needed to determine if I wanted a relational or non- relational Database. After testing with PostGreSQL and MongoDB, I chose MongoDB because it is a non-relational database and offers more flexibility.
Next, I created models to keep my data consistently formatted and used Mongoose to interact with the database
I chose basic HTTP for initial login paired with a JWT token based authorization to make my site secure. Then, I implemented CORS password hashing and data validation for extra security.
After testing all endpoints using Postman, I finally used Heroku to deploy my app and MongoDB Atlas to host my database.
After completing the API, I built the interface users would need to interact with the server-side. It is a single-page, responsive application, developed with React and React-Redux. It 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). After completing the API, I built the interface users would need to interact with the server-side. It is a single-page, responsive application, developed with React and React-Redux. It 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).
This project taught me how to use MVC architecture as a design pattern. To facilitate this, I chose to use React because it is fast, easy to maintain, and well documented. Then, I used Parcel to complete the build operations.
Once the initial build was done, I created components for the different views and hooks to control the state. I used Axios to pull in the API I had previously created.
I used React Bootstrap to design the layout of the pages and cards and to ensure consistent styling. I also used client side app-routing to add authentication to access views.
Finally, I added Redux to better manage the application's state and ensure that my app would be scalable. Once integrated, I hosted my completed project on Netlify.
I very much enjoyed learning how to build the database, working on the frontend and setting up the backend. Having worked as a UI designer, designing UI components/libraries I found react to make sense to me. I like the idea of working with components.
The biggest challenge was time. I would've hoped to add more functionality to the app, like adding google login, and possibly more movie choices and options such as trending, whats popular, etc. but I think its a great first project into building a backend and frontend application.
I would like to continue to build on the app to include more movies, movie features and a google oauth 2.0 login. I would like to incorporate features such as whats trending, whats popular, ability to watch trailers of the movies and movie ratings.
Overall, I've enjoyed this project and gained quite a bit of knowledge about developing an entire web application from scratch. This project taught me the ins and outs of react and how to structure a database for the backend.
Please use the form below to send me a message. I'll be happy to hear from you. Thanks!!!
