Case Study
Overview
FlickPick is a web app, developed using 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
FlickPick was a personal 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 have an ambitious full-stack project I can add to my professional portfolio. The problem I wanted to solve is to build the complete server-side and client side for the application from scratch.
Approach
Server-Side Development
On the server-side, I developed a RESTful API using Node.js and Express, which interacts with a MongoDB database. This setup handles user registrations, movie data retrieval, and updates to user profiles. I focused on creating efficient database queries and implemented JWT for secure authentication.
Client-Side Development
The client-side of FlickPick was built using React and Redux for state management. I designed a responsive user interface with Bootstrap that allows users to easily navigate through movie selections, access detailed views of movies, and manage their profiles. Integration of client-side routing was achieved with React Router to provide a seamless and interactive experience.
Project Review
What went well?
The integration between the client-side and server-side was smooth, thanks to the well-documented API. I'm happy with how the design turned out. It's clean and easy to navigate. People can easily find what they're looking for without any hassle.
Challenges
One of the challenges I faced was with the persistence of user profile updates. Initially, updates appeared to be saved during a session, but they wouldn't persist across new sessions or after a server restart. This issue was particularly troubling as it affected the core functionality of user account management. During a pair programming session with my mentor, we traced the issue to an environment configuration problem. We realized that the server was not consistently accessing the correct database configuration due to improperly set environment variables. To resolve this, we implemented `dotenv`, a module that manages environment variables. This allowed us to securely configure and access database connection details and other sensitive settings without hardcoding them into our source code. By using `dotenv`, we ensured that all environment-specific settings were loaded correctly at runtime, which finally allowed user updates to be properly saved and retrieved across sessions.
Future Steps
Working on FlickPick was a lot of fun! It really got me excited about everything web development has to offer. I learned a ton and can't wait to dive into more projects. I'm looking forward to experimenting with cool features and maybe even some new tech that could make apps even more fun and engaging for users. Here's to more coding adventures and creative solutions ahead!
Conclusion
Developing FlickPick was a valuable learning experience, deepening my understanding of how to build and manage a full-stack web application. It was particularly rewarding to see how front-end and back-end technologies work together to create a seamless user experience.