PizzaFlix

This is a website where user can Browse the most up-to-date movie/tv show information. Take a look! -> PizzaFlix

• Features
• How to start app locally
• Technologies
• Structure
• Performance

Features

Account System

• Login/Logout
• Password Update
• Account Password Encryption

Review Management

• User can browse review from others
• User can write/delete review for movies

Favorite Management

• User can add/delete movie to favorites
• User can look up its favorite movies

Search System

• User can search movie/cast/tv show

User Interface

• Dark/Light mode switch
• Responsive Web Design
• Interactive slider

How to start app locally

1. clone/fork this repo
2. download mongoDB
3. create a database -> use myDB-name
4. register The Movie Database account
5. generate API key
6. create .env in /server

/server/.env

MONGODB_URL = mongodb://127.0.0.1:27017/<your-db-name> # replace it with your db name
PORT = 5000
TOKEN_SECRET = <your_secret_key> # random string
TMDB_BASE_URL = https://api.themoviedb.org/3/
TMDB_API_KEY = <your-tmdb-api-key> # replace it with your API key

7. cd /server npm install npm start
8. create a new terminal cd /client npm install npm start

Technologies

Front end

• Create react app
• Material UI
• React router
• Redux Toolkit
• SwiperJS
• Formik
• Yup
• Axios

Back end

• Express rest api
• Express Validator
• Jsonwebtoken
• Mongoose
• Axios

Structure

Front end

graph BT
    server --> |send data|component
    redux[(redux store)] --> |change state |component(component)
    view -->|show| user(user)
    component --> |call api| server[server]
    component --> |dispatch action|redux
    component(components) --> |render|view(view)
    user[user] -->|operate|view
    view(view) --> |trigger|component(components)

Loading

Back end

graph TD
    A[Client] -->|request| C(routes)
    C --> |Requests requiring verification| D(token middleware)
    C --> |normal request| E(controller)
    D --> |success|E
    D --> |failed|H
    E --> |movie/people request|F[(TMDB Database)]
    F --> |res|E
    E --> |user/review/favorite request|G[(mongoDB)]
    G --> |res|E
    E --> |success/failed|H
    H(handler) --> |response|A

Loading

Lighthouse report

web-vitals report

• Use web-vitals library to analyze performance
• Performance is determined based on Web Vitals metrics thresholds

Metric	Value	Performance
LCP	2296ms	Good <2500ms
FCP	1570ms	Good <1800ms
TTFB	996ms	Medium between 800ms and 1800ms
FID	4ms	Good <100ms
CLS	0.007	Good <0.1

Credits

This project was built to understand how trananhtuat/fullstack-mern-movie-2022 implemented certain features. I studied their approach and built it independently

Development Notes

This development note is the result I recorded after solving problems during development. Development Documentation.