Building a Responsive Admin Dashboard in React JS

By
Asif Ali
-
0

Hey everyone today I’m going to share with you how to Make a Responsive Admin Dashboard in React JS from scratch. Admin dashboards are helpful in managing applications back end content. You can use Admin Dashboard to manage the application front end or beck-end as you want.

There are many ways to build a responsive Admin Dashboard, but let me share with you the simple and easiest way to build the project from scratch in React JS and also pure CSS. So, you can use any framework to design that, but I usually use pure CSS.


Making a responsive admin dashboard with React JS is an effective way to construct fashionable and dynamic net purposes. A responsive dashboard ensures that it really works easily throughout completely different display screen sizes, from desktops to cell units. Right here’s step-by-step information on tips on how to obtain that.

Responsive Admin Dashboard in React JS

Before moving the codes, you need to watch the video that helps you to understand each step. I hope the video is helpful for you.

I hope you’ve watched the video till to end and you’ve learned something new from the tutorial. Let’s see the source codes of the project below.

You May Also Like:

1. Set Up the React Venture
Begin by organizing a React challenge. React is a JavaScript library used for developing personal interfaces. You should utilize instruments like Create React App to rapidly generate the preliminary setup. Upon getting the challenge arranged, you’re prepared to begin constructing the admin dashboard.

First of All, you need to create a project using Vite, once you have done that, then the next thing you need to install React Router Dom. Finally, you need to clean the default codes and paste on my codes that I’m going to share with you step by step.

Here is the App.JSX code that you need to add it, Inside the codes you can move the users one page to another page, but you need to create another pages.

import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import HomePage from "./pages/HomePage";
import Transcations from "./pages/Transcations";
import Budget from "./pages/budget";
import Pots from "./pages/Pots";
import Bills from "./pages/Bills";
import Overview from "./components/Overview";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/overview" element={<Overview />} />
        <Route path="/transcations" element={<Transcations />} />
        <Route path="/budget" element={<Budget />} />
        <Route path="/pots" element={<Pots />} />
        <Route path="/bills" element={<Bills />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Let’s see the Codes that are used to to build a Home Page. You need to call the components such as SideBar and Overview.

import React from "react";
import Sidebar from "../components/Sidebar";
import Overview from "../components/Overview";

function HomePage() {
  return (
    <>
      <Sidebar />
      <Overview />
    </>
  );
}

export default HomePage;

Let’s take a look at Sidebar component codes.

import React from "react";
import { Link, NavLink } from "react-router-dom";
import Logo from "./../assets/images/logo-large.svg";
import overview from "./../assets/images/icon-nav-overview.svg";
import transcation from "./../assets/images/icon-nav-transactions.svg";
import budget from "./../assets/images/icon-nav-budgets.svg";
import pots from "./../assets/images/icon-nav-pots.svg";
import bills from "./../assets/images/icon-nav-recurring-bills.svg";
import minimizeMenu from "./../assets/images/icon-minimize-menu.svg";

function Sidebar() {
  return (
    <header className="sidebar-wrapper">
      <nav className="sideMenus">
        <Link to="/" className="logo">
          <img src={Logo} alt="" />
        </Link>
        <NavLink to="/">
          <img src={overview} />
          <p>Overview</p>
        </NavLink>
        <NavLink to="/transcations">
          <img src={transcation} alt="" />
          <p>Transcation</p>
        </NavLink>
        <NavLink to="/budget">
          <img src={budget} alt="" />
          <p>Budget</p>
        </NavLink>
        <NavLink to="/pots">
          <img src={pots} alt="" />
          <p>Pots</p>
        </NavLink>
        <NavLink to="/bills">
          <img src={bills} alt="" />
          <p>Bills</p>
        </NavLink>
      </nav>
    </header>
  );
}

export default Sidebar;

After that, you need to create overview components that contain all the content.

import React from "react";
import FinanceCard from "./FinanceCard";
import data from "./../data.json";
import { Link } from "react-router-dom";
import DollarIcon from "./../assets/images/icon-pot.svg";
import { Label, LabelBg } from "./Label";
import Chart from "./Chart";

function Overview() {
  const balacetxt = "Current Balance";
  const inCometxt = "Icome";
  const expensesTxt = "Expenses";

  return (
    <div className="overview_wrapper">
      <div className="headings">
        <h2>Overview</h2>
      </div>

      {/* =============Cards============= */}
      <div className="card_wrapper">
        <FinanceCard
          txt={balacetxt}
          amount={`$${data[0].balance.current}`}
          className="active"
        />
        <FinanceCard txt={inCometxt} amount={`$${data[0].balance.expenses}`} />
        <FinanceCard txt={expensesTxt} amount={`$${data[0].balance.income}`} />
      </div>

      {/* ================Card Overview Details================= */}
      <div className="details-card-wrapper">
        <div className="left-side-content">
          <div className="pots-wrapper">
            <div className="pot-header">
              <h3>Pots</h3>
              <Link to="/pots">See Details</Link>
            </div>
            <div className="pot-body">
              <div className="amount">
                <img src={DollarIcon} alt="" />
                <div className="pot-content">
                  <p>Total Saved</p>
                  <p>$850</p>
                </div>
              </div>
              <div className="label_wrappers">
                <Label txt={"Saving"} number={"$" + 150} />
                <Label txt={"Saving"} number={"$" + 150} />
                <Label txt={"Saving"} number={"$" + 150} />
                <Label txt={"Saving"} number={"$" + 150} />
              </div>
            </div>
          </div>

          {/* =====Transcation */}
          <div className="transcation_wrapper">
            <div className="transcation-header">
              <h3>Transcations</h3>
              <Link to="/transcations">View All</Link>
            </div>
            <div className="tracation_body">
              {data.map((user, i) => {
                return user.transactions.map((transcation, i) => {
                  const convertDate = transcation.date;
                  return (
                    <div className="transcation_content">
                      <div className="img_name">
                        <img src={transcation.avatar} alt="" key={i} />
                        <p className="name">{transcation.name}</p>
                      </div>
                      <div className="amount_date">
                        <p className="deposit">${transcation.amount}</p>
                        <p className="date">{Date(convertDate).slice(0, 15)}</p>
                      </div>
                    </div>
                  );
                });
              })}
            </div>
          </div>
        </div>
        <div className="right-side-content">
          <div className="budget_wrapper">
            <div className="budget-header">
              <h3>Budget</h3>
              <Link to="/budget">See Details</Link>
            </div>
            <div className="budget-body">
              <Chart />
            </div>
          </div>

          {/* bill Wrapper */}
          <div className="bill_wrapper">
            <div className="bill-header">
              <h3>Bill Recurring</h3>
              <Link to="/bills">See Details</Link>
            </div>
            <div className="bill-body">
              <LabelBg txt="Paid Bills" number={"$190"} />
              <LabelBg txt="Total Income" number={"$1194"} />
              <LabelBg txt="Due Soon" number={"$59.98"} />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Overview;

Inside the overview components have many other components that I resue it, so, let’s see the Finance Card component.

import React from "react";

function FinanceCard({ txt, amount }) {
  return (
    <div className="cards">
      <div className="card_header">
        <p>{txt}</p>
        <p>{amount}</p>
      </div>
    </div>
  );
}

export default FinanceCard;

Then I also used other components such as label and labelBg components you can check it the codes on below.

import React from "react";

export function Label({ txt, number }) {
  return (
    <div className="label">
      <p>{txt}</p>
      <p>{number}</p>
    </div>
  );
}

export function LabelBg({ txt, number }) {
  return (
    <div className="bg-label">
      <p>{txt}</p>
      <p>{number}</p>
    </div>
  );
}

Let’s see the codes that are used to display dynamic charts inside the overview page, You can find the codes on below.

import * as React from "react";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import Slider from "@mui/material/Slider";
import FormControlLabel from "@mui/material/FormControlLabel";
import Checkbox from "@mui/material/Checkbox";
import { PieChart } from "@mui/x-charts/PieChart";
import { mobileAndDesktopOS, valueFormatter } from "./webUsageStats";

export default function PieAnimation() {
  const [radius, setRadius] = React.useState(50);
  const [itemNb, setItemNb] = React.useState(5);
  const [skipAnimation, setSkipAnimation] = React.useState(false);

  return (
    <Box sx={{ width: "100%" }}>
      <PieChart
        height={300}
        series={[
          {
            data: mobileAndDesktopOS.slice(0, itemNb),
            innerRadius: radius,
            arcLabel: (params) => params.label ?? "",
            arcLabelMinAngle: 20,
            valueFormatter,
          },
        ]}
        skipAnimation={skipAnimation}
      />
    </Box>
  );
}

Also, you need to add typescript codes that are integrated inside the chart file. 

// Data derived from https://gs.statcounter.com/os-market-share/desktop/worldwide/2023
// And https://gs.statcounter.com/os-market-share/mobile/worldwide/2023
// And https://gs.statcounter.com/platform-market-share/desktop-mobile-tablet/worldwide/2023
// For the month of December 2023

export const PersonalData = [
  {
    label: 'Entertainment',
    value: 50.00,
  },
  {
    label: 'Bills',
    value: 750.00,
  },
  {
    label: 'Dining Out',
    value: 75.00,
  },
  {
    label: 'Personal Care',
    value: 100.00,
  },

];



export const platforms = [
  {
    label: 'Mobile',
    value: 59.12,
  },
  {
    label: 'Desktop',
    value: 40.88,
  },
];

const normalize = (v: number, v2: number) => Number.parseFloat(((v * v2) / 100).toFixed(2));

export const mobileAndDesktopOS = [
  
  ...PersonalData.map((v) => ({
    ...v,
    label: v.label === 'Other' ? 'Other (Desktop)' : v.label,
    value: normalize(v.value, platforms[1].value),
  })),
];

export const valueFormatter = (item: { value: number }) => `${item.value}%`;

let’s see the page codes such as transaction and other pages have the same codes just change the component name.

import React from "react";
import Sidebar from "../components/Sidebar";

function Transcations() {
  return (
    <div>
      <Sidebar />
    </div>
  );
}

export default Transcations;

You can create another page and use the same codes that I shared with you on the transaction page.

2. Select a Design Framework
For a responsive format, you should use CSS frameworks like Materials-UI (MUI) or Bootstrap. These libraries provide pre-designed elements that adapt to completely different display screen sizes. Additionally, they present format grids that assist construction the dashboard into rows and columns that are regulated based mostly on the display screen decision.

@import url("https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap");

:root {
  --darkGray: #201f24;
  --lightGray: #f8f5f0;
  --whiteColor: #ffffff;
  --greenColor: #277c77;
  --lightYellow: #f1cdab;
  --lightBlue: #81c9d7;
  --lightPurple: #625f70;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-color: var(--lightGray);
  font-family: "Public Sans";
}

.sidebar-wrapper {
  position: fixed;
}

header nav {
  display: flex;
  flex-direction: column;
  padding: 0 1rem;
  background-color: var(--darkGray);
  width: 350px;
  min-height: 100vh;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

header nav .logo {
  margin: 1rem 0;
}

header nav a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--lightGray);
  padding: 1rem 1rem;
  margin: 0.5rem 0;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

header nav a:hover,
header nav a.active {
  background-color: var(--lightGray);
  color: var(--darkGray);
  font-weight: bold;
  border-left: 6px solid var(--greenColor);
}

header nav a:hover:nth-child(1) {
  background-color: var(--darkGray);
}

header nav a img {
  padding-right: 1rem;
}

/* ==================Overview================== */
.overview_wrapper {
  position: relative;
  width: calc(100% - 500px);
  left: 400px;
  top: 30px;
  padding: 0 1rem;
  z-index: -1;
}

.overview_wrapper .headings {
  font-size: 1.5rem;
}

.card_wrapper {
  display: flex;
  justify-content: space-between;
  margin: 1rem 0;
}

.card_wrapper .cards {
  background-color: var(--whiteColor);
  color: var(--darkGray);
  padding: 1.5rem 2rem;
  margin: 2rem 0;
  border-radius: 5px;
  width: 350px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.card_wrapper .cards:hover,
.card_wrapper .cards.active {
  background-color: var(--darkGray);
  color: var(--lightGray);
}

.card_wrapper .cards .card_header p {
  font-size: 2rem;
  margin-top: 0.5rem;
  font-weight: bold;
}

.card_wrapper .cards .card_header p:first-child {
  opacity: 0.8;
  font-size: 0.9rem;
  font-weight: normal;
}

/* ==================Details Cards==================== */
.details-card-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  margin: 2rem 0;
}

.pots-wrapper {
  background-color: var(--whiteColor);
  width: 800px;
  border-radius: 5px;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
  padding: 2rem;
}

.pot-header,
.budget-header,
.bill-header,
.transcation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.pot-header h3,
.budget-header h3,
.bill-header h3,
.transcation-header h3 {
  font-size: 1.5rem;
}

.pot-header a,
.budget-header a,
.bill-header a,
.transcation-header a {
  text-decoration: none;
  color: var(--darkGray);
  opacity: 0.5;
}

.pot-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pot-body .amount {
  background-color: var(--lightGray);
  border-radius: 5px;
  display: flex;
  align-items: center;
  width: 300px;
  padding: 1rem 1.5rem;
}

.pot-body .pot-content {
  padding: 1rem;
  font-size: 2rem;
  font-weight: bold;
}

.pot-body .pot-content p:first-child {
  font-size: 1rem;
  color: var(--darkGray);
  opacity: 0.5rem;
  margin-bottom: 0.5rem;
}

.label_wrappers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 1rem;
  grid-row-gap: 2rem;
}

.label {
  width: 100px;
  padding-left: 1rem;
  border-left: 4px solid var(--lightBlue);
}

.label:nth-child(2) {
  border-left: 4px solid var(--greenColor);
}

.label:nth-child(3) {
  border-left: 4px solid var(--lightYellow);
}

.label:nth-child(4) {
  border-left: 4px solid var(--lightPurple);
}

.label p {
  font-size: 1rem;
  font-weight: bold;
}

.label p:nth-child(1) {
  font-weight: normal;
  opacity: 0.5;
  margin-bottom: 0.2rem;
}

/* ================Right Side Section */
.right-side-content {
  height: 50vh;
  width: 580px;
}

.budget_wrapper {
  background-color: var(--whiteColor);
  padding: 2rem;
  border-radius: 5px;
  box-shadow: 0, 0, 0, 5px 0 rgba(0, 0, 0, 0.5);
}

/* ============Bill=========== */
.bill_wrapper {
  background-color: var(--whiteColor);
  padding: 2rem;
  border-radius: 5px;
  box-shadow: 0 0 05 0 rgba(0, 0, 0, 0.5);
  margin-top: 2rem;
  margin-bottom: 2rem;
  height: 37vh;
}

.bill-body .bg-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--lightGray);
  padding: 1rem 1rem;
  margin-top: 1rem;
  border-left: 0.5rem solid var(--greenColor);
}

.bill-body .bg-label:nth-child(2) {
  border-left: 0.5rem solid var(--lightBlue);
}

.bill-body .bg-label:nth-child(3) {
  border-left: 0.5rem solid var(--lightPurple);
}

/* ===================Transcatoin */
.transcation_wrapper {
  margin: 2rem 0;
  height: 51vh;
  background-color: var(--whiteColor);
  padding: 1.5rem;
  border-radius: 5px;
  box-shadow: 0 0 05 0 rgba(0, 0, 0, 0.5);
  overflow-y: hidden;
}

.transcation_content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid var(--lightGray);
}

.tracation_body .img_name {
  display: flex;
  align-items: center;
  margin-top: 1.5rem;
}

.tracation_body .img_name .name {
  font-weight: bold;
}

.tracation_body .img_name img {
  border-radius: 50%;
  width: 50px;
  margin-right: 1rem;
}

.transaction_content .amount_date .deposit {
  color: var(--greenColor);
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.transaction_content .amount_date .date {
  color: var(--lightGray);
}

3. Create the Structure
The format is a very powerful part of the dashboard. It ought to embody:

Sidebar: A menu for navigation. It could collapse on smaller screens.
Header: A prime bar that exhibits key data, like notifications or the person’s profile.
Major Content material Space: The part the place knowledge, charts, or kinds are displayed.
Make sure that every one of those elements responds to display screen measurement adjustments. For instance, the sidebar ought to conceal or collapse when seen on cell units.

4. Use React Elements
React approach that you could create reusable elements. Construct elements for the sidebar, header, and dashboard gambling cards (e.G., analytics playing cards, charts, or tables). These elements make it straightforward to attend to and update the dashboard through the years.

5. Make It Responsive with CSS
Use Flexbox or Grid for format creation. These CSS houses help create flexible designs that modify to without a doubt one-of-a-kind show display screen sizes. You might also moreover add media queries to personalize how elements behave on small screens. For instance, you might have considered trying for the sidebar to interrupt down on video display units smaller than 768px.

@media (max-width: 1440px) {
  header nav {
    width: 320px;
  }

  /* ==================Overview================== */
  .overview_wrapper {
    width: calc(100% - 350px);
    left: 350px;
  }

  .card_wrapper .cards {
    width: 320px;
  }

  .pots-wrapper {
    width: 600px;
  }

  /* ============Bill=========== */
  .bill_wrapper {
    height: 44vh;
  }

  /* ================Right Side Section */
  .right-side-content {
    width: 450px;
  }

  /* ===================Transcatoin */
  .transcation_wrapper {
    height: 67vh;
  }
}

@media (max-width: 1024px) {
  header nav {
    width: 300px;
  }

  /* ==================Overview================== */
  .overview_wrapper {
    width: calc(100% - 320px);
    left: 320px;
  }

  .card_wrapper .cards {
    width: 200px;
  }

  .transcation_wrapper {
    width: 100%;
  }

  /* ============Bill=========== */
  .bill_wrapper {
    height: 40vh;
  }

  /* ==================Details Cards==================== */
  .details-card-wrapper {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;
    margin: 2rem 0;
    width: 100%;
  }

  .card_wrapper .cards .card-header p {
    font-size: 1.5rem;
    margin-top: 0.5rem;
    font-weight: bold;
  }

  .pots-wrapper {
    width: 100%;
  }

  /* ================Right Side Section */
  .right-side-content {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .sidebar-wrapper {
    position: fixed;
    bottom: 0;
    width: 100%;
  }

  header nav {
    display: flex;
    flex-direction: row;
    padding: 0 1rem;
    background-color: var(--darkGray);
    width: 100%;
    min-height: 10vh;
  }

  header nav a {
    display: flex;
    align-items: center;
    padding: 0 1rem;
    margin: 0.2rem 0;
    font-size: 1rem;
  }

  header nav .logo img {
    content: url("./assets/images/logo-small.svg");
  }

  .overview_wrapper {
    width: 100%;
    left: 0;
    top: 25px;
    padding: 0 1rem;
    z-index: -1;
  }

  .bill_wrapper {
    height: 50vh;
  }
}

@media (max-width: 425px) {
  header nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* padding: 1.2rem; */
    font-size: 0.7rem;
  }

  header nav a img {
    display: block;
    margin-left: 1rem;
  }

  header nav a:hover,
  header nav a.active {
    font-weight: normal;
    border-left: 2px solid var(--greenColor);
    padding: 0.3rem;
  }

  .card_wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
  }

  .card_wrapper .cards {
    width: 100%;
    margin: 1rem 0;
  }

  .details-card-wrapper {
    width: 100%;
  }

  .pot-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }

  .pot-body .amount {
    width: 100%;
    padding: 1rem 1.5rem;
  }

  .label_wrappers {
    display: flex;

    width: 100%;
  }

  .label {
    width: 100%;
    padding-left: 1rem;
    border-left: 4px solid var(--lightBlue);
  }

  header nav .logo {
    display: none;
  }

  .bill_wrapper {
    height: 50vh;
  }

  .transcation_wrapper {
    font-size: 0.8rem;
  }
}

6. Add Charts and Tables
Dashboards normally show knowledge visually. Use chart libraries like Chart.js or Recharts so as to add interactive charts. For tables, you should use libraries like React Desk to show knowledge in a structured and responsive method.

7. Check for Mobile Responsiveness
As soon as everything is in place, look at your dashboard on completely different units and display screen sizes. Ensure all parts look good and are straightforward to work with on cellphones and tablets.

8. Ultimate Touches
Add any last options like mild/darkish mode toggles, person profile administration, or superior filtering choices for knowledge. Make sure that the dashboard is handy and user-friendly.

Conclusion
developing a responsive admin dashboard with React JS entails structuring the format with elements, utilizing a design framework for responsiveness, and including interactive knowledge visualizations. With React’s component-based construction, sustaining and scaling the dashboard over time becomes simpler.

Previous articleHow to Make Portfolio Website in React JS
Asif Ali
Asif Ali
https://www.onlineittuts.com
"Hi, I'm Asif Ali, a developer with a passion for creating cool stuff with code. I've got a lot of experience making software that works well and solves problems. From coming up with ideas to actually building and testing them, I love every part of the process. I pay close attention to detail to make sure everything works smoothly. I enjoy working with different programming languages and collaborating with teams to turn ideas into real projects. I'm always learning and keeping up with the latest tech trends. My goal is to create useful and effective solutions that make a difference."
Facebook Twitter

RELATED ARTICLESMORE FROM AUTHOR

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.