https://github.com/insooeric/webarcade

Full-Stack Webpage with several games
https://github.com/insooeric/webarcade

fullstack-project

Last synced: 11 months ago
JSON representation

Full-Stack Webpage with several games

• Host: GitHub
• URL: https://github.com/insooeric/webarcade
• Owner: insooeric
• License: mit
• Created: 2024-01-31T22:40:45.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2025-01-26T01:51:03.000Z (about 1 year ago)
• Last Synced: 2025-02-04T10:53:15.271Z (about 1 year ago)
• Topics: fullstack-project
• Language: JavaScript
• Homepage: https://webarcade.onrender.com/
• Size: 4.92 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# WebArcade

[![forthebadge](https://forthebadge.com/images/badges/made-with-javascript.svg)](http://forthebadge.com)

[](https://codepen.io/)

[![Vite](https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge&logo=vite&logoColor=white)](https://vitejs.dev/)

[![Open Source? Yes!](https://badgen.net/badge/Open%20Source%20%3F/Yes%21/blue?icon=github)](https://github.com/insooeric/WebArcade)

[![Website webarcade](https://img.shields.io/website-up-down-green-red/http/shields.io.svg)](https://webarcade.onrender.com)

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

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

## Deployment link! => [WebArcade](https://webarcade.onrender.com/)

# Contents

- [Installation](#installation)

  - [Backend](#backend)

  - [Frontend](#frontend)

- [Usage](#usage)

- [Features](#features)

- [License](#license)

# Installation

The following instruction includes both Backend and Frontend installation.

To only operate Frontend, feel free to skip the [Backend](##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](../master/LICENSE) for details.