Final Project: DevDash - Developer Dashboard UI

Requirement

Build a static, modern dashboard interface that displays user statistics, recent activity, and system alerts using reusable components and dynamic props. Assume the role of a Junior Frontend Engineer building the layout and UI components for a new internal admin dashboard from mock JSON data.

Assignments (Start First)

1. Layout Setup: Create the main application shell. Build a Sidebar component for navigation and a Header component for the user's profile summary.
2. Data Mapping: Take an array of mock "Stat" objects (e.g., total users, server uptime, daily revenue) and map over them to render a grid of StatCard components.
3. The Activity Feed: Build a RecentActivity list. Create a ListItem component that takes props for the action performed, the timestamp, and the user's avatar.
4. Conditional Alerts: Build a SystemAlerts section. Render an array of alert messages using an AlertBadge component. Use conditional rendering to only show the SystemAlerts section if there is at least one alert in the mock data array.

Lessons (Optional)

The Summary and Quizzes

1. Final Review: You have successfully combined Functional Components, Props passing, Array .map() for rendering lists, and Conditional Rendering to build a complete dashboard UI. This workflow perfectly mirrors what frontend engineers do daily.