Overview
FilmFever is a full-stack JavaScript application that allows users to access information about different movies, genres, and directors. Built using the MERN stack, FilmFever uses a built from scratch database and server to provide movie data to users on the application's front-end. Users can create an account, read information about different movies, update their information and favorite movies list, and delete their accounts if desired. These actions follow the core principles that are integral to a CRUD (create, read, update, delete) application.
Process & Context
FilmFever is a personal project built as part of CareerFoundry's Full-Stack Immersion Web Developer course. This project demanded a solid understanding of using JavaScript for both back-end and front-end development.
Objective
Build a Full-Stack JavaScript application from scratch
Solutions:
- Build a database using MongoDB to house all the information for each movie and write the logic necessary for accessing this data.
- Build the front-end of the application using React.js that uses the database information to enable user interactivity.
- Use version control via GitHub to track changes to the project and host the original code.
Tools and Technologies
Structure
Back-End Process
- Using Node.js and Express, build a RESTful API and preform endpoint testing with Postman.
- Using MongoDB and Mongoose, build a non-relational database and write the necessary business logic.
- Using Passport and JWT, write the logic to authenticate users and authorize their access to certain functionality of the app.
- Using Heroku, deploy and manage the app's API online
Front-End Process
- Using React, built the app's front-end to enable user interactivity.
- Using React-Router-Dom, implement the logic allowing users to access different pages of the app.
- Using Redux, React-Redux, and Redux Toolkit, manage the state of the app which, in turn, centralizes the data used throughout the app.
- Using Netlify, deploy and manage the app's client-side server.
Reflection
FilmFever has proven itself to be an invaluable learning experience in my developer journey. From building and accessing a database to fleshing out the user experience on the front-end, this project demands a deep understanding of full-stack development to ensure every component works as expected.
Overcoming Challenges
Given the scope of this project, the development process brought with it some challenges. When developing the front-end, the biggest challenge was implementing Redux with React to achieve the desired results. With the help of Redux Toolkit and personal research, I was able to properly implement Redux to manage of the state of my app. The main issue that arose during back-end development was ensuring that all the endpoints of the API functioned correctly. This was a common error that was thrown during development.
(TypeError: req.login is not a function)
After researching the issue and debugging my code, I solved the issue by restructuring the middleware of the Node.js server. This issue showed me the importance of proper code structure, especially when setting up a server. These challenges proved to be an excellent learning experience and helped me gain a better understanding of the relationship between the server-side and client-side.
Duration
The development of FilmFever took about two weeks from start to finish. Most of the development time was spent on building the back-end of the app as well as learning the intricacies of React and Redux.
Credits
- Role: Lead Developer
- Tutor: Jason Early
- Mentor: Tony Dominguez