Aim App

Live at: https://www.gonzalovidal.dev/aim-app

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