The primary goal of this project was to develop a full-stack tetris multiplayer game
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:
-
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.
-
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.
-
Deployment:...
-
Version Control: The code was hosted on GitHub and made publicly accessible. The repository can be found at https://github.com/jesuisstan/tetris-game.
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;
-
...
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.
- 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
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).
- 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)