Day 12 — React Dashboard

7 min readFeb 2, 2026

12 Days of React Project Series

Alhamdulillah! After 12 days of learning and building projects in React, I have finally completed my last project in this series — React Dashboard. This project brings together everything I have learned so far, from React components and state management to responsive design and deployment. The dashboard is interactive, visually appealing, and responsive, making it suitable for both desktop and mobile devices.

The live project can be accessed here: https://syeda-sd.github.io/dashboard. Throughout this blog, I will explain every code file in detail so that anyone reading can understand the structure, purpose, and functionality of the dashboard. I have also included placeholders for screenshots where you can visually showcase the code and live layout.

Project Overview

This React Dashboard is a multi-page application with a variety of components that work seamlessly together. The project includes a collapsible sidebar for navigation, a top navbar with search and user menu, and pages such as Dashboard, Messages, Charts, Calendar, and Reports. Each page has a unique design and interactive functionality to provide a professional user experience.

The sidebar allows easy navigation between pages, both on desktop and mobile. On larger screens, the sidebar can be collapsed to only show icons, while on mobile, it slides in and out with smooth animation. The top navbar contains a functional search bar that allows users to quickly navigate to any page, a notification bell, and a user dropdown menu with profile, settings, and logout options.

This project also focuses on responsive design, ensuring that all elements adapt beautifully to various screen sizes. The design theme throughout the dashboard uses shades of green (rgb(10, 102, 56)), which maintains a professional and cohesive appearance.

Understanding index.js

The index.js file is the entry point of the React application. Its primary role is to render the main App component into the root DOM element. To enable navigation without page reloads, the application is wrapped in BrowserRouter from React Router. This ensures that all page transitions within the dashboard, such as moving from Dashboard to Messages or Charts, are handled seamlessly on the client side.

App.jsx — The Main Application Container

The App.jsx file serves as the main container for the entire dashboard. It houses the Sidebar and Navbar components and manages the application state, including sidebar collapse for desktops and mobile sidebar toggling. The component also handles routing to different pages using the Routes component from React Router.

Within the Routes, each page such as Dashboard, Messages, Charts, Calendar, and Reports is rendered as a separate component. This structure allows the dashboard to function like a multi-page application while remaining a single-page application in terms of performance. The main content area adjusts its width dynamically based on whether the sidebar is collapsed, providing a smooth user experience.

Sidebar.jsx — Navigation Panel

The Sidebar component is responsible for navigation throughout the dashboard. It is designed to work seamlessly on both desktop and mobile devices. On larger screens, the sidebar displays icons along with page names. Users can collapse the sidebar to only show the icons, saving screen space while maintaining accessibility. The currently active page is highlighted to provide visual feedback to users.

On mobile devices, the sidebar becomes a slide-out menu that opens when the menu icon is clicked and closes when a link is selected or the overlay is clicked. The sidebar menu is animated for smooth transitions. I used react-icons to include professional icons next to each page link, enhancing the dashboard’s visual appeal.

Sidebar.css — Styling the Sidebar

The Sidebar.css file manages the appearance of both desktop and mobile sidebars. It defines widths, colors, hover effects, transitions, and the active link styling. For mobile devices, it includes slide-in and slide-out animations and overlays to prevent interactions with the background while the sidebar is open. Using a consistent green theme ensures the dashboard has a professional and cohesive look, and transitions make the interface feel smooth and modern.

Navbar.jsx — Top Navigation Bar

The Navbar component sits at the top of the dashboard. It contains a search bar, a notification bell icon, and a user icon with a dropdown menu. The search bar is functional, allowing users to type a page name and navigate directly to it. The user icon opens a dropdown containing Profile, Settings, and Logout options, and the dropdown is animated to slide in smoothly.

On mobile devices, the search bar adapts to the smaller screen by collapsing while remaining fully functional. The Navbar complements the sidebar by providing quick access to important actions and improving overall usability.

Navbar.css — Styling the Navbar

Get Sidra Gillani’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

The Navbar.css file handles the alignment and spacing of search bars and icons. It defines hover effects for icons, slide-fade animation for dropdown menus, and ensures the layout remains responsive on mobile devices. The styling ensures a professional, clean, and intuitive navigation experience.

Dashboard.jsx — Overview Page

The Dashboard page provides a snapshot of key metrics in the form of cards. These cards display information such as Total Users, Revenue, Tasks, and New Clients, each accompanied by a small icon. The layout adjusts responsively for mobile devices, ensuring clarity and readability.

This page demonstrates how React components can be used to structure informative, visually appealing dashboards that users can interact with easily.

Messages.jsx — Admin Communication Panel

The Messages page functions as an admin communication panel. The left side contains a list of users, each with a profile icon and name. The right side displays recent messages corresponding to the selected user. Admin actions, such as Approve and Remove, are provided for managing messages.

Sample users include Imran Jaffer, Syeda Zoya, Mirha, Aiaman, Sidra, Abdullah, and others. Only the user names appear in the list initially, and their messages are displayed upon selection. This design keeps the interface clean while allowing efficient management of messages.

Charts.jsx — Visual Data Representation

The Charts page uses the recharts library to display interactive data visualizations. It includes a Line Chart to show trends over time and a Pie Chart for category distributions. The charts are responsive and designed to match the dashboard’s green theme, ensuring visual consistency across all pages.

Calendar.jsx — Event Management

The Calendar page integrates the react-calendar library to display a monthly calendar view. Users can add events, which are saved in the browser’s localStorage to persist after page refreshes. On mobile devices, the calendar and event list stack vertically, maintaining readability and usability.

The design emphasizes clarity, with distinct colors for current dates and event highlights.

Reports.jsx — Analytics Overview

The Reports page displays key analytics in a visually structured format. It contains cards for Total Users, Revenue, Tasks, and New Clients, each accompanied by an icon. Filters allow selecting specific date ranges to view relevant data. Action buttons provide interactivity for managing records. The layout is professional, ensuring that important metrics are immediately visible and easy to interpret.

App.css — Main Layout Styling

The App.css file manages the overall layout of the dashboard. It adjusts the main content area dynamically based on the sidebar state and ensures consistent padding, background, and alignment. It also ensures that all pages are responsive and adapt to both desktop and mobile screen sizes.

Deployment on GitHub Pages

This dashboard is deployed on GitHub Pages, making it publicly accessible. The deployment process involved adding a homepage property in package.json, setting up predeploy and deploy scripts, and running npm run deploy. The live site can now be accessed at https://syeda-sd.github.io/dashboard, allowing anyone to interact with the fully functional dashboard online.

Conclusion

Completing this project marked the culmination of my 12 Days of React Project Series. Through this project, I reinforced my knowledge of React component structuring, state management, routing, responsive design, and third-party library integration. I also gained practical experience deploying a React project live on GitHub Pages. Alhamdulillah, Day 12 has been a successful and rewarding experience. This professional React Dashboard now stands as a testament to the skills I have acquired over the past 12 days, and it will serve as a strong addition to my portfolio.