A modern, responsive analytics dashboard built with React, TypeScript, Tailwind CSS, and Recharts.
This project focuses on building a clean, real-world SaaS dashboard interface with data visualization, structured layouts, and mobile responsiveness.
SalesBoard is a dashboard interface designed for business owners to track performance metrics such as revenue, orders, and customer activity.
The goal of this project was to simulate a real SaaS product UI and demonstrate the ability to:
- design structured application layouts
- display data clearly using charts and tables
- build responsive interfaces across devices
- Fully responsive dashboard layout
- Mobile sidebar (slide-in navigation)
- Sticky topbar for improved navigation
- Stats cards for key metrics
- Revenue chart powered by Recharts
- Recent activity panel
- Orders table with status badges
- Clean UI with consistent spacing and hierarchy
- Component-based architecture
- React (Vite)
- TypeScript
- Tailwind CSS
- Recharts (data visualization)
- Vercel (deployment)
src/
components/
activityPanel.tsx
ordersTable.tsx
revenueChart.tsx
sidebar.tsx
stats.tsx
topbar.tsx
App.tsx
main.tsx
index.css
To run this project locally:
# clone the repo
git clone https://github.com/tobyemerald/Sales-Dashboard.git
# go into the project folder
cd sales-dashboard
# install dependencies
npm install
# start development server
npm run devThe dashboard uses Recharts to render a responsive revenue chart.
Key features:
- dynamic bar chart
- responsive container
- clean axis styling
- tooltip support
- Building responsive application layouts with sidebar navigation
- Managing UI state (mobile sidebar toggle)
- Structuring reusable React components
- Implementing data visualization using Recharts
- Designing tables with structured data and status indicators
- Improving UI polish with spacing, hierarchy, and interaction states
- Add filtering and search functionality to orders table
- Implement dark mode toggle
- Add date range filters for analytics
- Improve accessibility (keyboard navigation, ARIA roles)
- Integrate backend/API for real data
- Add authentication flow
If you'd like to collaborate or have feedback:
- GitHub: https://github.com/tobyemerald
- Email: tobi.atunde@gmail.com
Give it a star on GitHub — it helps a lot!