Case study for myFlix-Angular-client

Screenshot of the React version of the app's movie list view

Overview

What is myFlix-Angular-client?

myFlix-Angular-client is a dynamic web application designed for movie enthusiasts to search for films, view detailed information about them, and save their favorites for easy access. While it offers similar functionality to IMDb, it provides a more personalized and streamlined experience, tailored for users who want to manage their movie preferences in a user-friendly interface.

What's it built with?

myFlix-Angular-client is a full-stack app - I built the backend and API using Node.js and Express, and created 2 separate frontends, one in React and one in Angular.

Purpose

The myFlix-Angular-client app was developed to demonstrate my proficiency in Angular, TypeScript, and comprehensive documentation practices. Created as part of a full-stack web development program, this project aimed to:
- Showcase Full-Stack Development Skills: By building both the backend API and the frontend application, I showcased my ability to integrate various technologies and frameworks effectively.
- Explore and Compare Frontend Frameworks: The project provided an opportunity to compare Angular with React, enhancing my understanding of different frontend approaches and their respective strengths.
- Develop Practical Application: The app serves as a practical example of applying modern web development techniques to create a functional and user-friendly movie database application.

Process

Backend and API

I began by setting up a MongoDB database, initially populating it with a curated selection of my favorite movies, and then hosted it on MongoDB Atlas.
Next, I developed an API for the database using Node.js and Express, leveraging Mongoose to define the data models. The API was subsequently deployed on Heroku.

Head to my GitHub to take a look at the code for this API.

Frontend in React

I created the first frontend for myFlix-client as an SPA in React, using React Bootstrap for the UI styling. I created sign in and registration pages, using JWTs for user authetication. The main view shows a searchable list of movies, and you can click through to see more info about a movie, director, or genre. You can also add a movie to your favorites by pressing a heart button. Finally, I created a profile view, where you can update your user info, and also see a list of your favorite movies.

Screenshot of the React version of the YMDB app's profile view, showing a user's favorite movies

Challenges

In my initial experience with Single Page Application (SPA) development, I encountered significant challenges with state management, particularly for handling a user's favorite movies. The core issue was maintaining and updating the favorite movie data across multiple views, including the main view, movie details, and profile page. Ensuring that this data was consistently available and synchronized with the server—so users would see their correct favorites upon future logins—was complex.

My primary error was navigating between pages instead of employing proper SPA techniques. This approach resulted in state loss each time a user changed views, a problem that became evident only after implementing Redux Toolkit. The visibility provided by Redux Toolkit allowed me to identify and resolve this issue effectively.

Head to my GitHub to take a look at the code for the React frontend, where you can also find a live version of the app.

Frontend in Angular

I created a second frontend for myFlix-client with Angular, using Angular Material UI for styling. I did this to learn a new frontend framework (Angular), and to compare it to React.
This frontend contains all the same views as the React version, with some minor but significant differences. Instead of a search field in the main view, I included a filter for favorite movies. This way, users can see thir favorite movies in the main view, rather than needing to navigate to their profile. In my opinion, this makes it easeier for users to find and interact with their favorite movies.

Screenshot of the Angular version of the myFlix-client app's movie list view, showing a user's favorite movies

I also created modals for the movie, director, and genre information, instead of creating separate views for them.
The combination of these differences had the side effect that state management wasn't such an issue in this version of the app, since there wasn't a need to coordinate favorite movie info across different parts of the app. Head to my GitHub to take a look at the code for the Angular frontend, where you can also find a live version of the app.

Project Reflection: Full-Stack Development Experience

What did I learn?

This project provided an invaluable introduction to full-stack development, encompassing everything from database creation and API definition to crafting an intuitive user interface for seamless data interaction.

Reflecting on this experience, I would make two key changes if I were to undertake the project again. Firstly, I would opt for Tailwind CSS over Bootstrap for styling. While Bootstrap proved useful, I found it occasionally inflexible, whereas Tailwind CSS has delivered greater satisfaction in more recent projects. Secondly, I would prioritize state management from the outset to ensure a more cohesive and manageable development process.