Tutorial: Build Your First Feature
Learn how to build a complete feature using Bootspring's agents, skills, and workflows.
What You'll Build#
A user profile page with:
- Profile display with avatar
- Edit functionality
- Form validation
- Database persistence
Prerequisites#
- Bootspring initialized in your project
- Next.js with TypeScript
- Prisma configured with a database
Time Required#
Approximately 30 minutes.
Step 1: Start the Feature Development Workflow#
Let's use Bootspring's workflow to structure our development.
When prompted:
- Feature name: User Profile Page
- Requirements: Display user info, edit profile, avatar upload
The workflow will guide us through: Plan → Design → Build → Test → Review
Step 2: Planning Phase#
The workflow starts with the architecture-expert agent.
Ask:
Plan the user profile feature with display and edit capabilities.
Consider the existing user model and JWT session authentication.
The agent will provide:
- Component structure
- Data requirements
- API endpoints needed
- Suggested approach
Example output:
Checkpoint: Review the plan and confirm it matches your needs.
Step 3: Design Phase#
The workflow moves to the design phase with database-expert and api-expert.
Database Schema#
Ask the database-expert:
Design the profile fields for the User model.
Include: bio, website, location, avatar URL, social links.
Update your Prisma schema:
Run the migration:
API Design#
Ask the api-expert:
Design the profile API endpoints with proper validation.
Output:
Checkpoint: Schema and API design complete.
Step 4: Build Phase#
The workflow enters the build phase with backend-expert and frontend-expert.
Apply the API Skill#
Create the API Route#
Ask the backend-expert:
Create the profile API route with Prisma and JWT session auth.
Create the file:
Create the Profile Page#
Ask the frontend-expert:
Create a profile page with display and edit modes.
Use React Hook Form with Zod validation.
Create the page:
Create the form component:
Checkpoint: Profile page and API working.
Step 5: Test Phase#
The workflow moves to testing with testing-expert.
Ask the testing-expert:
Write tests for the profile API and form component.
Create API tests:
Run tests:
Checkpoint: Tests passing.
Step 6: Review Phase#
The workflow enters review with security-expert and code-review-expert.
Ask the security-expert:
Review the profile implementation for security issues.
The agent will check:
- Authentication enforcement
- Input validation
- Data exposure
- CSRF protection
Ask the code-review-expert:
Review the code quality and suggest improvements.
Make any recommended improvements.
Checkpoint: Security and code quality verified.
Step 7: Complete the Workflow#
If all phases are complete:
Workflow complete: feature-development
All phases passed:
✓ Plan
✓ Design
✓ Build
✓ Test
✓ Review
Artifacts saved to: .bootspring/workflows/wf_xxx/
What You Learned#
- Using the feature-development workflow
- Coordinating multiple agents
- Building with skills
- Test-driven development
- Security review process
Next Steps#
Complete Code#
The complete code for this tutorial is included in the Bootspring starter templates. Run bootspring create --template=first-feature to get started.