Cinemania

➡️ LINK TO THE APP

Description

Full stack web application built as Final Project for Class 23 of Hack Your Future Denmark

The main functionalities of the app are:

• Sign up for an account, log in and log out
• Search for a movie & filter movies on categories, price, rating and date
• Leave a review & edit review
• "Buy" a movie
• Save movies in your favorite list

Crafted by a collaboration of three teams 🗺️ guided by 🧙‍♀️ Karolina & 🧙‍♂️Tim

LANDING Team 🚀

• Mehmet Nuri Cavdar - Quality Guard
• Vipavee Kositthai - Agile Agent
• Natalia Persson - Product Pro
• Dan Jecu - Tech Champion

VIEW Team 👀

• Yifan Zheng - Quality Guard
• Aditi Sawardekar - Agile Agent
• Alaa Abdelbaki - Product Pro
• Oleksandr Sudarikov - Tech Champion

LIST Team 📜

• Madhumita Dasgupta - Quality Guard
• Md Alamgir Kabir - Agile Agent
• Violeta Pavetic - Product Pro
• Shobana Mathiarul - Tech Champion

Technologies Used

Frontend

• React
• MUI - Material UI
• Emotion
• Styled Components

Backend

• ExpressJS
• KnexJS
• MySQL
• Firebase
• Docker

Screenshots

Development

Prerequisites

• node >= 18.16.0
• yarn installed
• .env.example in client and in server copied, renamed to .env and filled with the right credentials (optional for server if you plan to use Docker)
• create the database according to the name in the .env file (optional if you plan to use Docker)
• Docker installed - if you plan to use it instead of directly using MySQL

Steps to set up the database

Important steps for those using Docker

• cd packages/server
• (Optional) update the credentials in the newly created .env. If you skip this step everything should work, but your database will have a generic name and user
• Run this command to build a database with Docker: docker compose up -d. The database will be built based on the values in .env

Create, fill and test the database (steps for both docker and no-docker setup)

1. yarn at the root to install dependencies
2. cd packages/server
3. yarn db:setup to run example migrations and seeds
4. yarn dev to start the server in development mode
5. check http://localhost:5001/api/movies to verify that the API works and you can read data from the database

yarn commands

npm commands are replaced with yarn which provides a faster experience and better organisation of dependencies. Do not run any npm commands!

To run client (frontend):

yarn workspace client start

or

cd packages/client yarn start

To run server (backend):

yarn workspace server dev

or

cd packages/server yarn dev

Below are the most frequently used commands:

Command	Description	Scope
yarn workspace [workspace] [command]	Run a given command in a dedicated workspace.	root
yarn prettier:fix	Run Prettier with the write flag.	root
yarn lint	Run Eslint. Can be run in all scopes.	root, client, server
yarn knex	Run knex commands. Will always operate on the server.	root, server
yarn start	Start either the client or the server.	client, server
yarn build	Build a production-ready React project.	client

Check scripts in each package.json and see that all the commands above come from there and there is more!