SavePoint

Every game, a chapter. A gaming diary for discovering games, tracking progress, and remembering the ones that stay with you.

Built with React Native · Expo SDK 57 · TypeScript · Supabase · RAWG.

App map

The map below shows the pages, editing flows, and features implemented in SavePoint. Open the full-size image to explore the screens.

Scalable SVG map · Page and feature guide · Original screenshots

Screenshots are actual mobile-width web previews, captured using a temporary demonstration account against the live backend. They are not Android/iOS device captures. Game artwork and data are provided by RAWG; rights remain with their respective owners.

Pages and features

Page / flow	Features
Sign in	Email and password, persistent session, resend verification email
Create account	Display name, email, password, email confirmation; duplicate display names allowed
Confirmation callback	Exchanges the email confirmation code; handles invalid links
Home	Popular, top-rated, and recently released game collections
Search	Debounced search, paginated results, game artwork
Game details	Description, platforms, genres, release date, screenshots, separate rating scales
Game editor	Want to play / Playing / Completed / Dropped; 1–10 rating; review; favorite; removal
My Games	Status filters; sort by recently added, personal rating, or title
Profile	Display name, artwork avatar, game statistics, favorites, recently played, sign out
Edit profile / artwork picker	Search game artwork, preview selection, save its URL, or use initials
Not found	Recovery action back to Home

Loading, empty, error, and offline states support the main flows. The bottom tabs connect Home, Search, My Games, and Profile.

Run locally

Use Node.js 22.13+ and npm.

git clone https://github.com/soufianfallah/SavePoint.git
cd SavePoint
npm ci

Copy .env.example to .env (Copy-Item .env.example .env in PowerShell). Its default configuration starts an explicitly labeled local demo.

npm start

Press w for web, a for an installed Android emulator, or scan the QR code with a compatible Expo Go installation. The phone and computer should be on the same network. Native iOS builds require macOS.

npm run web
npm run android

Demo mode

The demo includes a curated sample catalog and local persistence through AsyncStorage. It supports discovery, library actions, ratings, reviews, favorites, profile names, and artwork avatars. It starts with an empty library. Artwork needs a connection on its first load. Registration, email delivery, and cloud sync are not simulated; demo saves are not imported into live accounts.

Live mode

Follow the Supabase / RAWG setup guide to configure your own backend. Apply all migrations in order, deploy the rawg Edge Function, configure authentication redirects, and store RAWG_API_KEY as a server-side Supabase secret.

Set these public client settings in the ignored .env file:

EXPO_PUBLIC_SUPABASE_URL=https://YOUR_PROJECT.supabase.co
EXPO_PUBLIC_SUPABASE_PUBLISHABLE_KEY=YOUR_PUBLISHABLE_KEY
EXPO_PUBLIC_DEMO_MODE=false

Email and password identify the account. Usernames are display names only and may be duplicated. Email confirmation is required by the provided backend configuration.

Profile pictures load from the game artwork provider. Supabase stores only avatar_url; no image files or upload bucket are required. If an image fails to load, the app falls back to initials.

Architecture

app/                       Expo Router routes and layouts
components/                Shared UI, cards, artwork, and states
features/auth/             Forms, validation, session lifecycle
features/games/            Discovery, search, detail, cached queries
features/library/          Library, filters, rating/review editor
features/profile/          Stats, profile editing, artwork picker
services/demo/             Sample catalog and local persistence
services/rawg/             Demo/live catalog adapter
services/supabase/         Client configuration
supabase/migrations/       Schema, RLS, triggers, transactional RPCs
supabase/functions/rawg/   Authenticated game API proxy
scripts/                   Verification and documentation capture
tests/                     Domain and PostgreSQL security tests

TanStack Query manages server state; React Hook Form and Zod validate forms. NativeWind and React Native styles provide the interface, Expo Image caches artwork, and Reanimated supplies interaction feedback.

flowchart LR
    App[Expo app] --> Auth[Supabase Auth]
    App --> DB[(Postgres with RLS)]
    App --> Proxy[Authenticated RAWG Edge Function]
    Proxy --> RAWG[RAWG API]
    App --> Images[Remote artwork URLs]
    App --> Demo[AsyncStorage in demo mode]

Data and security

Profiles and private libraries belong to an Auth user ID, not a display name.
Row-level security protects profile/library reads and writes. Signed-in users can read game reviews.
A unique (user_id, rawg_game_id) prevents duplicate library entries and reviews.
save_game saves status, dates, rating, favorite, and review atomically.
Reviews require an integer rating from 1–10 and allow up to 1,000 characters. Removing a game or clearing its rating removes its review.
RAWG (/5), Metacritic (/100), personal (/10), and community (/10) scores are displayed separately. Community averages require at least three ratings.
The RAWG proxy validates sessions, bounds requests, limits each user to 60 requests per minute, and keeps the API key server-side.
.env, Supabase CLI state, dependencies, build output, and temporary artifacts are ignored by Git. Never put server secrets in EXPO_PUBLIC_* variables.

Verification

npm run typecheck
npm run lint
npm test
npm run doctor
npx expo export --platform all

Tests use PGlite to exercise the migrations, duplicate display names, ownership isolation, anonymous denial, atomic reviews, rating consistency, and rate limiting. Live verification scripts create temporary confirmed accounts and remove them afterward; they require an authenticated Supabase CLI session and the local .env.

node --env-file=.env scripts/verify-live.mjs
node --env-file=.env scripts/verify-live.mjs --docs
python scripts/build-app-map.py

The documentation capture requires the app running on port 8081 and agent-browser. It also verifies artwork selection, profile saving, and restoration after reload. The generated SVG can be opened directly; docs/app-map.png is its rendered README preview.

Scope and limits

No social feed, followers, messaging, payments, or measured playtime.
No personal photo uploads; avatars use remote game artwork or initials.
Recently Played means recently updated Playing/Completed entries.
Live operations need connectivity; the local demo persists on the device.
Physical-device verification and actual email delivery require separate checks. Browser captures and successful native bundles do not establish full device compatibility.

Development credit

Developed with OpenAI Codex using GPT-6 Astra, with product direction and review by Soufian Fallah.

References

Expo SDK 57 · Supabase · RAWG attribution and terms

See implementation notes and the included license. Third-party game artwork is not covered by this repository's software license.

soufianfallah/SavePoint

README