A modern, fully-featured admin dashboard application built with React and Vite. This project demonstrates advanced frontend development practices including authentication, protected routes, state management, responsive UI design, and data visualization.
- Overview
- Tech Stack
- Features
- Project Structure
- Installation
- Getting Started
- API Integration
- Authentication
- Development
- Build & Deployment
- Demo Credentials
- Key Components
- State Management
- Styling
- Performance Optimizations
- Future Enhancements
This React Admin Dashboard is a production-ready application that showcases modern frontend architecture and best practices. It includes a complete authentication system, user management, analytics dashboard, reporting tools, and user profile management. The application supports both real backend APIs and local mock data for development.
- React 18 - UI library with hooks for state management
- Vite - Lightning-fast build tool and dev server (Next-gen bundler)
- React Router DOM v6 - Client-side routing with nested routes and protected navigation
- React Context API - Global state for authentication and user data
- useReducer & useEffect Hooks - Advanced state management patterns
- Recharts - Composable charting library for React
- Line charts for analytics
- Bar charts for comparisons
- Responsive and interactive visualizations
- CSS3 - Modern responsive design with Flexbox and Grid
- Mobile-first approach - Fully responsive across all devices
- Custom CSS - No dependency bloat, pure CSS for performance
- ESLint - Code quality and consistency
- Babel - JavaScript transpilation
- npm/yarn - Package management
- Fetch API - Modern HTTP client
- Mock API Layer - Built-in development mock backend
- Environment-based configuration - Easy switching between mock and real APIs
- User login and signup functionality
- JWT-based token management
- Persistent authentication (localStorage-based)
- Protected routes with PrivateRoute component
- Demo account for immediate testing (
admin/password123) - Offline fallback support
- Comprehensive error handling
- Real-time statistics display (Visitors, Sales, Conversion Rate, Revenue)
- Interactive charts with Recharts
- Data visualization with multiple chart types
- Responsive dashboard layout
- Mock data included for development
- View all users with table display
- Add new users
- Delete users with confirmation
- User role management (admin, member)
- Inline editing capabilities
- Responsive user list
- Activity reports with status tracking
- Report generation interface
- Historical data tracking
- Date-based filtering
- Export-ready report structure
- View user information
- Edit profile details
- Profile picture support
- Email and contact management
- Real-time profile updates
- User preferences management
- Application settings
- LocalStorage persistence
- Theme/UI preferences
- Notification settings
- Responsive sidebar navigation
- Intuitive header with user info
- Clean and modern design
- Form validation
- Error handling and user feedback
- Loading states
- Success/error notifications
Dashboard-App/
├── public/ # Static assets
├── src/
│ ├── components/
│ │ ├── Card.jsx # Reusable card component
│ │ ├── Header.jsx # Dashboard header with user info
│ │ ├── Layout.jsx # Main layout wrapper
│ │ ├── Sidebar.jsx # Navigation sidebar
│ │ ├── PrivateRoute.jsx # Protected route wrapper
│ │ └── ProtectedRoute.jsx # Alternative route protection
│ ├── context/
│ │ └── AuthContext.jsx # Authentication context provider
│ ├── config/
│ │ └── api.js # API endpoints and fetch helpers
│ ├── pages/
│ │ ├── Dashboard.jsx # Main dashboard layout
│ │ ├── Home.jsx # Dashboard home with stats
│ │ ├── Users.jsx # User management page
│ │ ├── Reports.jsx # Reports page
│ │ ├── Profile.jsx # User profile page
│ │ ├── Settings.jsx # Settings page
│ │ ├── Login.jsx # Login page
│ │ └── Signup.jsx # Registration page
│ ├── Layout/
│ │ └── DashboardLayout.jsx # Dashboard layout structure
│ ├── Routes/
│ │ └── PrivateRoute.jsx # Route protection logic
│ ├── styles/
│ │ ├── dashboard.css # Dashboard styling
│ │ ├── header.css # Header styling
│ │ ├── login.css # Authentication styling
│ │ └── sidebar.css # Sidebar styling
│ ├── App.jsx # Main app component with routes
│ ├── main.jsx # React entry point
│ └── assets/ # Images and media
├── .env # Environment variables (local)
├── .env.example # Environment template
├── .gitignore # Git ignore rules
├── eslint.config.js # ESLint configuration
├── vite.config.js # Vite configuration
├── package.json # Dependencies and scripts
└── README.md # This file
- Node.js 18+ installed
- npm or yarn package manager
- Git installed
git clone https://github.com/EliKay1414/React-Admin-Dashboad.git
cd Dashboard-Appnpm install
# or
yarn install# Copy the example env file
cp .env.example .env
# The default configuration uses mock API
# To use a real backend, change .env:
# VITE_USE_MOCK_API=false
# VITE_API_URL=http://your-backend-url:portnpm run dev
# Starts Vite dev server at http://localhost:5173npm run build
# Creates optimized build in dist/ foldernpm run preview
# Serves the production build locallynpm run lint
# Checks code quality with ESLintThe application uses a centralized API layer in src/config/api.js:
// API_ENDPOINTS - Organized by feature
API_ENDPOINTS.AUTH.LOGIN
API_ENDPOINTS.DASHBOARD.STATS
API_ENDPOINTS.USERS.GET_ALL
API_ENDPOINTS.PROFILE.UPDATEWhen VITE_USE_MOCK_API=true, the app uses in-memory mock data:
- No external dependencies required
- Instant responses
- Perfect for UI development
- Simulates real API behavior
Set VITE_USE_MOCK_API=false to connect to a backend:
- Standard REST endpoints
- Bearer token authentication
- Timeout handling (configurable)
- Error handling with fallbacks
import { fetchWithTimeout, API_ENDPOINTS } from "../config/api";
const response = await fetchWithTimeout(API_ENDPOINTS.USERS.GET_ALL, {
method: 'GET',
headers: getAuthHeader(token),
});
const data = await response.json();- User submits login form with username and password
- AuthContext validates and sends request
- Backend returns JWT token or mock demo token
- Token stored in localStorage
- PrivateRoute checks token before rendering protected pages
Username: admin
Password: password123
- Automatic token persistence
- Logout functionality
- Error state management
- Network error handling
- Demo fallback when backend unavailable
const { login, logout, user, token } = useAuth();
// Login
await login(username, password);
// Logout
logout();
// Check auth status
if (user?.authenticated) {
// User is logged in
}React 18 Features:
- Functional components with hooks
- Context API for state management
- useEffect for side effects
- useState for local state
- useReducer for complex state logic
React Router v6:
- Nested route structure
- Route parameters
- Programmatic navigation
- Protected route patterns
- Layout routes
Performance Considerations:
- Code splitting with lazy routes
- Optimized re-renders with Context
- Minimal dependencies
- Fast Vite bundler
- CSS modules approach
Protected Route:
<PrivateRoute>
<Dashboard />
</PrivateRoute>Context Hook:
const { user, login, logout } = useAuth();Data Fetching:
useEffect(() => {
fetchData();
}, [dependency]);npm run buildCreates optimized dist folder ready for deployment.
- Vercel - Recommended for Next-gen React apps
- Netlify - Excellent Vite support
- GitHub Pages - Static hosting
- AWS Amplify - Full-stack deployment
- Docker - Containerized deployment
VITE_API_URL=https://api.production.com
VITE_API_TIMEOUT=15000
VITE_USE_MOCK_API=false- Username:
admin - Password:
password123
Use these credentials to explore all dashboard features without needing a real backend.
Manages global authentication state including:
- User login/logout
- Token management
- Error handling
- Network error detection
- Demo fallback
Guards routes requiring authentication:
- Checks if user is authenticated
- Redirects to login if not
- Persists attempted route
Navigation component with:
- Menu items
- Active route highlighting
- Responsive mobile menu
- User logout option
Main dashboard layout featuring:
- Sidebar navigation
- Header with user info
- Nested routes for pages
- Responsive layout
Dashboard home page with:
- Statistics cards
- Analytics charts
- Reports list
- Data visualization
AuthProvider (Global)
├── user (authentication state)
├── token (JWT token)
├── loading (request state)
├── error (error messages)
└── Methods: login, logout, signup
- Form inputs
- UI state (loading, errors)
- Modal visibility
- Pagination state
- Global styles - Base component styling
- Component-specific CSS - Modular styles per component
- Responsive design - Mobile-first approach
- CSS Grid & Flexbox - Modern layout techniques
dashboard.css- Dashboard layout and componentsheader.css- Header and navigation stylinglogin.css- Authentication pages stylingsidebar.css- Sidebar navigation styling
Desktop: 1024px and above
Tablet: 768px - 1023px
Mobile: 320px - 767px- Vite Bundler - Ultra-fast builds and HMR
- Lazy Route Loading - Load pages on demand
- Context API - Efficient state management
- CSS Optimization - Minimal CSS payload
- No Build Bloat - Only essential dependencies
- Browser Caching - LocalStorage for persistence
- Mock API - Instant development without backend
- TypeScript integration for type safety
- Advanced analytics with more chart types
- Real-time data with WebSockets
- User permissions and role-based access
- Dark mode theme toggle
- Data export functionality (CSV, PDF)
- Advanced filtering and search
- User activity logging
- Email notifications
- API documentation (Swagger/OpenAPI)
- Unit and integration tests
- E2E testing with Cypress
Contributions are welcome! Please:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit changes (
git commit -m 'Add amazing feature') - Push to branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
Created as a demonstration of modern React development practices and full-stack dashboard application development.
For issues, questions, or suggestions, please open an issue on GitHub or contact the development team.
Note: This project uses a mock API layer for development. To integrate with a real backend, update the environment variables and ensure your backend API is running on the configured URL.