This is a modern, modular Admin Dashboard built with React. It serves as a showcase of my frontend engineering skills, focusing on clean code architecture, global state management, and scalable project structure.
- Global Context API: Integrated
ThemeContextto manage application-wide state (Light/Dark mode) effectively, eliminating prop drilling. - Tailwind CSS v4 Integration: Utilized the latest
@variant darklogic combined with a root-level class toggle for high-performance theme switching. - State Persistence: User's theme preference is automatically synchronized with
localStoragefor a consistent experience across sessions.
- Protected Routes: Implemented a
ProtectedRoutewrapper to manage session-based access control, ensuring only authorized admins can access the dashboard. - Environment-Driven Identity: Admin credentials and sensitive branding data are securely fetched from
.envvariables using Vite'simport.meta.envlogic. - Session Management: Transitioned to
sessionStoragefor authentication states to ensure data is automatically wiped when the browser tab is closed, enhancing security. - Global Identity Rendering: The admin's identity is globally managed via
AuthContextand dynamically displayed across the Navbar, Sidebar, and Footer.
- Real-time User Synchronization: Developed a
UsersContextto bridge the gap between the Registration flow and the Admin Dashboard. - Instant Dashboard Updates: New users are automatically added to the global state and become immediately visible on the Users Page for administrative review.
- Data Persistence: Supports full user lifecycle management with
localStoragepersistence and administrative actions like real-time user deletion.
- Advanced Path Aliasing: Configured custom directory aliases in
vite.config.jsto simplify imports and maintain a clean codebase (e.g.,@views/*,@context/*,@assets/*). - Component-Based UI: Modularized the layout into
Sidebar,Navbar, andFooterusing React Router's<Outlet />for maximum reusability and scalable page structures. - Dynamic Configuration: Sidebar, Navbar, and Footer elements are rendered dynamically from reusable configuration objects, making the UI easy to extend and maintain.
The project follows a modular "Hook-based" architecture to separate logic from UI and ensure reusability:
useForm: A custom hook for managing controlled form inputs. It handles state updates for all fields dynamically, reducing boilerplate code in forms like Login and Register.useLocaleStorage: Synchronizes state withlocalStorageautomatically. It’s used to persist user preferences like the application theme across sessions.- Context-Specific Hooks:
useAuth,useTheme, anduseUser: These hooks provide easy access to their respective contexts.BaseContextUtility: I implemented a higher-order utility calledBaseContextto standardize how context hooks are created. This ensures that every context hook automatically checks if it's being used within its required Provider, throwing a descriptive error if not.
To enhance the user experience and provide essential information to first-time visitors, I implemented a custom Overlay component:
- Instructional Layer: Displays a welcome message and the necessary Admin Credentials immediately upon visiting the Registration page.
- One-Time Visibility: Using a combination of
useStateandlocalStorage, the overlay is programmed to appear only until the user dismisses it. - Persistence: Once the "X" button is clicked, a flag is stored in the browser's local storage. This ensures that even if the page is refreshed, the overlay remains hidden, providing a seamless experience for returning users.
- UX Design: Utilizes a semi-transparent backdrop and high-priority
z-indexto focus user attention on key demo information.
This project is a Frontend Portfolio Showcase designed to demonstrate administrative dashboard architecture, CRUD operations, and global state management. Please note the following regarding its functional scope:
- Administrative Focus: The core logic is strictly built for the Admin Panel. While a Registration page exists, it is implemented solely to demonstrate data flow (reading user inputs and dynamically rendering them in the Users Management table).
- Access Control: Registered users cannot "log in" to a separate user portal. Access to the dashboard is restricted to the Admin Identity defined in the system environment.
- Authentication: To explore the dashboard features, you must use the Admin credentials on the Login Page.
- Purpose: This is not a production-ready commercial application; it is a specialized technical demonstration created for recruitment and portfolio presentation purposes.
- Core: React 18 (Hooks, Context API)
- Styling: Tailwind CSS (v4 features utilized)
- Routing: React Router DOM v6
- Build Tool: Vite
- Icons: React Icons (Fa, Md, Io)
To test the dashboard functionality, use the following credentials on the login page:
- Username:
admin - Password:
admin_123
- Clone the repository:
git clone https://github.com/N-Emil/Admin-Dashboard.git