Movie Box (Inventory Application)

See it in action

Project Summary

This web app is a basic movie database where one can view, create, edit, and delete films as well as their directors and genres.

Using what I learned about creating an Express application from a previous project from The Odin Project and Mozilla Developer Network, I created a CRUD web application using the MERN stack.

Project Details

I learned the following from this project:

1. Creating a full stack application by connecting a React frontend with an Express backend
2. Recreating a Figma design with React and Chakra UI
3. How to setup a Node development environment
4. Using a database to store my app's data
5. How to setup a CRUD interface for a web app
6. Working with forms
7. Deploying my app to production

Note: This web application is functional but not complete.

I would like to implement and improve the following:

1. Improve responsive design for small screens
2. Finish the film carousels on the home page to scroll and sort films (e.g. by date released, recently added, etc.)
3. Add ability to search
4. Require an account and authentication to be able to edit films, directors, genres
5. Sorting functions to allow a user to filter the films using multiple constraints (e.g. filter only 'Action' films released in '1982')
6. Add the cast to the films
7. Implement a rating system for users to interact with the site

I used the following technologies to complete my app:

• Node.js - javascript runtime
• Express - web application framwork
• MongoDB - NoSQL databse
• React - JavaScript library
• Chakra UI - Component library
• Heroku - cloud platform as a service
• Git - version control system
• Figma - Web design tool

I used the following resources to help me create this:

• The Odin Project
• Figma Template
• Deploying a Full-Stack MERN app with Heroku

Additional Images

All Films

Film Detail Page

Film Edit Form