TypeRush Arena

TypeRush Arena is a modern browser-based typing game built for solo practice, realtime multiplayer races, progress tracking, achievements, and GitHub Pages deployment. It runs fully on the frontend and uses Firebase Realtime Database for online data sync.

Live site, after GitHub Pages is enabled:

https://beginneraman.github.io/typing_game/

Features

• Solo typing challenges with timer and endless modes
• Realtime multiplayer typing race rooms using Firebase
• Live WPM, accuracy, streak, focus score, and progress tracking
• Word highlighting, character-level feedback, error states, and smooth scrolling
• Countdown start, pause, restart, and result summary modal
• Daily challenges, achievements, XP, levels, and personal history
• Leaderboard synced through Firebase
• Admin dashboard for managing users, leaderboard, rooms, and typing content
• Local profile storage for returning players
• PWA-ready setup with manifest and service worker
• Responsive dark UI built with HTML, CSS, and JavaScript

Tech Stack

• HTML5
• CSS3
• JavaScript ES modules
• Firebase Realtime Database
• GSAP animations
• Chart.js progress charts
• Lucide icons
• canvas-confetti
• GitHub Pages

Project Structure

typing_game/
├── index.html
├── style.css
├── script.js
├── manifest.webmanifest
├── sw.js
├── README.md
├── assets/
│   └── icon.svg
└── components/
    └── content.js

Firebase Setup

The Firebase config is inside script.js:

// ADD MY FIREBASE CONFIG HERE
const firebaseConfig = {
  // your Firebase web app config
};

The app uses these Realtime Database paths:

users
leaderboard
rooms
content

For quick testing, Firebase rules can be relaxed temporarily. For a public deployment, use Firebase Authentication and strict database rules before sharing the site widely.

GitHub Pages Deployment

1. Push the project to GitHub.
2. Open the repository on GitHub.
3. Go to Settings > Pages.
4. Set source to Deploy from a branch.
5. Select branch main.
6. Select folder /root.
7. Save and wait for GitHub to publish the site.

Your site should become available at:

https://beginneraman.github.io/typing_game/

Admin Access

The app includes a client-side demo admin flow for the configured owner name.

Important: client-side admin passwords are visible in browser source code. For real production use, protect admin actions with Firebase Authentication, custom claims, and secure Firebase rules.

Local Testing

Because the app uses ES modules, it should be served from a static server instead of opened directly as a file.

Example:

python -m http.server 5500

Then open:

http://127.0.0.1:5500/

Troubleshooting

If the old UI still appears after deployment, hard refresh the browser:

Ctrl + Shift + R

If the service worker keeps showing an older version, clear site data in the browser or unregister the service worker from DevTools.

If multiplayer or leaderboard does not work, check:

• Firebase Realtime Database is enabled
• Firebase config is correct
• Database rules allow the required reads and writes
• The browser console has no Firebase permission errors

License

This project is free to use and modify for learning, practice, and personal projects.