Admin Dashboard UI

---

Tech Stack

• Framework: Next.js
• Language: JavaScript
• Styling: Tailwind CSS
• Design Source: Figma (provided .fig file)

---

Scope of Work

Mandatory Components

• Header (Top Navigation)
• Footer

Additional Components Implemented (Required 3)

• Sidebar
• Dashboard (Main Content Area)
• Activity Timeline

---

Implementation Steps

1. Imported the provided .fig file into my Personal Figma Account.
2. Reviewed the design manually to understand layout, spacing, colors, and typography.
3. Selected what components to build based on the repeating and similar elements.
4. Set up a Next.js project with Tailwind CSS.
5. Created reusable components for repeating UI elements like cards and stat blocks.
6. Implemented the Header and Footer first.
7. Built the Sidebar and main Dashboard layout.
8. Implemented the Activity Timeline component.
9. Compared the UI against Figma and adjusted spacing and alignment.
10. Added setup instructions in the README.
11. Deployed the project to Vercel.

Clone / Setup

git clone https://github.com/swamimalode07/DashboardFrontend.git
cd DashboardFrontend
npm install
npm run dev