Cine.log

Keep a diary of watched movies, give ratings and add your own reviews

Status: In Production

About • Features • Todo • How it works • Tech Stack • How to contribute • Author • License

About

Cine.log is a lightweight Web App with fully responsive layout focused on keeping track of watched movies alongside with other records, like ratings, reviews and watch count. It's built with MERN stack, with a RESTful API and using a front-end almost entirely developed with Material UI library.

Available at https://cinelog-js.netlify.app

---

Features

• Authentication with e-mail and password or via Google OAuth 2.0
• Password resetting
• RESTful API
• JWT based protection for API endpoints
• Access token and refresh token delivering
• Movie searching (data provided by TMDb)
• Access to movie info (data provided by TMDb)
• Movie list sorting and filtering
• Save/edit ratings and reviews
• Edit user info and password change

---

Todo

• E-mail validation
• Create custom movie lists
• Dashboard with insights on user behavior

---

How it works

1. Pre-requisites
2. Clone this repository
3. Set the environment variables
4. Run the back-end server
5. Run the front-end server

Pre-requisites

Before getting started, you'll need to have the following tools installed on your machine:

• Git
• Node.js
• MongoDB

In addition, you'll need to register a [free] accout at SendGrid and TMDb as well. You might also want an editor to work with the code, like VS Code.

Clone this repository

git clone https://github.com/alexbraga/cine-log.git

Set the environment variables

• Create a .env file at the root of both client/ and server/ folders, and place the following in each, with their respective values:

Front-end (client/.env)

#Environment
NODE_ENV=

#App URLs
REACT_APP_CLIENT_URL_DEV=
REACT_APP_CLIENT_URL_PROD=
REACT_APP_SERVER_URL_DEV=
REACT_APP_SERVER_URL_PROD=

#Google
REACT_APP_GOOGLE_CLIENT_ID=

Back-end (server/.env)

#Environment
NODE_ENV=

#Database
MONGO_URI_DEV=
MONGO_URI_PROD=

#TMDb
TMDB_API_KEY=

#SendGrid
SENDGRID_API_KEY=
FROM_EMAIL=

#App URLs
CLIENT_URL_DEV=
CLIENT_URL_PROD=
SERVER_URL_DEV=
SERVER_URL_PROD=

#JWT
JWT_SECRET=
REFRESH_JWT_SECRET=

#Google
GOOGLE_CLIENT_ID=

Running the back-end

Navigate to the server folder

cd cine-log/server

Install the dependencies

npm install

Run the server in development mode

node server.js

• The server will start at localhost:5000

Running the front-end

Navigate to the client folder

cd cine-log/client

Install the dependencies

npm install

Run the client in development mode

npm start

• The application will automatically open on your default browser at http://localhost:3000

---

Tech Stack

The following tools were used in the construction of the project:

Front-end

Language

• JavaScript

Main library

• React

Dependencies

• Axios
• Date-fns
• dayjs
• Material UI
• react-oauth/google
• React Router v6
• React Scripts
• React Strap
• React Table

See the file package.json

Back-end

Language

• NodeJS

Framework

• Express

Dependencies

• Axios
• Cookie Parser
• CORS
• dotENV
• Google Auth Library
• JWT
• Mongoose
• Passport
• Passport JWT
• Passport Local Mongoose
• SendGrid

See the file package.json

Utilities

• External API: TMDb
• API Testing: Postman
• Editor: Visual Studio Code
• Font: Montserrat

---

How to contribute

1. Fork the project
2. Create a new branch with your changes:

git checkout -b my-amazing-feature

3. Save your changes and create a commit message (in present tense) telling what you did:

git commit -m "Add my amazing feature"

4. Submit your changes:

git push origin my-amazing-feature

5. Create a pull request

• At the moment, any help with making the app fully accessible for visually impaired people will be very much appreciated.

---

Author

Alexandre Braga

 

---

License

This project is under the MIT License.