Build Your First Feature

This guide walks you through building your first feature with KitRocket and Claude Code. You'll add a user profile page where users can update their name, avatar, and bio.

Prerequisites

• KitRocket running locally (Installation)
• Claude Code installed (npm install -g @anthropic-ai/claude-code)
• A valid ANTHROPIC_API_KEY in your shell environment

Step 1: Start Claude Code

Open your terminal in the project directory:

cd my-saas
claude

Claude reads your CLAUDE.md automatically. It now knows your tech stack, file structure, and conventions.

Step 2: Use the implement recipe

Tell Claude to follow the implement recipe and describe your feature:

Read prompts/implement.md and follow it.

I want to add a user profile page at /dashboard/profile where users can:
- See their current profile info (name, email, avatar)
- Update their name and bio
- Upload a new avatar image
- The page should be protected (redirect to login if not authenticated)

Step 3: Watch Claude work

Claude will break the task into steps and execute them:

1. Database schema — adds a bio column to the users table and creates an avatars table or uses a URL field
2. API route — creates src/app/api/user/profile/route.ts with GET and PATCH handlers
3. Profile page — creates src/app/(dashboard)/profile/page.tsx with server-side data fetching
4. Profile form — creates src/components/dashboard/profile-form.tsx with client-side form handling
5. Navigation — adds a "Profile" link to the dashboard sidebar

You'll see each file being created or modified in real time.

Step 4: Review the generated code

After Claude finishes, review what was created:

# In the Claude session
Read prompts/review.md. Review the profile feature I just added.

Claude will check for:

• Security issues (auth checks, input validation)
• Code quality (naming, structure, error handling)
• Consistency with existing patterns
• Missing edge cases

Step 5: Test it

Run the dev server if it's not already running:

pnpm dev

1. Open http://localhost:3000/dashboard/profile
2. You should see your current profile info
3. Try updating your name — it should save and show a success message
4. Try uploading an avatar — it should display the new image
5. Try accessing /dashboard/profile while logged out — you should be redirected to /login

Step 6: Run database migration

If the schema changed, push it to your database:

pnpm db:push

Step 7: Commit

git add .
git commit -m "feat: add user profile page with avatar upload"

What you just learned

• CLAUDE.md gives context — Claude knew your project structure without you explaining it
• Prompt Recipes structure the work — the implement recipe broke the task into proper steps
• Review catches issues — the review recipe found potential problems before they reached production
• AI writes, you review — the most effective workflow is letting AI generate, then carefully reviewing

Common issues

Claude created files in the wrong location

Update your CLAUDE.md with the correct directory structure. The more accurate it is, the better Claude places files.

The generated code doesn't match your style

Add style preferences to CLAUDE.md under a "Conventions" section. For example: "Always use async/await over .then() chains."

Claude asks too many questions

Use the implement recipe — it provides enough structure that Claude can work independently. If Claude still asks, be more specific in your initial request.

Next steps

• Customize Landing — make the landing page yours
• Add OAuth Provider — add more login options
• Recipe List — explore all 12 recipes