Case Study for myFlix full-stack Project

MyFlix Project Screenshot

MyFlix Movie App is a sophisticated web application crafted with the MERN stack and Angular CLI. It is designed to provide movie enthusiasts with an immersive single-page application (SPA) experience. It features a vast database of movies, enabling users to explore detailed information, bookmark their favourites, and manage personal profiles. The application prioritizes user security by implementing JWT for authentication and employing robust password hashing mechanisms.

GitHub API GitHub Angular GitHub React

Showcasing Full-Stack Proficiency

The primary purpose of the MyFlix Movie App is to demonstrate proficiency in full-stack JavaScript development as part of a web development course at Career Foundry. This project showcases the integration of modern web technologies to create a secure, user-friendly platform for exploring and managing movie information.

Overview Screenshot

Building a Comprehensive Web App

This project aimed to construct a fully functional web application, integrating server-side and client-side development from the ground up. This project enhances a professional portfolio by showcasing a high level of proficiency in full-stack JavaScript development.

Development Timeline and Key Technologies

Balancing Client-Side and Server-Side Development

Overview Screenshot

Development Duration:

Developing the application on the client site took approximately twice as long as creating it on the server site de. I focused on thoroughly understanding Angular and its interaction with the API, ensuring that I achieved the desired functionality and user experience.

Overview Screenshot

Technological Stack:

  • Core Technologies: HTML, CSS, JavaScript, TypeScript | React, React Redux, React Bootstrap
  • Libraries & Frameworks: Angular, Material-UI
  • Data Handling: AJAX, JSON
  • Version Control: Git, GitHub
  • Server-Side Technologies: Node.js, Express.js
  • API Development: JSON, RESTful APIs, Postman
  • Hosting & Cloud Services: AWS, Firestore, Heroku, Netlify
  • Databases: Relational (PostgreSQL), Non-relational (MongoDB)
Overview Screenshot

Server-Side Development:

I created a RESTful API for the server side using Node.js and Express and a non-relational database (MongoDB). The API allows data about movies and users to be retrieved from the database through common HTTP requests, which return JSON. The API and database are connected through a business logic layer using Mongoose.

Overview Screenshot

User Authentication Implementation:

I also implemented a login endpoint with basic HTTP authentication, returning an authorization JWT (token) to the client. This ensures that only logged-in users can access the database. Initially, the authentication and authorization mechanisms were quite challenging for me. However, after some time and effort, they became clear and functional. I used Postman to test the endpoints.

Server side image

Server-Side Development →

I created a RESTful API using Node.js and Express, designed to interact with a non-relational database (MongoDB) through Mongoose. The API follows REST principles, supporting standard HTTP methods like GET and POST for seamless data retrieval and storage. By utilizing CRUD operations, the API provides movie information in JSON format, acting as the robust backend for the MyFlix Movie App. This enables comprehensive interaction with movie, director, and genre data.

  • Core API Basics

    I developed a RESTful API using Node.js and Express, designed to interact with a non-relational database (MongoDB) through Mongoose. The API adheres to REST principles, supporting standard HTTP methods such as GET and POST for seamless data retrieval and storage.

  • API Business Logic

    Utilizing CRUD operations, the API delivers movie information in JSON format, serving as the robust backend for the MyFlix Movie App. This enables comprehensive interaction with movie, director, and genre data, ensuring data is consistently formatted and easily accessible.

  • Security Measures

    The API is designed following REST principles, providing intuitive URLs, responses in JSON format, and standard HTTP status codes. It includes user registration and management functionalities features and implementing JWT for secure authentication and password hashing for enhanced data protection.

  • Deployment Process

    I've successfully connected my Heroku application to my MongoDB Atlas database by updating the connection URI in the "index.js" file with environment variables, pushed the changes to Heroku, and confirmed the app loads and connects to my database.

Server side image

Client-Side Development →

After completing the API, I developed the user interface to interact with the server side. This single-page, responsive application was created using Angular and Angular Material. It includes multiple interface views, such as a welcome view for user login and registration, a main view displaying all movies, and a profile view where users can update their information and manage their list of favourite movies.

  • Client-Side Construction

    This project aimed to create a comprehensive client-side application for MyFlix based on its pre-existing server-side implementation. To achieve this, I used Angular because it is powerful, widely used, and adheres to Google's Material Design guidelines. Then, I used Angular CLI to complete the build operations.

  • Component Creation

    Once the initial build was done, I created components for the different views and services to handle state management and API interactions. I used Angular Material to ensure a consistent and visually appealing UI.

  • UI/UX Design

    I utilized Angular Material to design the pages' layouts, ensuring a responsive and user-friendly interface. I also implemented client-side app routing to enable seamless navigation between views and integrated authentication for secure access.

  • Final Product and Deployment

    Finally, I added features to manage the application's state and enhance functionality. After thorough testing using Postman, I deployed the application on GitHub and connected it to the MongoDB Atlas database via Heroku. This ensured that my app was scalable and ready for movie enthusiasts.

User Profile Management:

Profile Features:

  • View User Details: Users can view their registered details, including username, email, and date of birth.
  • Update Information: Users can update their profile information, such as changing their username, email, or date of birth.
  • Deregister Account: Users can delete their account if they no longer use the service.
  • Favorite Movies: Users can view a list of their favorite movies, which they have bookmarked for easy access.
  • Manage Favorites: Users can add or remove movies from their list of favourites, allowing them to keep their preferred movie collection current.
Overview Screenshot

User Registration and Login

Authentication Features:

  • User Registration: New users can create an account with a username, email, and password, as well as form validation.
  • User Login: Registered users log in with their username and password to access features.
  • Password Security: Passwords are securely hashed, and JWT is used for secure sessions.
  • Error Handling: Forms provide feedback on incorrect credentials or incomplete submissions.
  • Session Management: Users stay authenticated throughout their session without re-entering credentials.
  • Logout: Users can securely log out to prevent unauthorized access.
Overview Screenshot Overview Screenshot
Overview Screenshot

Retrospective

  • Integration Challenges

    The biggest challenge was integrating all the components efficiently and ensuring seamless communication between the front and back. Balancing the complexity of implementing Angular with Angular Material for the front end while managing server-side functionalities was tough. Time management was also challenging, as I had to ensure thorough testing and debugging using tools like Postman to ensure optimal functionality.

  • UI Creation

    Once the initial build was done, I created components for the different views and services to handle state management and API interactions. I used Angular Material to ensure a consistent and visually appealing UI.

  • Future Plans

    In the future, I plan to expand the MyFlix Movie App by incorporating additional features like advanced search and filtering options and personalized recommendations. I also aim to enhance the UI/UX by adding intuitive navigation and better accessibility features. Another critical step would be implementing more comprehensive testing strategies, including automated tests, to ensure ongoing stability and performance.

  • Project Success

    Overall, I'm proud of the final product. The MyFlix Movie App showcases my ability to develop a complete application using the MERN stack and Angular. The project highlights my understanding of front-end and backend development and the integration of secure user authentication and data management. This project has provided valuable insights and experiences, preparing me for future web development challenges.

GitHub API Project Angular Project React