Memo Sequence

Memo Sequence is a memory game built with React, Vite, Tailwind CSS, and Supabase.

The app is a single-page web app with a lightweight PWA setup, responsive UI, synthetic audio feedback, and a hosted leaderboard.

Gameplay

1. The game replays the full digit sequence one digit at a time.
2. Each digit is highlighted visually and played with a matching tone.
3. As the sequence gets longer, earlier digits are replayed faster while the ending remains easier to read and hear.
4. Once the replay ends, the player must enter the full sequence in order.
5. Every input is final. There is no undo and no submit button.
6. A wrong digit ends the run immediately.
7. After a game over, players with a score greater than 0 can save their name and score to the leaderboard.

Features

• Mobile-first responsive game board
• On-screen numeric keypad and hardware keyboard support
• Weighted sequence replay with Web Audio API tones
• Distinct digit tones plus a short game-over sound
• Local best-score persistence with localStorage
• Saved player-name persistence with localStorage
• Post-game score save modal with Supabase
• /leaderboard route with:
  • Top 10 all-time scores
  • Latest 10 saved runs
• Lightweight PWA installability

Routes

• / — game
• /leaderboard — leaderboard page

Tech Stack

• React
• React Router
• Vite
• Tailwind CSS
• Supabase

Environment Variables

Create a local environment file such as .env.local with:

VITE_SUPABASE_URL=your_supabase_project_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

The leaderboard UI requires both variables. If they are missing, the game still works locally, but saving scores and loading the leaderboard will not.

Supabase Requirements

The app expects a scores table with public read and insert access through Supabase Row Level Security policies.

Expected columns:

• id
• player_name
• score
• created_at

Recommended rules:

• score >= 0
• player_name length between 1 and 24
• public select
• public insert
• no public update
• no public delete

Development

Install dependencies:

npm install

Start the development server:

npm run dev

Create a production build:

npm run build

Preview the production build locally:

npm run preview

PWA Notes

The project includes:

• a web app manifest at public/manifest.webmanifest
• a minimal service worker at public/sw.js
• service worker registration in src/main.tsx

This setup supports installability on compatible browsers, but it is intentionally minimal and does not provide a full offline-first caching strategy.

Deployment

The app is configured for Vercel with SPA rewrites in vercel.json, so direct access or refresh on /leaderboard resolves back to the client app correctly.

When deploying, make sure the same Supabase environment variables are configured in Vercel:

VITE_SUPABASE_URL
VITE_SUPABASE_ANON_KEY