Note: This project is a prototype intended to showcase my skills. The original version is deployed for my client as part of my freelance work.
A modern, production-quality SaaS dashboard application built with React (TypeScript) and FastAPI. Features a sleek, minimalist design inspired by platforms like Linear, Vercel, and Stripe.
Step 1 of the onboarding flow - introducing users to Zenith Dashboard's key features
Step 2 of the onboarding flow - helping users customize their workspace
The main dashboard showing project statistics, recent projects, and key metrics
Built-in AI assistant for project management and productivity insights
- React 18+ with TypeScript - Modern React with full type safety
- Vite - Lightning-fast build tool and development server
- Tailwind CSS - Utility-first CSS framework for rapid UI development
- shadcn/ui - Beautiful, accessible component library
- Framer Motion - Smooth animations and micro-interactions
- Lucide React - Beautiful, customizable icons
- Dark Mode - Professional dark theme by default
- Responsive Design - Works perfectly on mobile, tablet, and desktop
- ESLint & Prettier - Code quality and consistent formatting
- FastAPI - Modern, fast web framework for building APIs
- Pydantic - Data validation and serialization
- CORS Support - Cross-origin resource sharing for frontend integration
- RESTful API - Clean, well-documented API endpoints
- Type Hints - Full Python type safety
zenith-dashboard/
├── frontend/ # React frontend application
│ ├── src/
│ │ ├── components/ # Reusable UI components
│ │ │ ├── ui/ # shadcn/ui components
│ │ │ └── layout/ # Layout components (Sidebar, Header)
│ │ ├── pages/ # Page components
│ │ ├── lib/ # Utility functions
│ │ └── assets/ # Static assets
│ ├── public/ # Public static files
│ ├── package.json # Frontend dependencies
│ ├── tailwind.config.js # Tailwind CSS configuration
│ ├── vite.config.ts # Vite configuration
│ └── tsconfig.json # TypeScript configuration
├── backend/ # FastAPI backend application
│ ├── main.py # FastAPI app and routes
│ ├── schemas.py # Pydantic models
│ ├── data.py # Mock data and business logic
│ └── requirements.txt # Python dependencies
└── README.md # This file
- Node.js (v18 or higher)
- Python (v3.8 or higher)
- npm or yarn package manager
-
Navigate to the frontend directory:
cd frontend -
Install dependencies:
npm install
-
Start the development server:
npm run dev
The frontend will be available at
http://localhost:5173
-
Navigate to the backend directory:
cd backend -
Create a virtual environment (recommended):
python -m venv venv # On Windows venv\\Scripts\\activate # On macOS/Linux source venv/bin/activate
-
Install dependencies:
pip install -r requirements.txt
-
Start the development server:
python main.py
The backend API will be available at
http://localhost:8000
Once the backend is running, you can access:
- Interactive API docs:
http://localhost:8000/docs - ReDoc documentation:
http://localhost:8000/redoc
- Background: Deep charcoal/slate (
hsl(222.2, 84%, 4.9%)) - Cards: Slightly lighter charcoal (
hsl(222.2, 84%, 4.9%)) - Primary: Electric blue (
hsl(217.2, 91.2%, 59.8%)) - Text: High contrast white (
hsl(210, 40%, 98%)) - Muted Text: Subtle gray (
hsl(215, 20.2%, 65.1%))
- Font Family: Inter (Google Fonts)
- Weights: 300, 400, 500, 600, 700
- Buttons: Multiple variants (default, outline, ghost, etc.)
- Cards: Clean, elevated design with subtle borders
- Inputs: Consistent styling with focus states
- Navigation: Collapsible sidebar with smooth animations
- Statistics Cards: Key metrics and KPIs
- Project Grid: Recent projects with status indicators
- Progress Tracking: Visual progress bars and completion status
- Quick Actions: Add new projects, filter, search
- Project Management: View all projects in a grid layout
- Search & Filter: Find projects quickly
- Status Management: Track project progress
- Team Information: See team size and collaboration details
- Profile Management: Personal information and preferences
- Notifications: Configure alert preferences
- Security: Account security settings
- Appearance: Theme and display options
- Integrations: Third-party service connections
GET /api/projects- Get all projectsGET /api/projects/{id}- Get specific projectPOST /api/projects- Create new projectPUT /api/projects/{id}- Update projectDELETE /api/projects/{id}- Delete projectGET /api/projects/status/{status}- Filter by status
GET /api/stats- Get dashboard statistics
GET /health- Health check endpoint
# Start development server
npm run dev
# Build for production
npm run build
# Preview production build
npm run preview
# Lint code
npm run lint# Start with auto-reload
uvicorn main:app --reload --host 0.0.0.0 --port 8000
# Run with specific host/port
python main.py- ✅ Modern React 18+ with TypeScript
- ✅ Vite for fast development and building
- ✅ Tailwind CSS for styling
- ✅ shadcn/ui component library
- ✅ Framer Motion animations
- ✅ Responsive design (mobile, tablet, desktop)
- ✅ Dark mode theme
- ✅ Collapsible sidebar navigation
- ✅ Project cards with status indicators
- ✅ Dashboard with statistics
- ✅ Settings page with multiple sections
- ✅ Smooth page transitions
- ✅ ESLint and Prettier configuration
- ✅ FastAPI with automatic API documentation
- ✅ Pydantic for data validation
- ✅ CORS middleware for frontend integration
- ✅ RESTful API design
- ✅ Mock data for development
- ✅ Type hints throughout
- ✅ Error handling and validation
- ✅ Health check endpoint
- Create a new component in
frontend/src/pages/ - Add the route to
App.tsx - Update the sidebar navigation in
Sidebar.tsx
- Define Pydantic models in
schemas.py - Add business logic in
data.py - Create route handlers in
main.py
- Modify
frontend/tailwind.config.jsfor theme changes - Update CSS variables in
frontend/src/index.css - Customize component styles in individual component files