TCDb - The Cinema Database

Details

1. TCDb
2. Demo
3. Built With
4. Features
5. Run Locally
6. .ENV variables
7. Optimizations

TCDb

Movie tracking websites like IMDb and Letterboxd already exist. However, everyone has their preferences and there were still things that I didn't like that ultimately drove me to create my own web application:

• Track, rate, and see films all in one place for personal use – While a community is important in many places, most days I just want the simple functionality of seeing what shows I've watched and what shows I bookmarked.

• Letterboxd doesn't include TV shows in their database – This can be frustrating for some users if they want to keep all their favorite TV shows and movies in one place.

• Both IMDb and Letterboxd only allow user ratings in half integer (star) increments – I personally found this to be very limiting as it paints a very black and white picture that isn't quite accurate in my opinion.

Also, building a fullstack CRUD app like TCDb is a great way to learn, practice, and demonstrate my skills 😊

Demo

Try it out here using this link or this one: https://thecinemadb.netlify.app/.
Please do create an account (or use the provided login details) and try out the app for yourself!

Email: test@test.com
Password: testing123

Built With

• 
• 
• 
• 
• 
• 
• 

(↑)

Features

• ❤️ All in one place to track, log, and rate both movies and shows
• ⭐ Bookmark movies to watch later
• 📱 Responsive design for both mobile and desktop
• 💻 Simple, functional, and modern UI
• 😲 Ability to provide ratings to 1 decimal place (crazy, I know!)

Run Locally

1. Install npm

  npm install npm@latest -g

2. Clone the repo

  git clone https://github.com/klzheng/TCDb.git

3. Navigate inside the frontend directory and install dependencies

  cd frontend/
  npm install

4. Start the server

  npm run start

5. Navigate to the backend, install dependencies, and run server locally

  cd .. 
  cd backend/
  npm install
  npm run start

6. Make sure all environment variables are accounted for!

Environment Variables

1. Create a MongoDb Database Access account (if it doesn't already exist), and place credentials in .env file (Refer to next section)

2. Create TMDb account store API key in .env file

3. Create Google Cloud Platform Account and connect it to nodemailer

• Refer to this useful guide from freeCodeCamp.

To run this project, you will need to add the following environment variables to your .env file:

1. Backend MONGO_DB_USERNAME MONGO_DB_PASSWORD JWT_SECRET PORT TCDB_MAIL_USER TCDB_MAIL_PASS OAUTH_CLIENTID OAUTH_CLIENT_SECRET OAUTH_REFRESH_TOKEN

2. Frontend REACT_APP_TMDB_API_KEY REACT_APP_BASE_URL

Optimizations

• Adding transitions/animation to movie cards (filtering/sorting)
• Add light mode

(↑)