Checkpoint

Find it. Continue it. — A game-tracking app to search games, log play sessions, and finish what you start.

---

Description

Checkpoint is a passion project to make it easier to track your games, log play sessions, and actually complete your backlog. Search for games (powered by IGDB), add them to your list, log time and status (in progress, completed, dropped), and see trending and latest releases—all with a dark, gaming-themed UI.

---

Tech Stack

Category	Technology
Framework	Next.js 16 (App Router)
Language	TypeScript
UI / Styling	Tailwind CSS 4, MUI (Material UI) 7 (date pickers, etc.)
Auth & Database	Supabase (Auth, Postgres, Storage)
Game Data	IGDB API via Twitch OAuth2 (for search, trending, latest)
Animation	Framer Motion
3D / Splash	React Three Fiber + Three.js (optional / startup experience)
Fonts	next/font: Inter, Press Start 2P (Google), Knight Warrior (local OTF in public/fonts/)

---

Features

• Authentication

  • Email magic link (Supabase OTP) and OAuth (Google, Twitch)
  • Auth callback handles both code (OAuth) and token_hash (magic link) for sign-in
  • Verify-email flow with optional manual code entry; session check redirects if already signed in

• Home

  • Hero: “Find it. Continue it.” with IGDB search (query + filters: genre, rating, year)
  • Status pills: Completed / In progress / Dropped counts
  • Top Trending Games and Latest Releases sections (game cards, log/edit, wishlist)

• Navigation

  • Desktop: Centered nav (Home, Log Game, Game List, Profile) + user status chip (right)
  • Mobile: Hamburger menu; slide-out panel with nav links and inline “Signed in as” + Sign out
  • Nav links use a DualSense-style controller hover effect (CSS mask from local SVG)

• Profile

  • Dashboard: avatar (upload/remove), username edit, total hours, session stats, top games, weekly heat grid, sign out (with confirmation)
  • Avatar and username from Supabase profiles + Storage avatars; home page also loads avatar from profiles when not in OAuth metadata

• Log Game

  • Form to log a game session: game info (from IGDB or manual), date, minutes played, status, personal rating
  • Uses MUI date picker and app state for multi-session flow

• Game List

  • Board view of games by status (e.g. in progress, completed, dropped) with filters and links to log/edit

• Games by status

  • Dynamic route /games/[status] for viewing games in a given status

• Footer (global)

  • About the developer (link to /about#developer), © 2026 (yellow symbol, Inter font for glyph support), Contact (mailto:sujitaworks@gmail.com), Privacy Policy (/privacy)

• Static / Legal

  • /about — About Checkpoint + “About the developer” (Sujita Roy), anchor #developer
  • /privacy — Privacy policy (Supabase, no selling data)

• Responsive & UX

  • Mobile-first layout; hamburger nav; footer and content stack on small screens
  • Controller-shaped hover on nav items (DualSense SVG mask)
  • Optional controller cursor and startup gate (Three.js) for a gaming feel
  • overflow-x: hidden and full-width main content on mobile to avoid empty columns

---

Project Structure (high level)

checkpoint/
├── app/
│   ├── layout.tsx          # Root layout: fonts, ControllerCursor, StartupGate, Footer
│   ├── page.tsx            # Home: Nav, IgdbSearch, TrendingGames, LatestReleases
│   ├── about/page.tsx      # About Checkpoint + developer
│   ├── privacy/page.tsx    # Privacy policy
│   ├── auth/
│   │   ├── page.tsx        # Sign-in (email OTP, Google, Twitch)
│   │   ├── verify/page.tsx # Verify email code / token_hash
│   │   └── callback/route.ts # OAuth + magic link callback
│   ├── profile/page.tsx    # Profile dashboard (protected)
│   ├── log-game/page.tsx   # Log game form (protected)
│   ├── gamelist/page.tsx   # Game list board (protected)
│   ├── games/[status]/page.tsx # Games by status
│   ├── components/        # Nav, Footer, Auth, IgdbSearch, ProfileDashboard, etc.
│   ├── lib/supabase/       # Server/client Supabase clients, env helper
│   └── api/                # API routes: igdb/search, trending, latest; wishlist; logged-games
├── public/
│   ├── fonts/              # Knight Warrior OTF
│   └── dualsense-svgrepo-com.svg  # Nav hover mask
├── package.json
├── next.config.ts
├── tailwind / postcss / tsconfig
└── README.md

---

Environment Variables

Create a .env.local (or equivalent) in the project root:

Variable	Description
NEXT_PUBLIC_SUPABASE_URL	Supabase project URL
NEXT_PUBLIC_SUPABASE_ANON_KEY or NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY	Supabase anonymous/public key
TWITCH_CLIENT_ID	Twitch app client ID (for IGDB API token)
TWITCH_CLIENT_SECRET	Twitch app client secret (for IGDB API token)
NEXT_PUBLIC_APP_URL	(Optional) Canonical base URL for SEO and sharing (e.g. https://checkpointapp.pro). Defaults to https://checkpointapp.pro if unset.

---

Supabase Setup

1. Auth

   • Enable Email (magic link) and OAuth providers (Google, Twitch) as needed.
   • In Authentication → URL Configuration, add redirect URLs:
     • https://your-domain.com/auth/callback (e.g. https://checkpointapp.pro/auth/callback)
     • http://localhost:3000/auth/callback for local dev.
   • To keep users signed in longer (e.g. days/weeks instead of logging out often), in Project Settings → API → JWT Settings (or Auth → JWT expiry), increase JWT expiry (default 3600 sec = 1 hour; max 604800 = 1 week). The app’s proxy refreshes the session and stores it in long-lived cookies (400 days); a longer JWT expiry reduces how often refresh is needed.
   • Optionally customize the Magic Link email template (subject/body) in Email Templates.

2. Database

   • Tables used: profiles (e.g. id, avatar_url), game_sessions, wishlist/game-list tables as per your schema. Run migrations or SQL from your Supabase project.

3. Storage

   • Create a bucket avatars (or match the name in code) for profile avatars; set RLS so users can read/write their own object under their user.id path.

---

Getting Started

1. Clone the repo and install dependencies:

   npm install

2. Add .env.local with the variables above.

3. Run the dev server:

   npm run dev

4. Open http://localhost:3000.

Build and start production:

npm run build
npm start

---

Deploy

The app is deployable to Vercel (or any Node host). Set the same env vars in the deployment dashboard. Production domain example: checkpointapp.pro.

---

Developer

Sujita Roy — About the developer · Contact: sujitaworks@gmail.com

© 2026 All rights reserved.