Smart Games - A fullstack project of a virtual store

Check my LinkedIn, and Figma file of the project below:

Smart Games

A fullstack project (database, back-end, front-end and mobile). Games are received from an REST API, that receives informations from a Excel file (using XLSX conversor to JSON). Project is dockerized, but you can run it without Docker too.
Explore the docs » (coming soon)

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Roadmap
5. Contact

About The Project

(back to top)

Built With

• 
• 
• 
• 
• 
• 

(back to top)

Getting Started

To get a local copy up and running follow these simple example steps.

Prerequisites

• Docker or NPM

  • Docker Install Guide
  • NVM Install Guide
  • MySQL Install Guide (if you choose to use NPM)

Note

Docker is the best option for compatibility, but if you don't like it, use NPM instead. If you need help to install the project requirements, please follow the instructions above to install Docker or Node.

If you choose to use NPM, don't forget to install MySQL too.

Installation

How to run project with Docker

1. Install Docker on your O.S

2. Go to the root directory (where is allocated the file: docker-compose.yml)

3. Mount the image and container

   docker-compose up

4. Now you can access the website on http://localhost:5173

Warning

You can't access mobile version on Docker for now, cause mobile version have few features, and web version is so much ahead, so I choose not to 'dockerize' the mobile version. I'm focusing on Node and AWS study. So, I will focus on mobile version after web version is 100% ready (check the Roadmap).

How to run project with NPM

1. Install NPM and MySQL on your O.S

2. Start MySQL service (if you get an permission error, use 'sudo' before code)

   > service mysql start

3. Start MySQL terminal and create a database on MySQL named smartgamesdb

   > mysql
   > CREATE DATABASE smartgamesdb

4. On your terminal, go to the back-end directory located in: back-end/src and install the dependencies

   > npm install

5. In your text editor, go to the files located in: back-end/src/config database.js and config.json. Now change the database settings on "connection" variable and config.json development section:

   // database.js
   
   const connection = new Sequelize('smartgamesdb', 'root', 'your_mysql_password', {
    host: 'localhost',
    dialect: 'mysql',
   });
   
   // config.json
   
    "username": "root",
    "password": "your_mysql_password",
    "database": "smartgamesdb",
    "host": "localhost",
    "dialect": "mysql"

6. Now, start the database with Sequelize-CLI and back-end server on your terminal

   > npx sequelize-cli db:migrate
   > npx sequelize-cli db:seed:all
   > nodemon index.js
   // Or, if nodemon gets error, use 'node index.js' instead

7. After server gets started, go to front-end directory located in: front-end/smartgames and run the application

   > npm run dev

8. The web version is working and ready to use now. You can access it on http://localhost:5173

9. To run the mobile version, go to path front-end/smartgamesmobile and install the dependencies

   > npm install

10. Then, run the mobile with Expo Go (download the app Expo Go on your device), and start the server on your terminal

    > npm run start

11. To finish, just scan the QRCode that Expo generates on terminal with your phone

Usage

For more examples, please refer to the Documentation (coming soon)

(back to top)

Roadmap

• REST API (Back-end)

  • Create a method to convert Excel file to .JSON
  • Create a link from Sequelize to Database and create the models (tables on Sequelize)
  • Create a method to get the items from database
  • Create a method to post the purchased items
  • Handle errors with middlewares
  • Change back-end code to TypeScript
  • Change ORM to Prisma
  • Authentication method to login
  • Can create a store on database and publish your own games
  • GraphQL version
  • New goals will be added according to project progress

• Figma (UX / UI)

  • Create the homepage
  • Create the modal
  • Create login and register screen
  • Create "add games" screen
  • Create darkmode version of site
  • Create a better color palette and color identification
  • Download page
  • Renew the UI
  • New goals will be added according to project progress.

• Create a web page (Front-end)

  • List database items on screen
  • Modal with item details
  • Can buy products sendind a protocol to database
  • Create a search bar to find games
  • Can create a account
  • Can create a personal store and publish games
  • Can filter by store, price and place
  • Create a search bar to find stores
  • Dark mode
  • English version
  • Download page
  • Comments section on each game page
  • Improve perfomance
  • New goals will be added according to project progress

• Create a mobile version

  • Games are listed on phone
  • You can purchase game and a protocol is sended to database
  • Map that shows where have a store to buy the game
  • Convert mobile version code to Flutter
  • New goals will be added according to project progress

See the open issues for a full list of proposed features (and known issues).

(back to top)

Contact

Fernando Oliveira - @FernandoFrali

Linkedin - in/FernandoFrali

Project Link: https://github.com/FernandoFrali/smart-games

(back to top)