Miz React Dashboard

Polished React-style dashboard showcase for KPI storytelling, chart composition, responsive layout, and product-minded frontend craft.

What this repo proves

Good dashboard UI is not a pile of widgets. It is hierarchy, rhythm, readability, and business context working together on one screen.

Features

• Dark / light mode with Chart.js re-render on theme switch
• KPI cards for revenue, users, conversion rate, and average session depth
• Line chart for 12-month revenue trend with gradient fill
• Donut chart for traffic-source mix with custom legend
• Transactions table with status pills and tabular numeric layout
• Sidebar navigation with active state, badge indicator, and profile footer
• Responsive layout with fluid grid, mobile menu, and stacked chart behavior

---

🛠 Tech Stack

Technology	Usage
HTML5 + CSS3	Structure & design system (CSS custom properties, Grid, Flexbox)
JavaScript (ES6+)	DOM rendering, state, theme toggle, chart lifecycle
Chart.js 4.x (CDN)	Line chart + donut chart with theme-aware colors
Inter (Google Fonts)	Typography
CSS Custom Properties	Full light/dark theme system

---

🚀 Getting Started

# Clone
git clone https://github.com/mizcausevic-dev/miz-react-dashboard.git
cd miz-react-dashboard

# Open — no build step needed
open dashboard-ui.html

---

💡 React Concepts Demonstrated

• Component-based thinking — KPI cards, nav items, table rows as reusable render functions
• State management — theme state toggled globally, chart instances managed with destroy/rebuild lifecycle
• Conditional rendering — trend arrows, pill colors, icon variants
• Props pattern — data arrays drive UI rendering (no hardcoded HTML)
• Side effects — chart rebuild triggered by theme state change (mirrors useEffect)

---

�� Deploy to Vercel

1. Go to vercel.com/new
2. Import mizcausevic-dev/miz-react-dashboard
3. Framework: Other
4. Root directory: /
5. Hit Deploy — live in ~60 seconds

---

� Project Structure

miz-react-dashboard/
├── dashboard-ui.html    # Full dashboard — single file, zero dependencies
└── README.md

---

👤 Author

Mirza Causevic — Director of Tech, Web Engineering & DevOps

---