myFlix Project

Overview

myFlix is a web application developed using the MERN stack (MongoDB, Express, React, Node.js). It provides users with information about movies, directors, and genres, along with the ability to create accounts, update their profiles, and maintain a personalized list of favorite movies.

Purpose & Context

This project was part of my CareerFoundry web development course, designed to demonstrate my abilities in full-stack JavaScript development. The goal was to create a dynamic, user-focused application that highlights my technical skills and problem-solving abilities.

 
 

Objective

The primary aim was to develop both the server-side and client-side of the application. This ambitious project was intended to showcase my capabilities in full-stack development while solving the challenge of integrating various features into a cohesive application.


Approach

Server-Side

  • Built a RESTful API using Node.js and Express.

  • Designed and implemented CRUD operations to interact with a MongoDB database, providing JSON-formatted responses.

  • Secured the API with JWT-based authentication and authorization mechanisms.

  • Extensively tested endpoints with Postman to ensure functionality and reliability.

Client-Side

  • Developed a responsive, single-page application using React and React-Bootstrap.

  • Designed multiple user-friendly views:

    • Main View: Displays a list of all movies with a search feature to find a movie by title..

    • Movie Detail View: Shows details about a single movie with options to add or remove it from the favorites list.

    • Login View: Enables user authentication.

    • Registration View: Allows new users to create accounts.

    • Profile View: Lets users update personal details and manage their favorite movies.

  • Implemented state management using React Hooks for cleaner and more maintainable code.

 
 

Challenges & Key Learnings

  1. Data Flow and Component Architecture in React

The Challenge: Initially, structuring the flow of data between parent and child components led to unexpected rendering and state update issues. The complexity came from juggling multiple views (e.g., Main View, Movie Detail View, and Profile View) that each needed data from the API in slightly different formats.

How I Addressed It:

  • Discussed debugging and problem-solving strategies with my tutor..

  • Used the React Developer Tools to trace the state and props flow in real time.

  • Restructured components so that data fetching occurred at a higher-level parent component, reducing repeated network calls and ensuring consistent data availability.

What I Learned:

  • The importance of having a clear “data flow map” that shows which components own particular pieces of state.

  • How to leverage React Hooks (mainly useState and useEffect) more effectively to manage and propagate data.


  1. Integrating Authentication and Authorization

The Challenge: Incorporating JWT-based authentication was my first time handling secure routes in a React application while using a custom-built Node/Express API. Ensuring token validity, handling token expirations, and differentiating between authorized/unauthorized states required a cohesive strategy across both client and server.


How I Addressed It:

  • Studied official Express and JSON Web Token documentation, experimenting with token-based middleware to validate user sessions on the server side.

  • Created a higher-order component (HOC) on the client side to guard certain routes, ensuring only authenticated users could access them.

  • Implemented robust error handling and user notifications to improve the user experience around login/logout states.

What I Learned:

  • Best practices around storing JWTs (e.g., avoiding localStorage if possible) to mitigate security vulnerabilities.

  • The value of clear error messages and redirection strategies to maintain good UX when a token is invalid or expired.



Duration

Completing the project took significantly longer than other assignments due to the complexity of full-stack development. The server-side was completed within a few weeks, but the client-side required additional time to fine-tune features, enhance responsiveness, and troubleshoot challenges.