Tutorial: User Dashboard

Build a comprehensive user dashboard with analytics, settings, and activity tracking.

What You'll Build#

• Dashboard overview with metrics
• Usage analytics charts
• Account settings page
• Activity feed
• Responsive sidebar navigation

Prerequisites#

• Next.js project with authentication (see Authentication Tutorial)
• Prisma with PostgreSQL
• Bootspring initialized

Time Required#

Approximately 40 minutes.

Step 1: Plan with Architecture Expert#

Start by consulting the architecture-expert:

The agent will provide:

• Component architecture
• Data requirements
• API endpoints
• State management approach

Step 2: Design the Database Schema#

Ask the database-expert:

Update your Prisma schema:

Run the migration:

Step 3: Create Dashboard Layout#

Ask the frontend-expert:

Dashboard Layout#

Sidebar Component#

Dashboard Header#

Step 4: Create Dashboard Overview#

Dashboard API#

Dashboard Page#

Stats Cards Component#

Step 5: Create Usage Analytics Chart#

Install recharts:

Step 6: Create Activity Feed#

Step 7: Create Settings Page#

Step 8: Test the Dashboard#

1. Start the development server:

   Loading code block...

2. Sign in and navigate to /dashboard

3. Verify:

   • Sidebar navigation works
   • Stats cards display data
   • Usage chart renders
   • Activity feed shows entries
   • Settings page loads

Verification Checklist#

• Layout is responsive
• Protected routes work
• Data fetching is efficient
• Charts render correctly
• Navigation is intuitive

Security Review#

What You Learned#

• Dashboard layout architecture
• Server components for data fetching
• Client components for interactivity
• Usage tracking implementation
• Settings management

Next Steps#

• Add real-time updates
• Implement team features
• Add export functionality