Building a Full Feature from Scratch
In this lesson, we put everything together. Instead of learning individual techniques, you will walk through a complete feature build from start to finish using Claude Code. This mirrors how a professional developer uses Claude Code in their daily work: starting with a requirement, planning the approach, building incrementally, testing thoroughly, and delivering a polished result.
What You Will Learn
- How to plan a feature build with Claude Code before writing code
- A step-by-step walkthrough of building a notification system
- How to handle database, API, and frontend changes together
- Testing strategies during feature development
- Code review and polish before merging
- A reusable template for any feature build
The Feature: User Notification System
We will walk through building a notification system for a web application. This is a realistic feature that touches every layer of the stack: database, API, business logic, and frontend.
The requirements:
- Users can receive notifications (new message, order update, system alert)
- Notifications appear in a dropdown in the header
- Unread notifications show a badge count
- Users can mark notifications as read or dismiss them
- Notifications are stored in the database with timestamps
Step 1: Planning
Before writing any code, ask Claude Code to help you plan:
I need to build a user notification system. Here are the requirements:
- Users receive notifications for messages, order updates, and system alerts
- Notifications appear in a header dropdown with an unread badge count
- Users can mark as read or dismiss notifications
- Stored in the database with timestamps
Before writing any code, give me a plan:
1. What database tables/columns do we need?
2. What API endpoints should we create?
3. What frontend components are needed?
4. What is the best order to build these in?
Claude Code analyzes your existing codebase and produces a plan that fits your project's architecture. It considers your existing database setup, API patterns, and frontend component structure.
Why Planning Matters
The planning step is critical because:
- It reveals edge cases you might not have considered
- It ensures the approach fits your existing architecture
- It gives you a chance to adjust before any code is written
- It sets expectations for how many files will be touched
Review the plan, ask questions, and adjust before proceeding.
Step 2: Database Layer
Start from the bottom of the stack:
Let us start building. Create the database migration for
the notifications table based on the plan. Include:
- id, user_id, type, title, message, read status, timestamps
- An index on user_id for efficient queries
- An index on created_at for sorting
Claude Code creates the migration file following your project's migration conventions. It knows whether you use Prisma, Knex, raw SQL migrations, or another tool based on your existing project.
After the migration is created:
Run the migration and verify the table was created correctly.
Claude Code executes the migration command and checks the result.
Step 3: API Layer
Next, build the API endpoints:
Create the API endpoints for notifications:
- GET /api/notifications - List current user's notifications (paginated)
- GET /api/notifications/unread-count - Get unread count for badge
- PATCH /api/notifications/:id/read - Mark a notification as read
- DELETE /api/notifications/:id - Dismiss a notification
- POST /api/notifications/read-all - Mark all as read
Follow the same authentication and error handling patterns
as the existing API routes.
Claude Code creates the route handlers, applies authentication middleware, adds input validation, and follows your project's existing error handling patterns. It creates the files in the right directories with the right naming conventions.
Verifying the API
Write integration tests for the notification endpoints.
Test both authenticated and unauthenticated requests.
Cover the happy path and error cases for each endpoint.
Claude Code writes comprehensive tests, then:
Run the notification API tests.
This catches any issues in the API layer before moving to the frontend.
Step 4: Business Logic
Before building the frontend, create the service layer that handles notification creation:
Create a NotificationService with methods to:
- createNotification(userId, type, title, message) - Create and store a notification
- getUserNotifications(userId, page, limit) - Get paginated notifications
- getUnreadCount(userId) - Get the unread count
- markAsRead(notificationId) - Mark one as read
- markAllAsRead(userId) - Mark all as read
- dismissNotification(notificationId) - Soft delete a notification
Integrate this service into the API routes we just created.
Claude Code creates the service, then refactors the API routes to use it instead of having the logic directly in the route handlers.
Step 5: Frontend Components
Now build the UI:
Create the frontend notification components:
1. NotificationBell - Icon in the header that shows the unread count badge.
Clicking it opens the dropdown.
2. NotificationDropdown - A dropdown panel that lists recent notifications.
Each notification shows the title, message, time ago, and read status.
Include "Mark all as read" and "View all" links.
3. NotificationItem - A single notification entry with:
- Icon based on notification type
- Title and truncated message
- Time ago (e.g., "2 hours ago")
- Click to mark as read
- Dismiss button
Use the existing UI component library and styling patterns.
Fetch data from the API endpoints we created.
Claude Code creates all three components with proper typing, API integration, loading states, and error handling. It matches your existing component patterns and uses your design system.
Adding Real-Time Updates
Add polling to the NotificationBell so the badge count
updates every 30 seconds without a page refresh.
Clean up the interval when the component unmounts.
Step 6: Integration and Testing
Connect everything:
Add the NotificationBell component to the main application
header, next to the user avatar. It should only appear
when the user is logged in.
Then test the complete feature:
Write end-to-end tests for the notification system:
1. Creating a notification via the API
2. Verifying it appears in the dropdown
3. Marking it as read and verifying the badge updates
4. Dismissing it and verifying it disappears
Run all tests:
Run all tests (unit + integration) to make sure the
notification system works and nothing else broke.
Step 7: Polish and Code Review
Before merging, ask Claude Code to review the entire feature:
Review all the code we wrote for the notification system.
Check for:
- Security issues (especially in API authentication)
- Performance issues (N+1 queries, missing indexes)
- Edge cases we might have missed
- Accessibility in the frontend components
- Consistent error handling
- Missing input validation
Claude Code reviews all the files it created, identifies any issues, and fixes them.
Final cleanup:
Run the linter and type checker on all changed files.
Fix any issues that come up.
Step 8: Commit and PR
Create a clean commit for the notification system.
Then create a pull request with a detailed description
of all the changes, including the database migration,
API endpoints, service layer, and frontend components.
Claude Code creates the commit with a thorough message, pushes the branch, and opens a PR with a clear description.
The Reusable Template
You can use this same pattern for any feature:
- Plan: Describe the feature and ask Claude Code for an implementation plan
- Database: Create migrations and verify the schema
- API: Build endpoints with authentication and validation
- Service layer: Extract business logic into reusable services
- Frontend: Build components that connect to the API
- Integration: Wire everything together
- Testing: Write and run tests at every layer
- Polish: Code review, linting, type checking, accessibility
- Ship: Commit, push, create a PR
The key insight is that Claude Code handles the tedious parts (writing boilerplate, wiring up imports, creating consistent patterns) while you focus on the design decisions and review.
Tips for Feature Building
Start with the plan. Even experienced developers benefit from having Claude Code plan the approach first.
Build bottom-up. Start with the database and API before the frontend. This ensures you have real data to test with.
Test at every layer. Do not wait until the end to write tests. Test each layer as you build it.
Review continuously. Review Claude Code's output after each step, not just at the end.
Use conversation context. Because Claude Code remembers the conversation, each step naturally builds on the previous ones.
Key Takeaways
- A full feature build with Claude Code follows a predictable pattern: plan, database, API, service, frontend, integration, testing, polish, ship
- Always start with a planning step to reveal edge cases and ensure the approach fits your architecture
- Build bottom-up (database to frontend) so each layer has real dependencies to work with
- Test at every layer rather than waiting until the end
- Use Claude Code's code review capability to catch security, performance, and accessibility issues before merging
- The conversation context means each step naturally builds on the previous ones without re-explaining
- This template works for any feature, from simple CRUD operations to complex multi-layer systems