Week-by-Week Build Guide — CA Compliance Tracker (Worked Example)

I want to scaffold a new Next.js 15 project for a personal CA compliance tracking app.

Project name: [your-app-name]
What it will do: track my CA clients and their GST/ITR/audit filing deadlines

Please:
1. Confirm I have Node.js and npm installed (run node -v and npm -v)
2. Create a new Next.js 15 project with TypeScript and Tailwind CSS
3. Delete the default placeholder content from the home page
4. Replace it with a simple "Coming soon — [Your App Name]" heading
5. Create a GitHub repository and make the first commit
6. Tell me exactly what to do to connect it to Vercel for auto-deployment

Keep it simple — no database, no auth, no components yet.

Build the client list feature for my CA Practice Manager.

What I need:
- A Clients page at the /clients route
- A button to open a modal/dialog with a form to add a new client
- Form fields: Legal Name (required), GSTIN (optional, exactly 15 chars if provided),
  Entity Type (select: Private Limited / LLP / Partnership / Proprietorship / Individual),
  State (select from all Indian states), Contact Email (optional, valid email format),
  Contact Phone (optional, 10 digits starting 6-9)
- Zod schema to validate the form
- The submitted client appears in a list below
- Each list item shows: legal name, GSTIN (or "Not registered" if blank), entity type, state
- No database yet — store clients in local React state only

Use shadcn/ui for the dialog and form components if available.
Keep the design clean and professional — this is a tool I will actually use.

I need to connect my CA Practice Manager to Supabase. I've already created the Supabase project.

My Supabase project ref is: [your-ref]
My project CLAUDE.md has the full context.

Please:
1. Apply the migration for the clients table (see Schema & Setup page for the columns)
2. Enable RLS and add the three policies (select, insert, update) for the CA user
3. Set up Supabase Auth with email+password sign-in
4. Create a login page at /login
5. Protect the /clients route — redirect to /login if not authenticated
6. Replace the local React state in the client list with a useClients React Query hook
   that fetches from Supabase
7. Make the add-client form mutation save to Supabase instead of local state

After building, I'll test by: adding a client, closing the browser, reopening, confirming it's still there.

Add the compliance tasks feature to my CA Practice Manager.

I need:
1. Apply the migration for the compliance_tasks table to Supabase
   (columns from the Schema & Setup page, including the RLS policies)
2. A client detail page at /clients/[id] that shows:
   - The client's name, GSTIN, entity type, state at the top
   - A list of their compliance tasks sorted by due_date ascending
   - An "Add Task" button that opens a form
3. The add task form fields:
   - Task type: select (GSTR-1 / GSTR-3B / ITR / Tax Audit / Statutory Audit / ROC Annual Return / Other)
   - Period: text input (e.g. "Apr 2026", "FY 2025-26")
   - Due date: date picker
   - Notes: optional textarea
4. A useComplianceTasks(clientId) React Query hook
5. Each task in the list shows: type, period, due date formatted as "12 Apr 2026", status badge

Status badge colours: pending = grey, in_progress = blue, filed = green, overdue = red

Build the dashboard home page for my CA Practice Manager.

The dashboard shows two sections:

Section 1: "Due This Week"
- Compliance tasks where due_date is between today and today + 7 days
- Status is not "filed"
- Show: client legal_name, task_type, period, due_date (formatted as "Tue, 12 Apr")
- Clicking a row navigates to /clients/[client_id]
- Empty state: a green checkmark + "All clear for this week — nothing due in the next 7 days"

Section 2: "Overdue"
- Compliance tasks where due_date < today
- Status is not "filed"
- Show same columns as above, plus the number of days overdue in red
- Empty state: don't show this section if there are no overdue items

Create a useDashboard React Query hook that fetches both in one query:
- Join compliance_tasks with clients on client_id
- Filter: user_id = current user, not is_deleted, status != 'filed'
- Return two arrays: dueThisWeek and overdue

The page should look professional — this is the page I open every morning.

Add status update functionality to my CA Practice Manager.

On the client detail page, each task needs an "Update" button that opens a small dialog with:
- Status select: pending / in_progress / filed
- Filed date (date picker, only shown when status = "filed", required if filing)
- Filing reference (text input, optional — for ARN/acknowledgement numbers)
- Notes (textarea, optional)

When saved:
- Update the task in Supabase
- Invalidate the useComplianceTasks(clientId) and useDashboard React Query caches
- Show a success toast: "Task updated"
- If status = "filed", move the task to a "Completed" section at the bottom of the client
  detail page (separate list below the active tasks)

On the dashboard, filed tasks should never appear — the query already filters status != 'filed'.

Create an updateComplianceTask mutation in the useComplianceTasks hook.

My CA Practice Manager is feature-complete. Help me polish it before the demo.

Please do the following:
1. Mobile pass — check all pages at 375px width. Fix any layout that breaks:
   - Long client names truncating correctly
   - Buttons large enough to tap
   - Table or list that doesn't overflow horizontally
2. Run the pre-launch audit skill on my codebase
3. Fix any Critical findings from the audit
4. Add a simple loading skeleton to the dashboard while data fetches
5. Make sure the empty states look polished — not just plain text

After this session I will add my real clients manually.

Help me prepare my CA Practice Manager for the live demo on Friday.

1. Do a final check — open the app and go through this flow:
   - Log in
   - Open the dashboard — confirm due-this-week and overdue sections work
   - Open a client — confirm tasks list loads
   - Add a new compliance task — confirm it appears
   - Update it to filed — confirm it leaves the dashboard
   - Confirm the filed task appears in the Completed section

2. Check the Vercel deployment — is it the latest code?

3. I need to demo two things:
   - Show the dashboard with real client data
   - Live-add a new task for a client and file it

Help me prepare a 3-minute demo script for what I will show and say on Friday.