myFlix
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.
Purpose & Context
myFlix was a project I built as part of my web development course at CareerFoundry to demonstrate my mastery of full-stack JavaScript development.
Objective
The aim of the project was to build the complete server-side and client-side application from scratch.
Duration
45 Days
Credits
- Tutor: Terver Aosu
- Mentor: Stephen Barungi
Built With
- React
- Redux
- Bootstrap
- Netifly
- Heroku
- Javascript
- Node.JS
- MongoDB
- Express.JS
- Postman
Approach
Serverside
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.
01 Basics
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.
02 Business Logic
Next, I created models to keep my data consistently formatted and used Mongoose to interact with the database
03 Security
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.
04 Deployment
After testing all endpoints using Postman, I finally used Heroku to deploy my app and MongoDB Atlas to host my database.
Clientside
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).
The Build
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.
Create Components
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.
Design
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.
Final product
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.
Retrospective
What went well?
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.
What didn't go well?
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.
Future Steps
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.
Final Thoughts
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.
Contact
Please use the form below to send me a message. I'll be happy to hear from you.