Aim App

🚀 Live Demo (Currently Unavailable)

⚠️ Note: The live demo is currently offline as the database instance is not running to reduce hosting costs. However, you can still explore the full source code and set it up locally.

The BACKEND repo is here

---

Description:

With Aim App you will improve your FPS(First Person Shooter) games skills (Counter Strike, Valorant, Call of Duty, etc...)

Tech Stack:

📝 Table of Contents

• About
• Design Process
• Video Demo
• Getting Started
• Installing
• Deployment
• Authors
• Acknowledgments

🧐 About

This project is a fullstack React (TypeScript) - Flask (Python) application with a SQL (Postgres) database.

• Users need to register and then can play 2 games: reaction time and aiming.
• Users will get an average score after playing 3 times for each game and this will be saved.
• Users can customize their web app with their favorite color theme.
• Users can watch a positions table with all ranked players based on their scores (for each game).

💡 Design Process

My thought process started with:

Backend, I used Flask (Python). I used werkzeug library for password hash generation and flask_jwt_extended for token related matters, flask route decorators to handle the get and post HTTP requests for the diferent api routes.

For Databases I used sqlite3 in local, but for production I have to migrate to PosgreSql, for being a more reliable and robust option. Since both are relational Database Management Systems the migration was not that complicated.

Then for the Frontend part I picked the React library (for building the user interface) with TypeScript (for static typing) and Vite , Along with that I used React router for handling client side routing, adapters to connect back and front with models for data, custom hooks for forms, Sass for styling, semantic HTML and BEM Nomenclature.

🎥 Video demo

The Aim App is pretty straightforward, but if you want to watch how it works you can find this video demo

🏁 Getting Started

The project is currently live (to 12/09/23) you can find it here

But if you want to wan it local, these instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

💻 Installing

A step by step series of examples that tell you how to get a development env running.

Prerequisites

Having installed:

• Python

• Postgres

• Configure their environment variables in PATH

• An IDE (eg. Visual Studio Code)

Requisites

Git clone the repo with: HTTPS https://github.com/gsvidal/aim-app-finalproject.git

or

SSH git@github.com:gsvidal/aim-app-finalproject.git

BACKEND:

Activate virtual environment for backend in: ./backend then python -m venv .venv after that go to root directory ./backend/aim-server/app and

run pip install requirements.txt to install all the libraries used in the project.

DATABASE:

In: # Configure CS50 Library to use PostgreSQL database: Replace db = SQL(f"postgresql://{db_username}:{db_password}@{db_host}/{db_name}") with your database data You have to have installed postgres

In the same directory run flask run --reload to start the development sever (similar to http://localhost:5000/)

FRONTEND:

cd ./frontend run npm install then run npm run dev to start the development server (similar to http://localhost:5173/aim-app/)

Change VITE_API_URL value to your backend development server url (after you flask run --reload it above)

🚀 Deployment

BACKEND:

At render.com (As a web service)

DATABASE:

At render.com (As a web PostgreSql DB)

FRONTEND:

At github.com (As a github page: gh-pages)

✍️ Authors

• @gsvidal - 3D (Design, Development and Deployment).

🎉 Acknowledgements

• Inspiration #1
• Inspiration #2