ابنِ أول تطبيق كامل مع Claude Code: مؤقت تمارين بتسجيل دخول وقاعدة بيانات ورابط حقيقيBuild Your First Full App with Claude Code: A Gym Timer with Sign In, a Database and a Live Link

Key terms

Plan mode

A Claude Code mode where Claude reads and proposes a plan without editing files or running commands. Toggle it with Shift+Tab or open it with /plan.

Supabase

A service that gives your app a Postgres database and ready made sign in, with a free plan to start.

RLS (Row Level Security)

Rules inside the database that decide who can read and write each row. Without them, an exposed table can be read and written by anyone holding the public key.

Publishable key and secret key

The publishable key is safe in the browser when RLS is on. The secret key (service_role on older projects) bypasses RLS, so it stays on the server only.

Vercel

A platform that deploys your site from GitHub, gives you a live link and redeploys on every push.

The steps

1. 1

   Step 1

   Let Claude plan before it writes a line

   Open an empty folder called gym-timer and start Claude Code in it. Press Shift+Tab until plan mode shows, or type /plan.

   Give it the full idea and ask it to question you first. The plan is what saves you hours later, because you fix the idea before you fix the code.

   

   PromptPlanning prompt

   Copy

   I want to build a web app called Gym Timer:
   • an interval timer (work and rest) with rounds
   • email sign in
   • saved workouts per user
   Stack: Next.js and Supabase, deployed on Vercel.
   Before you write any code, ask me [3] questions, then write a phased plan with the files you will create.

   Tip: Approve the plan only when you understand every phase. Ask about anything unclear.

2. 2

   Step 2

   Build the timer and try it on your phone

   Leave plan mode (Shift+Tab again) and let it build phase one only: the timer and the interface, no sign in and no database.

   Run the project and open it on your phone on the same network. Fix the look now. It is easier before the data goes in.

   PromptInterface prompt

   Copy

   Build phase one of the plan only: a timer page with work time [45] seconds, rest time [15] seconds and [8] rounds. A progress ring, play, pause and reset buttons, and a short sound on every switch. Make it work well on a phone. Then tell me the command to run the project.

3. 3

   Step 3

   Add sign in with Supabase Auth

   Create a new Supabase project and copy the project URL and the publishable key from the API settings.

   Put them in .env.local and ask Claude to add email sign in. The secret key never goes in this file.

   supabase.com

   

   PromptSign in prompt

   Copy

   Add email sign in with Supabase Auth. The project URL and publishable key are in .env.local as [NEXT_PUBLIC_SUPABASE_URL] and [NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY]. The timer page stays open to everyone, the My workouts page is for signed in users only. Never use a secret key in browser code.

4. 4

   Step 4

   Create the workouts table and turn on RLS first

   This is the step most people skip. The Supabase docs say a table in an exposed schema without RLS is readable and writable by any role with a grant on it.

   Open the SQL Editor in Supabase and run the code below, or ask Claude for a migration that does the same. Each user sees and edits only their own rows.

   supabase.com

   

   PromptTable and policy SQL

   Copy

   create table workouts (
     id uuid primary key default gen_random_uuid(),
     user_id uuid not null default auth.uid() references auth.users(id),
     work_seconds int not null,
     rest_seconds int not null,
     rounds int not null,
     created_at timestamptz default now()
   );
   
   alter table workouts enable row level security;
   
   create policy "own rows" on workouts
     for all to authenticated
     using ((select auth.uid()) = user_id)
     with check ((select auth.uid()) = user_id);

   Tip: Copy the SQL exactly as it is.

5. 5

   Step 5

   Save workouts and prove the policy works

   Have Claude wire the save button to the table, then test with two different accounts. If the second account sees the first one's workouts, the policy is wrong. Go back one step.

   PromptSave and test prompt

   Copy

   Wire the save workout button to the workouts table in Supabase and add a My workouts page that shows the signed in user's workouts only. Then write me test steps with two accounts so I can confirm each one only sees their own.

6. 6

   Step 6

   Push to GitHub and deploy on Vercel

   Have Claude commit and push the project to a new GitHub repository. Then in Vercel choose Import and pick the repository.

   Before deploying, add two Environment Variables only: the project URL and the publishable key. After that, every push ships a new version on its own.

   vercel.com

   

   PromptDeploy prompt

   Copy

   Get the project ready for Vercel: make sure .env.local is in .gitignore and the build passes, then push the project to a new GitHub repository called [gym-timer]. Then list the environment variable names I need to add in Vercel.

   Tip: If you ever see secret or service_role in a browser variable, delete it and rotate the key in Supabase.

7. 7

   Step 7

   When something breaks, paste the whole error

   Do not describe the error in your own words. Copy the full message from the terminal or the Vercel build log and paste it to Claude with what you were doing. Most first deploy problems are a missing or misnamed environment variable.

Ready prompts to copy

Review the whole project before I share the link: is there any secret key in browser code or in GitHub? Does every table have RLS? Is there any page that shows one user's data to another? Give me a list of problems with the fix for each.

The app now has a timer, sign in and saving. Suggest [3] small features that make it better to use at the gym, ordered from easiest to hardest.