Project Documentation: Tetris Game Fullstack App

Objective

The primary goal of this project was to develop a full-stack tetris multiplayer game

Implementation

The project was implemented using functional components and popular hooks in ReactJS with JavaScript and Create React App, leveraging the Material UI library for its components and styling, in addition to custom CSS modules. The App was developed to be responsive, following a multi-platform approach. The following steps were taken to complete the project:

1. Backend + MongoDB implementation: Backend was built with Node.js (express). Database (MongoDB) was attached to backend to store all user accounts data. Authentication (sign up and sign in) with user's email and password (encrypted) is also implemented.

2. Material UI, Custom Styling with CSS Modules & Custom Fonts: Material UI components were utilized to achieve a consistent and visually appealing design. Components such as TextField, Drawer, LoadingButton and others were used to create responsive and user-friendly web-app and related elements. The Google font was applied to the project to improve attractiveness of the App.

3. Deployment:...

4. Version Control: The code was hosted on GitHub and made publicly accessible. The repository can be found at https://github.com/jesuisstan/tetris-game.

Results

Deployed version of the App allows user to:

• authenticate with email and password (create new account or login to existing one). To test the App a user can click the button "Test" on authentication page;

• ...

Demonstration

Future Improvements

While the project has been successfully implemented and deployed, there are potential areas for improvement:

....

By addressing these areas for improvement, the project can be further optimized and polished, providing an even better user experience.

How to use

1. Install general dependencies (JS, package manager, etc):

• install Node version manager (nvm):

sudo apt install curl

curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash

source ~/.profile

restart terminal

• install NodeJS:

nvm install node

• install Node package manager (npm):

npm install -g npm@latest

2. Adjust .env file if you need other HOST, PORT, MONGO variables.

3. Run the App:

a) with Docker:

• run docker compose project:

docker compose up

OR

b) with NPM:

• install all the application dependencies according to 'package.json' files from the root, /frontend & /backend dirs:

npm run install:all

• Start Tetris App:

in development mode:

npm run dev

in production mode:

npm start

4. Open the App link in browser (http://localhost:4040 by default).

5. Additional commands:

• to list all Docker container:

docker ps -a

• to list all Docker images:

docker images

• to stop all running containers:

docker stop $(docker ps -q)

• to remove all stopped containers:

docker rm $(docker ps -a -q)

• to delete all Docker images

docker rmi $(docker images -q)