MERN Stack Movie Project

Demo at https://mern-movie.kevins.site

A full-stack application built using:

• TypeScript
• Node.js
• React
• Express.js
• MongoDB

---

Screenshots

UI design heavily inspired by https://anilist.co/search/anime

---

Project Spec

• Build REST API using Node.js+Express.js
• Build front-end with React
• Ability to add/edit/delete movies from front-end.
• Reset database with data from https://raw.githubusercontent.com/erik-sytnyk/movies-list/master/db.json
• Responsive UI with light and dark theme

---

Additional Features

• Fuzzy search, sort, filter (using URLQueryParams)
• Client-side data caching
• Dynamic import/code splitting for smaller bundle size
• Installable as PWA
• Custom selection component (not yet keyboard accessible)
• Loading skeleton for images, text and iframes
• Fallback image for broken poster links
• Extra info (i.e. Banner, YouTube trailer, IMDb link)

---

Quick Start

Requirements

• Node.js (minimum v16.4.0)
• pnpm (minimum v8.x.x)
• MongoDB Atlas (required for search aggregation)
• TheMovieDB API key (More Info)

Optional/Recommended Tools

• pnpm

Setup

1. Create MongoDB Atlas Account
   After account is made...

   • Create a New Project
   • Create a new Database Cluster in that project
   • Add a new Collection called movies to database
   • Create a Search Index using index definition (See mongo-index-def.json)

2. Install Dependencies

   # server-side dependenices
   pnpm install --frozen-lockfile

3. Make a .env file in the ./backend directory
   

   Example: .env.example

   # URI to MongoDB Atlas database
   MONGO_URI=mongodb+srv://<USERNAME>:<PASSWORD>@<PROJECT_NAME>.???.???.???
   
   # Database name
   # Also used as Search index name
   MONGO_DBNAME=database-name
   
   # TheMovieDB API key
   MOVIEDB_API_KEY=abcdefghijklmnopqrstuvwxyz

4. Start dev servers

   # to start client and server simultaneously
   pnpm dev

Key Dependencies/Packages

• Common

  TurboRepo	Monorepo build+config tool
  TypeScript	Type safe code
  Zod	Schema based validation
  Axios	HTTP client for browser and node.js
  Prettier	Code formatter
  Eslint	Code Linting
  Express.js	Back-end and web application framework

• Backend

  Mongoosse	MongoDB object modeling tool
  Pino	Console logger

• Frontend

  ViteJs	A rapid development tool
  React	Front-end JavaScript library
  React-Router	Client-side routing with React
  Zustand	A bear-bone state-management tool
  React Query	Caching, managing and syncing asynchronous data
  Framer Motion	For smooth animated transitions/interactions
  Popper.js	Popover positioning engine
  React-Hook-Form	Performant form validation
  React-Toastify	Toast notification in React
  Filepond	JavaScript file upload library