← Back to Projects

Coach AI

Personal Fitness Tracking PWA

Next.jsReactSupabasePostgreSQLTailwind CSSPWAWeb Audio API
Timeline
2 months from start to Vercel deployment
Status
✓ Complete
Impact
Personal fitness tracking with enterprise-grade sync and performance

Challenge

Needed a personal fitness app that works offline, syncs across devices, and supports multiple languages.

Solution

Built a Progressive Web App with Next.js and Supabase, with full Spanish/English i18n and offline-first architecture.

Results

  • Installable on iOS/Android like native app
  • Works completely offline
  • Cloud sync across all devices
  • Sub-second performance
  • Full bilingual support
Coach AI is a personal fitness tracking application built as a Progressive Web App. It demonstrates modern web app best practices: offline functionality, cloud sync, multiple themes, and bilingual support. WHY PWA Traditional apps require app store approval. A PWA can be installed straight from the browser, works on any device, updates automatically, weighs a fraction of a native app's size, and skips app store gatekeeping entirely. ARCHITECTURE The frontend uses Next.js 14 with the App Router, Tailwind CSS for styling, the PWA API with a Service Worker for offline support, and full Spanish/English internationalization. The backend runs on Supabase for PostgreSQL and real-time sync, with row level security for per-user data isolation and PostgreSQL functions for complex server-side queries. Deployment runs on Vercel with Cloudflare for CDN and DNS. KEY FEATURES Offline-first: all data is cached locally through the Service Worker, the app works completely without internet, and it syncs automatically when connectivity returns, with conflict resolution for overlapping edits. Cloud sync: real-time sync through Supabase, optimistic updates for instant feedback, background sync for reliability, and full multi-device support. Workouts: interval timers built on the Web Audio API, multiple workout templates, a custom exercise library, and progress tracking. Multi-language: full Spanish/English internationalization, automatic language detection, a persistent language preference, and fully translated UI. Themes: dark mode by default, a light mode option, a high-contrast option, and a persistent preference. PERFORMANCE METRICS First Contentful Paint around 0.8s, Time to Interactive around 1.2s, Largest Contentful Paint around 1.5s, a Cumulative Layout Shift of 0.05, and a Lighthouse score of 98/100. USER EXPERIENCE Installation takes one tap from the browser's install prompt, after which the app appears on the home screen and opens full screen like a native app. Offline, all previous workouts remain available and new ones can be started, with everything queued for sync. Cloud sync means switching devices mid-workout continues seamlessly, and edits on one device appear instantly on another. LESSONS LEARNED Service Workers are complex, so offline scenarios need thorough testing. Sync is hard, so it's best to lean on Supabase's built-in sync rather than reinventing it. PWA support on iOS is still improving but is worth building for. Most bugs surface offline, so that's where testing time should go. User education matters since many people don't yet know PWAs exist. COST ANALYSIS Vercel free tier, Supabase free tier, and a $12/year domain — about $1/month total, thanks to generous free tiers on both platforms. FUTURE ENHANCEMENTS Social features like shared workouts and leaderboards, advanced analytics, integration with Apple Health and Google Fit, a personal trainer mode, nutrition tracking, and a video exercise library.

Interested in similar work for your organization?

Let's Discuss Your Project