Faded Journals - Simple HTML Game

A simple little HTML game that was developed to learn Vue 3, Vue Router, FastAPI, and Axios.

TOC

• Game Goal
• Code Stack
  • Back-end
  • Front-end
• Port Usage
  • FastAPI
  • Vite
• Installation

Game Goal

• Simple to pick up and play
• Extremely responsive to user input
• Global player leaderboards
• Universal access across all platforms

Code Stack

Back-end

• Python - Backend base language
• SQLAlchemy - Database ORM
• Vite 4 - Development auto-refresh
• NPM - Used to manage packages for JavaScript
• FastAPI - Python middleware for communicating between Vue and Python

Front-end

• Vue 3 - Front-end display
  • Vue Router - Single File Application routing for Vue 3
• Axios - API Middleware built in JavaScript to communicate with FastAPI
• NaiveUI - Vue3 UX plugin system
• Bulma - CSS UI Framework

Port Usage, Debug, Recommended Setup

FastAPI (8000) - API for Front End to access Database

python -m uvicorn main:app --reload

Vite (3000) - Front End display

run dev --scripts-prepend-node-path=auto

Installation

1. Setup venv
   (Run the remaining code in venv)
2. Install Python Helpers - pip install -r requirements.txt
3. Run NPM Setup - npm install

---

Database Schema

Tables

Table Name	Definition
author	"Author" information (commonly known as users).
authorhistory	Author login, logout, failure tracking.
authorstatus	Author status related information, counts, etc.