Dashboard Overview

The CodePlanet dashboard is your command center for coding practice. It provides a unified view of your progress, recommended problems, and learning insights.

Dashboard Layout

┌─────────────────────────────────────────────────────────────────────────┐
│  ┌──────────┐                                                           │
│  │  Sidebar │   ┌─────────────────────────────────────────────────────┐ │
│  │          │   │                    Main Content                      │ │
│  │  • Home  │   │  ┌───────────────────┐  ┌───────────────────────┐   │ │
│  │  • Probs │   │  │   Stats Card      │  │   Weak Topics         │   │ │
│  │  • Paths │   │  │   - Solved: 145   │  │   - DP (78%)          │   │ │
│  │  • Daily │   │  │   - Streak: 12    │  │   - Trees (65%)       │   │ │
│  │  • Certs │   │  └───────────────────┘  └───────────────────────┘   │ │
│  │          │   │                                                      │ │
│  │  ─────── │   │  ┌─────────────────────────────────────────────────┐ │ │
│  │          │   │  │              Recommended Problems                │ │ │
│  │  • Sett  │   │  │  📝 Two Sum (Easy)  📝 LRU Cache (Medium)       │ │ │
│  │  • Help  │   │  └─────────────────────────────────────────────────┘ │ │
│  └──────────┘   └─────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────────────┘

The sidebar can be collapsed or expanded:

State	Width	Shows
Expanded	240px	Icons + Labels
Collapsed	64px	Icons only

Toggle Methods

Click the collapse button
Press Ctrl+B (Windows/Linux) or Cmd+B (Mac)
On mobile: Swipe from left edge

Section	Description
Home	Dashboard overview
Problems	Browse all problems
Learning Paths	Structured courses
Daily Challenge	Today's problem
Certificates	Your earned certs
Settings	Account preferences
Help	Documentation & support

Dashboard Widgets

Stats Card

Shows your overall progress:

Total problems solved
Current streak
XP and level
Acceptance rate

Displays topics needing attention:

Topic name and weakness score
Success rate percentage
Quick link to practice problems
Collapsible for focused view

Activity Calendar

GitHub-style contribution graph showing:

Daily practice activity
Streak visualization
Monthly patterns

Keyboard Shortcuts

The dashboard is fully keyboard-navigable:

Shortcut	Action
`Ctrl+B`	Toggle sidebar
`Ctrl+K`	Open command palette
`Ctrl+/`	Open search
`G H`	Go to Home
`G P`	Go to Problems
`G D`	Go to Daily Challenge
`?`	Show all shortcuts

Accessibility Features

All interactive elements have ARIA labels
Sidebar state announced on toggle
Focus management on navigation

Focus Indicators

Visible focus rings on all elements
Skip-to-content link
Logical tab order

Motion Preferences

Animations respect prefers-reduced-motion:

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Responsive Design

Breakpoint	Sidebar Behavior
< 768px	Hidden by default, drawer on swipe
768px - 1024px	Collapsed by default
> 1024px	Expanded by default

Theme

CodePlanet uses a dark theme by default:

Background: #0a0a0a
Surface: #171717
Primary: #ffffff
Accent: #3b82f6

Performance

The dashboard is optimized for performance:

Server Components for initial render
Skeleton loading states
Optimistic UI updates
Lazy-loaded widgets

Customization

Reorder Widgets

Drag and drop widgets to customize your layout (planned for a future release).

Hide Widgets

Click the ⋮ menu on any widget to hide it from your dashboard.

Default View

Set which tab opens when you log in from Settings.

Next Steps

Navigation — Detailed navigation guide
Widgets — Deep dive into each widget
Accessibility — Full accessibility guide
Keyboard Shortcuts — All shortcuts