WebArcade

Full Stack MERN web application where user can login and compete with others by playing games and achieving high scores.

Deployment link! => WebArcade

Contents

• Installation
  • Backend
  • Frontend
• Usage
• Features
• License

Installation

The following instruction includes both Backend and Frontend installation. To only operate Frontend, feel free to skip the Backend

Backend

1. Create .env file under /backend folder.
2. Create MongoDB account (https://www.mongodb.com/atlas/database)
   • After creation, proceed to connect compass.
   • Copy the connection string. mongodb+srv://...
3. Make sure to replace the following brackets []

// .env
NODE_ENV=development
PORT=8000
MONGO_URI=[mongodb+srv://YourDatabaseURL:IncludePasswordhere...]
JWT_SECRET=[secret code]

Frontend

$\color{#CC5500}{\textsf{In case of using Backend follow the instruction below}}$

1. Open vite.config.js.
2. Make sure the target:

"/api": {
target: "http://localhost:8000",
changeOrigin: true,
},

...matches with the backend URL. (8000 by default)

Usage

Backend

1. Open terminal at \backend
2. Run $ npm install to install all dependencies.
3. Run $ node server.js

Frontend

1. Open terminal at \frontend
2. Run $ npm install to install all dependencies.
3. Run $ npm run dev

Features

• Backend

  • ExpressJS: A fast, unopinionated, minimalist web framework for Node.js.
  • MongoDB: NoSQL database used for storing user information.
  • BCryptJS: A library to help hash passwords securely.
  • JSON Web Token (JWT): Used for authentication and secure data exchange.

• Frontend

  • ReactJS (Vite): A JavaScript library for building user interfaces.
  • Redux: A predictable state container used for managing application state.
  • jQuery: A fast, small, and feature-rich JavaScript library.
  • ThreeJS: An API used to create and display animated 3D graphics in a web browser.

License

MIT License: see the LICENSE file for details.