Loading content…
Loading content…
Build a responsive, telemetry-driven administrator console. You will integrate complex data grids, charting APIs, sliding sidebar controls, and client router security guards.
This lab guides you through constructing a high-fidelity SaaS administration panel. It focuses on rendering complex, real-time charts and data grids that stay synchronized with browser URLs.
Ideal for Intermediate frontend or junior full-stack developers eager to master charting libraries, dynamic search grids, deep route protection parameters, and responsive application layouts.
Business Objective
Operations teams require a unified console to monitor subscription health, analyze financial telemetry, and edit user configurations. The UI must render charts efficiently under heavy loads, support keyboard navigation, persist table states, and enforce roles (Admin, Editor, Viewer).
Core Features List
Next.js App Router (React 19)
TailwindCSS v4 & Lucide Icons
Recharts SVG Components
admin-dashboard/ ├── app/ │ ├── (auth)/ │ │ └── login/page.tsx # Secure login view │ ├── dashboard/ │ │ ├── users/page.tsx # User directory & drawers │ │ ├── page.tsx # Analytics telemetry │ │ └── layout.tsx # Sidebar layout shells │ ├── layout.tsx │ └── page.tsx ├── components/ │ ├── ui/ │ │ ├── button.tsx # Reusable Button │ │ ├── table.tsx # Reusable Table grid │ │ └── input.tsx # Reusable Input box │ └── charts/ │ └── area-chart.tsx # Recharts integration ├── lib/ │ ├── auth.ts # Session state provider │ └── api.ts # Fetch query client └── tsconfig.json
`Sidebar` Component
A collapsible sidebar containing dynamic links that filters views according to user roles (Admin, Editor, Viewer).
`UserTable` Component
Renders user rows and column headers. Emits sorting and paging triggers upward to server route queries.
`EditDrawer` Component
Uses React Portals to render floating action menus over the main dashboard. Manages edit states independently.
Request:
GET /api/users?page=1&limit=10&search=john&sortBy=name&sortOrder=asc
Response (200 OK):
{
"users": [
{
"id": "usr_90210",
"name": "John Doe",
"email": "john@example.com",
"role": "admin",
"status": "active"
}
],
"total": 125,
"pages": 13
}Request:
PUT /api/users/usr_90210
Body: { "name": "John Updated", "role": "editor" }
Response (200 OK):
{
"success": true,
"user": {
"id": "usr_90210",
"name": "John Updated",
"email": "john@example.com",
"role": "editor"
}
}CREATE TABLE users (
id VARCHAR(50) PRIMARY KEY,
name VARCHAR(100) NOT NULL,
email VARCHAR(150) UNIQUE NOT NULL,
role VARCHAR(20) CHECK (role IN ('admin', 'editor', 'viewer')) DEFAULT 'viewer',
status VARCHAR(20) CHECK (status IN ('active', 'suspended')) DEFAULT 'active',
created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);
CREATE TABLE system_logs (
id SERIAL PRIMARY KEY,
user_id VARCHAR(50) REFERENCES users(id),
action VARCHAR(100) NOT NULL,
ip_address VARCHAR(45),
timestamp TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);
CREATE INDEX idx_users_email ON users(email);
CREATE INDEX idx_logs_timestamp ON system_logs(timestamp);Construct reusable primitive UI kits (Buttons, inputs). Set up Next.js layouts with fixed sidebars and fluid content viewports.
Integrate area graphs using Recharts. Build lazy-loading hooks to optimize bundle size and prevent layout shifts.
Implement user management grids. Sync input elements and pages parameters directly to Next.js URL SearchParams.
Build sidebars that mount via React Portals. Validate fields on the client before triggering backend state mutations.
Enforce route validation. Create client-side session contexts that redirect unauthenticated traffic back to login portals.
💡 Use the URL as State: Never duplicate filter search parameters inside local state hooks. Relying on Next.js query parameter search filters is best: it makes it shareable and keeps browser back buttons functional out of the box.
💡 Bundle Minimization: Recharts and other layout graphs are heavily sized. Always load them using dynamic imports (`next/dynamic`) with { ssr: false } to keep initial load bundles small.
Click on any question to view the recommended architectural response for technical interviews.