StoreGG

A web app that lets gamers to top up or buy voucher games.

A course project from BWA Full-Stack JavaScript Developer 2021: Website Top Up Voucher Game with massive customizations.

How to Run

Initial Run

Do the following steps to populate the database with some initial documents; to populate the public images directory with some initial images; and to run all services.

1. Run the back-end and data seeding services.

docker compose -f ./backend/docker-compose.yaml --profile initial-run up -d --build

2. Make sure the backend services have been running properly.

3. Build & start the client service.

cd ./client

npm ci

npm run build

npm start

Run

Just run without data seeding.

1. Run the back-end services

docker compose -f ./backend/docker-compose.yaml --profile run up -d

2. Build & start the client service.

cd ./client

npm ci

npm run build

npm start

Running Ports

Service	Port
Client: Next.js	8080
Backend: Express.js	3000
Backend: MongoDB	27017

User Interface Design

See StoreGG Website UI Design.

Client Service

Backend Service

Admin Dashboard

The admin functionality is supported by a dashboard; rendered by the server using EJS templating engine.

RESTful API Documentation

See Client API Documentation.

Techstack

Fullstack TypeScript MERN with Next.js:

• TypeScript - a strongly typed programming language that builds on JavaScript.
• Next.js - an open-source web development framework created by Vercel enabling React-based web applications with server-side rendering and generating static websites.
• Bootstrap v5 - a free, open-source front-end framework that consists of CSS and JavaScript files and is used to create responsive, mobile-first websites and web applications.
• MongoDB - a NoSQL database that uses a document-oriented model for storing and accessing data, which allows for flexible and scalable management of large datasets.
• Node.js - a JavaScript runtime built on Chrome's V8 JavaScript engine.
• Express.js - a fast, unopinionated, and minimalist web framework for Node.js.
• EJS - a simple templating language for generating HTML markup with plain JavaScript.
• Admin LTE - a source admin dashboard & control panel theme. Built on top of Bootstrap, AdminLTE provides a range of responsive, reusable, and commonly used components.
• Docker - an open platform for developing, shipping, and running applications.