Mental Performance Dashboard
A gamified habit-tracking ecosystem where athletes log tasks, routines, and matches. Sub-collections for habitTracker and matchLogs feed an XP engine that turns daily consistency into visible progression.
Loading
Appointment Booking Platform
A comprehensive mental performance coaching platform that combines gamified habit tracking, real-time AI assistance, and structured coaching sessions for athletes.
01 · Stack
| Layer | Technologies | Key libraries |
|---|---|---|
| Frontend Framework |
|
|
| UI & Styling |
|
|
| Backend / Runtime |
|
|
| Database & Cache |
|
|
| Authentication |
|
|
| Hosting & Infrastructure |
|
|
| Integrations & APIs |
|
|
A dark-mode-first interface built on a black canvas with white type, using next/font/google to serve Geist and Geist Mono with zero layout shift. Utility composition runs through clsx and tailwind-merge, with component variants handled by class-variance-authority following Shadcn UI paradigms.
Modularised with hard boundaries between marketing, dashboard, and primitive layers, so the public site and the authenticated product can evolve independently. Interactive 3D moments are handled by Three.js through @react-three/drei.
React Context carries global concerns (AuthProvider, ModeProvider); local state stays in hooks. Server state is handled by Server Actions and Firebase real-time subscriptions rather than a client cache, so a value is never stale in two places at once.
Mobile-first throughout, installable as a PWA, and compiled to native iOS and Android through Ionic Capacitor from the same source. Semantic layout and accessible SVGs throughout.
Server Components as the default, next/font for zero-CLS text, Server Actions in place of client fetch waterfalls, route-level code splitting, error boundaries at each segment, and native SEO through sitemap.ts and robots.ts.
A serverless monolith: Next.js Server Components and Server Actions handle rendering and mutation, while Capacitor wraps the same frontend for native distribution. One codebase, three delivery targets.
Firestore root collections organised by domain rather than by screen, which is what let the gamification engine be added later without migrating existing documents.
JWT-based Firebase Auth paired with Firestore Security Rules. Every read and write passes strict isOwner() / isAdmin() checks, enforcing per-document ownership isolation at the database rather than in application code.
A deliberately small REST surface for third-party callbacks, with everything internal moved to Server Actions so mutations never traverse a public endpoint.
04 · Features
A gamified habit-tracking ecosystem where athletes log tasks, routines, and matches. Sub-collections for habitTracker and matchLogs feed an XP engine that turns daily consistency into visible progression.
A structured psychological progression module backed by userChallenges. Daily video content and interactive journalling are gated by enrolment status enforced in Firestore rules, so progress cannot be skipped client-side.
Semantic and episodic memory stores let the assistant retain the substance of past coaching sessions, so advice compounds on prior context instead of restarting cold each conversation.
05 · Standout engineering
Every project has two problems that determined whether it worked. These were theirs.
A single Next.js codebase compiles to a web app, an installable PWA, and native iOS and Android binaries · sharing one Firebase auth session across all three. No separate mobile team, no divergent feature sets, no second backend.
Over 280 lines of granular Firestore Security Rules, including specialised helpers such as incomingDataBelongsToUser() that make cross-user modification structurally impossible, plus automated field-level mutation tracking.
06 · Engineering practice
├── android/ # Capacitor native shell (Android) ├── ios/ # Capacitor native shell (iOS) ├── src/ │ ├── app/ │ │ ├── (auth)/ # Sign-in, sign-up, recovery │ │ ├── (dashboard)/ # Authenticated product │ │ ├── actions/ # Server Actions │ │ └── api/ # Payment, AI, marketing endpoints │ ├── components/ │ ├── context/ # AuthProvider, ModeProvider │ ├── lib/ │ └── types/ ├── firestore.rules # 280+ lines of access control └── next.config.ts
ESLint 9 across the workspace, Playwright for end-to-end journeys, and isolated Firestore test scripts (test_firestore.cjs) that exercise security rules directly rather than through the UI.
Vercel for web. Custom npm scripts (npm run build:mobile) hot-swap environment variables, run the native builds, and sync the result into Xcode and Android Studio in one command.
07 · Impact
Optimised through Next.js server rendering and edge caching. Production traffic metrics are pending public launch · no figures are published here that have not been measured.
The serverless architecture scales API capacity horizontally without provisioning, Firestore absorbs concurrent real-time sync, and the gamification engine is decoupled enough that new progression mechanics ship without touching legacy data models.
08 · Interface
Contact
The best fit is a business that needs a system to hold up under real use · not a template with your logo on it.
