CMDB (MERN)
An interactive movie database app that lets you set up an account, browse movies, set up a list of, and delete favourites. (CMDB stands for "Claudia's Movie Database)
Topic: Movie Database
Completion: 2024/07
Client / Employer / Training: CareerFoundry
Try it out:
Head to the live app and create an account. As this is a training project, you can use a fake email address. You will not be sent any emails or be contacted in any way.
Project Objective:
The task was to build a Full Stack - Single Page Application (SPA) using the MERN Stack (MongoDB, Express, Node.js - for the backend; React for the Frontend) building both backend (server side) and frontend (client side) from scratch.
The final project was to be hosted on Heroku (Backend) and Netlify (Frontend).
Purpose:
This was a project was part of my studies with Career Foundry to build a FullStack web app.
Duration:
This project was divided into 2 Achievements - building the BackEnd took me about 10-12 days across 10 lessons. The Frontend took around 12-15 days to build and make visually pleasing.
Role:
For this project I took the role of a Full Stack Developer.
TechStack - Tools - Methodology:
Credits:
Tutor: Ayeah Godlove Akoni
Mentor: Lucien Chemaly
Design & Inspiration
Naming & Logo: I thought it would be fun to create an IMDB clone and just use my name in the abbreviation. In terms of looks, I wanted to create something in an 'old-Hollywood' style in the same colours as IMDB and used Ideogram.AI to create the logo.
Overall Look & Feel: I decided on a dark background with punchy colour tones in turquoise, gold and red that provide a good contrast.
Content Organisation: A lot of the content is organised into Bootstrap Cards, Rows and Columns for a clear structure.
Related Projects
Views & Features
Mainview: Browse the Movie Database, Search and Filter movies, Add & Remove from List of Favourites
MovieDetails: Shows more extensive information about each movie as well as more movies of the same director and the same genre, which are linked to be called up for view. Adding and deleting movies from the list of favourites can also be done from here.
ProfileView: Users can change their profile information or delete their account completely. Users can view their list of favourited movies and delete them from the list.
SignUp/ Login View: Once you go to the app's website, the user is asked to sign up. Users can set up an account with a username, password and email address and use this immediately for login.
Approach & Steps taken
FrontEnd
Content & Organisation: After setting up a basic React app and ensuring the build was functioning correctly, I began creating the various views, deciding which information to display on movie cards and detailed views.
Functionality: On the main view, I implemented search and filter functions to help users find movies easily. For the detailed view, I added features to display and navigate to movies by the same director or within the same genre. I used PropTypes to validate the data types passed to the movie cards and detail view components. I connected the app to the previously built API using Axios, and I set up React Router for navigation between views.
Design: I utilized Bootstrap for React to streamline the design process, incorporating components like cards, buttons, a hamburger menu, and other features to ensure a clean layout and user-friendly functionality.
Security: For the login and signup flow, I implemented client-side form validation to enforce required formats for user credentials, enhancing the reliability of user inputs.
Backend
Content & Organisation: First, I created the database content with MongoDB, setting up two collections: one for movies and another for users.
Functionality: I then used Node.js and Express to set up the web server, including defining API routes and implementing business logic. For database operations, I used Mongoose to define schemas and manage interactions with the database.
Security: I implemented secure user authentication using JWT and password hashing with bcrypt. To allow API calls from an application hosted separately from the server, I enabled CORS.
Testing: Testing: using Postman to ensure proper operation. After confirming everything worked, I deployed the database to MongoDB Atlas and hosted the backend application on Heroku.
What were the consequences?
I tried to create more efficiency by using the same button to favourite / unfavourite movies. However, this meant that I had to create a double functionality for 1 Button using conditional rendering and Ternary Operators.
My database contains about 150 movies, which is quite extensive but it also brought me closer to using ChatGPT / Claude.AI for rendering JSON docs and grabbing information from other sites about movies.
Within the list of favourites on the user profile, I decided to not just have a 'copy of the movie cards' but a different look, giving this app a more realistic and diversified feel.
Retrospective
As this app is not super extensive, I built it using mainly React Hooks, so am now looking more into using Redux for State Management to deal with more complex apps going forward.
It was difficult getting into Bootstrap styling and I know there are better libraries out there that are more commonly used. I am aiming to check out more such as Tailwind, Chakra and Radix.
This was the first Full Stack project I created and I am very happy with it. It's been a big jump from my previous projects in creating static websites.
I aim to create clean and intuitive designs. The most fun I have is building frontend visuals so digging into React Bootstrap was a big part of building this app to make use of the structure that it provides. I overwrote a lot of the utilities though to give it an individual look.
The topic of the app was quite fun and I had a blast setting up the JSON Documents for all the movies using ChatGPT and Claude.ai to pull information off of the internet (mostly IMDB) to structure and enhance the database .
I am working on turning this into a PWA so it can be saved on desktops.
I wanted to create a 2nd list - a 'Watchlist' for users.
I am thinking about having another schema / document collection to organise information around actors.
I could also consider letting users create new movies if their favourite is missing. This might be tricky with permissions and have legal implications though...