Fusion React Dashboard

A modern React dashboard application built with Vite, featuring a responsive admin template with sidebar navigation, multiple pages, and custom React hooks for template functionality.

🚀 Features

• Modern React Stack: Built with React 19 and Vite 7
• React Router: Client-side routing with React Router v7
• React Compiler: Enabled for optimized performance
• Responsive Design: Mobile-friendly sidebar and navigation
• Custom Hooks: Modular functionality using React hooks
• Font Awesome Integration: Complete icon library included
• Multiple Pages: Dashboard, stats, cards, icons, auth pages, and error pages
• Protected Routes: Route guards for authentication

📋 Prerequisites

• Node.js (v18 or higher recommended)
• npm or yarn package manager

🛠️ Installation

1. Clone the repository:

git clone <repository-url>
cd fusion-react-dashboard

2. Install dependencies:

npm install

🚀 Getting Started

Development Mode

Start the development server with hot module replacement:

npm run dev

The application will be available at http://localhost:5173

Build for Production

Create an optimized production build:

npm run build

Preview Production Build

Preview the production build locally:

npm run preview

Lint Code

Run ESLint to check code quality:

npm run lint

📁 Project Structure

fusion-react-dashboard/
├── public/               # Static assets
│   ├── css/             # Template CSS files
│   ├── fonts/           # Font files (Karla, Roboto)
│   ├── images/          # Image assets
│   ├── js/              # Legacy template scripts
│   ├── lib/             # Third-party libraries
│   └── typicons-font/   # Typicons font
├── src/
│   ├── components/      # Reusable React components
│   ├── constants/       # Application constants
│   ├── hooks/           # Custom React hooks
│   ├── layout/          # Layout components (MainLayout, AuthLayout)
│   ├── pages/           # Page components
│   └── routes/          # Route configuration
├── eslint.config.js     # ESLint configuration
├── vite.config.js       # Vite configuration
└── package.json         # Project dependencies

🎯 Available Pages

• Dashboard - Main dashboard view
• Stats Dashboard - Statistics and analytics
• Card Grid Showcase - Card components showcase
• Pricing Cards - Pricing page examples
• Font Awesome Icons - Icon library
• Typicons - Alternative icon set
• Login - Authentication page
• Register - User registration
• Error Pages - 400 and 500 error pages

🔧 Custom Hooks

The project includes custom React hooks that replace vanilla JavaScript functionality:

• useTemplateSetup - Master hook that initializes all template features
• useSidebarToggle - Sidebar minimize/maximize functionality
• useActiveNavigation - Active navigation highlighting
• usePerfectScrollbar - Scrollbar initialization
• useCollapsibleMenu - Sidebar submenu management
• useFormInputHelper - Form input helpers
• useHorizontalMenu - Mobile menu and header scroll
• useHoverOpen - Hover-based dropdown behavior
• useDropdown - Dropdown menu functionality

For detailed migration information, see TEMPLATE_MIGRATION.md

🛣️ Routing

The application uses React Router v7 for client-side routing. Route configuration is located in src/routes/router.jsx.

Protected routes are implemented using the ProtectedRoute component to guard authenticated pages.

🎨 Styling

• Custom CSS in public/css/
• Font Awesome icons via @fortawesome/fontawesome-free
• Typicons font for additional icons
• Perfect Scrollbar for custom scrollbars

⚛️ React Compiler

This project has the React Compiler enabled for automatic optimizations. The compiler:

• Automatically memoizes components and values
• Reduces the need for manual useMemo and useCallback
• May impact dev/build performance slightly

Learn more: React Compiler Documentation

🔍 Code Quality

The project uses ESLint with the following plugins:

• @eslint/js - Core ESLint rules
• eslint-plugin-react-hooks - React Hooks rules
• eslint-plugin-react-refresh - React Refresh rules

📦 Dependencies

Core Dependencies

• react (^19.2.0) - React library
• react-dom (^19.2.0) - React DOM renderer
• react-router-dom (^7.10.1) - Routing library
• @fortawesome/fontawesome-free (^7.1.0) - Icon library

Dev Dependencies

• vite (^7.2.4) - Build tool and dev server
• @vitejs/plugin-react (^5.1.1) - React plugin for Vite
• babel-plugin-react-compiler (^1.0.0) - React Compiler
• eslint (^9.39.1) - Code linting

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is private and not licensed for public use.

🙋 Support

For issues and questions, please create an issue in the repository.