How to vibe codeFreeletics

Prerequisites

• Node.jsfree

  Required to run Expo, TypeScript compiler, and local development tooling.

• Expo Account & EASfree

  Required for building and testing the React Native application on physical iOS and Android devices.

• GitHubfree

  Repository hosting for version control and CI/CD triggers.

AI coding tools

• Claude Code

  Best-in-class terminal agent for scaffolding complex multi-file React Native schemas, local SQLite persistence layers, and workout state machines.

• Cursor

  Essential for iterative UI component styling, gesture handling, and tuning the interactive interval timer screens.

Build guide

1. 01Initialize Expo React Native Project with Local SQLite

   Scaffold a new React Native application using Expo Router and TypeScript. Configure expo-sqlite to establish a local-first relational database storing user profiles, exercise dictionaries, workout templates, and completion logs.

   Create a new Expo TypeScript project using Expo Router named 'freeletics-clone'. Configure file-based navigation for tabs: Today, Coach, Exercises, Profile. Install expo-sqlite and set up a local database initialization script that creates tables for users, exercises (id, name, muscle_group, video_url, description), workout_plans, workout_blocks, and workout_logs. Write a migration script that pre-populates 20 common bodyweight exercises (pushups, squats, burpees, climbers) with placeholder video URLs and metadata. Ensure all database operations are wrapped in safe async helper functions with TypeScript interfaces.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Build the Exercise Library & Cached Video Player UI

   Develop the exercise catalog screen featuring search, category filters, and detail views containing video playback via Expo AV with local caching capabilities.

   Build an Exercise Library screen in React Native using Expo Router. Implement a searchable list with category chips (Core, Upper Body, Lower Body, Cardio). Tapping an item should open an Exercise Detail screen featuring an Expo AV video player loop, instructions list, and muscle group target tags. Implement local caching for video assets using expo-file-system so videos can be replayed offline without re-fetching. Ensure the UI follows a dark fitness aesthetic (deep charcoal background #121212, bright accent #E5FF00) with smooth touch feedback.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Implement the Workout Player & Interval Timer Engine

   Create an immersive workout execution interface with countdown timers, audio/vibration feedback for interval transitions, and set completion logging.

   Implement the active Workout Execution screen in React Native. The screen must support a multi-exercise circuit timer with countdowns, rest periods between sets, and audio/vibration cues using expo-av and expo-haptics. Include controls to pause, skip, or mark sets complete. Upon finishing the workout, calculate total duration, calories burned estimate, and record the session timestamp and completed rep counts into the local SQLite workout_logs table. Add a summary celebration screen showing completed metrics.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Develop the Adaptive AI Coach Logic & Plan Generator

   Write a deterministic scheduling and adaptation engine that evaluates user feedback (soreness rating, available time, equipment) to generate weekly workout progressions.

   Build a TypeScript coaching engine module that generates weekly workout plans based on user parameters (fitness goal: strength/weight loss, available equipment: bodyweight/gym, weekly training days). Implement a feedback ingestion function that accepts daily post-workout inputs (e.g. soreness_level: 1-5, perceived_exertion: 1-5). If soreness in specific muscle groups is high, the engine must dynamically substitute conflicting exercises in upcoming workouts with alternate movements from the database while maintaining progressive overload principles. Display the generated weekly schedule on the Coach tab.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Build Progress Tracking & Statistics Dashboard

   Create analytical views and charts tracking workout streaks, completion history, and strength progression over time.

   Develop a Progress Dashboard screen in React Native querying local SQLite logs. Display a weekly activity heatmap or streak counter, total workouts completed, total training time, and a breakdown of muscle groups trained. Include a history log list showing past workout sessions with expandable details. Ensure the layout is responsive and performs efficiently with hundreds of logged records.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Configure Cloudflare R2 Asset Storage & Optional Cloud Sync

   Set up remote backup sync so local workout logs can optionally be backed up to a Cloudflare D1/Workers backend.

   Create a lightweight Cloudflare Worker API using TypeScript and D1 database to receive encrypted backups of local user workout logs. In the React Native app, add a settings screen toggle for 'Cloud Backup' that batches local unsynced logs and pushes them via fetch when an internet connection is detected. Handle network failure gracefully with retry queues and local sync state flags.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Freeletics