Overview

Nightflix is a movie browsing application that allows users to manage favorite lists and update profiles. The web application provides users with access to information about different movies, directors, and genres. Users are able to sign up, update their personal information, and create a list of their favorite movies.

Purpose&Context

Nightflix is a personal project developed during my web development course at CareerFoundry, showcasing my expertise in full-stack JavaScript development and my ability to design and implement a fully functional application from concept to deployment.

Objective

The goal of this project was to create a sophisticated full-stack application that could serve as a standout addition to my professional portfolio. I set out to tackle the challenge of building both the server-side and client-side components entirely from scratch, showcasing my ability to design and implement a complete, end-to-end solution.

Duration:

I started the Backend part of the project in March’2024 with my first commit and the official work on the project ended in July’24.

Tools, Skills, Methodologies

Backend Project Techstack: Express.js, MongoDB, MongoDB, Passport.js, JSDoc, CORS, Bcrypt
Frontend Project Techstack: Node.js, Express, MongoDB, and React.
Other tools: Terminal, Git, Chrome Web Tools, GitHub Desktop, Parcel.

Development process

Once the API was complete, I shifted my focus to developing the user interface that facilitates interaction with the server-side. The result is a responsive, single-page application crafted using React. This dynamic interface offers a range of views to enhance user experience, including:

A main view showcasing a catalog of all available movies.

A single movie view displaying detailed information about a selected movie, with the option to add it to a personal favorites list.

A login view for user authentication.

A registration view for new users to sign up.

A profile view where users can update their personal information and manage their favorites list.

Each view is thoughtfully designed to ensure seamless navigation and an intuitive user experience.

My challenges during the project:

The main problem was to connect the server-side to the client-side of the application using the correct endpoints and attributes: The most frustrating mistake was to use „Favourite“ instead of „favorite“ in the backend and using capitals where it was not necessary. On the other hand I gained a lot of understanding of the correlations in the code through my mistakes.

I had to create the MainView, MovieCard, and MovieView components for my Nightflix app using JSX. I didn't pass the right key to my movies in the map, in the mainView component... Instead of using key={movie._id}, I used key={movie.id} where the movie id isn't the right one used in the movies array.

Another problem that I faced was even if a user logged out, on the site there was still active the log-out button. So I had to find a solution to correct this to only show the log-out button only and only if the user is logged in:

During the development process, I identified a critical issue within my backend application that required a complete overhaul of my MongoDB database. The existing data, including images, lacked consistency, and the ObjectIDs for directors and genres were mismatched. To resolve this, I meticulously curated proper images from reliable sources and restructured the database for consistency. I then reloaded the database in MongoDB Atlas and redeployed the updated version on Heroku. Although the process was intricate and time-intensive, it significantly enhanced the application's reliability and data integrity.

Another challenge was the styling. I think I managed to create exceptional style for the app and I hope it will find it's user!

Conclusion

This project was both my most rewarding and most challenging endeavor. I thoroughly enjoyed designing the API and delving into database structures, which allowed me to strengthen my foundational knowledge. I also quickly became comfortable navigating and utilizing the terminal, a skill I found both empowering and essential. The transition to developing the client-side presented new hurdles, particularly in understanding the intricate interplay between the backend and frontend. Achieving the desired results required persistence and a willingness to learn. However, with the invaluable guidance of my exceptional mentor and a few intensive debugging sessions with an experienced developer, I was able to overcome these challenges and successfully bring the project to life. This experience solidified both my technical expertise and my resilience as a developer.