How To Create A Multi-Page Website Using ReactJS?

Build an Admin Panel using ReactJS

Last Updated : 17 May, 2024

The Admin Panel project is a web application built using ReactJS, a popular JavaScript library for building user interfaces. The Admin Panel is designed to provide a centralized and user-friendly interface. It provides a user interface for managing various aspects of a platform, such as viewing recent articles, checking statistics, and accessing profile settings.

Screenshot-2024-05-10-152154

Prerequisites / Technologies Used

Node.js
npm (Node Package Manager)
React

Approach / Functionalities

Implement a responsive header with a logo and search bar.
Create a navigation menu for easy access to different sections.
Display statistics such as article views, likes, comments, and published articles.
Show a list of recent articles with their views, comments, and status.
Implement a responsive design for mobile and desktop views.

Steps to create the project

Create a new React project using Create React App by running

 npx create-react-app Adminpanel

navigate to that directory

cd Adminpanel

Project Structure

Screenshot-2024-05-10-152712 — Project folder Structure

Create necessary components like Header.js, Nav.js, Main.js insider components folder.
Update the App.js to render the Dashboard component.
Update the index.js to render the App component.
create styles.css for styling.

CSS

/* styles.css */

@import url( 
"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); 

* { 
margin: 0; 
padding: 0; 
box-sizing: border-box; 
font-family: "Poppins", sans-serif; 
} 
:root { 
--background-color1: #fafaff; 
--background-color2: #ffffff; 
--background-color3: #ededed; 
--background-color4: #cad7fda4; 
--primary-color: #4b49ac; 
--secondary-color: #0c007d; 
--Border-color: #3f0097; 
--one-use-color: #3f0097; 
--two-use-color: #5500cb; 
} 
body { 
background-color: var(--background-color4); 
max-width: 100%; 
overflow-x: hidden; 
} 

header { 
height: 70px; 
width: 100vw; 
padding: 0 30px; 
background-color: var(--background-color1); 
position: fixed; 
z-index: 100; 
box-shadow: 1px 1px 15px rgba(161, 182, 253, 0.825); 
display: flex; 
justify-content: space-between; 
align-items: center; 
} 

.logo { 
font-size: 27px; 
font-weight: 600; 
color: rgb(47, 141, 70); 
} 

.icn { 
height: 30px; 
} 
.menuicn { 
cursor: pointer; 
} 

.searchbar, 
.message, 
.logosec { 
display: flex; 
align-items: center; 
justify-content: center; 
} 

.searchbar2 { 
display: none; 
} 

.logosec { 
gap: 60px; 
} 

.searchbar input { 
width: 250px; 
height: 42px; 
border-radius: 50px 0 0 50px; 
background-color: var(--background-color3); 
padding: 0 20px; 
font-size: 15px; 
outline: none; 
border: none; 
} 
.searchbtn { 
width: 50px; 
height: 42px; 
display: flex; 
align-items: center; 
justify-content: center; 
border-radius: 0px 50px 50px 0px; 
background-color: var(--secondary-color); 
cursor: pointer; 
} 

.message { 
gap: 40px; 
position: relative; 
cursor: pointer; 
} 
.circle { 
height: 7px; 
width: 7px; 
position: absolute; 
background-color: #fa7bb4; 
border-radius: 50%; 
left: 19px; 
top: 8px; 
} 
.dp { 
height: 40px; 
width: 40px; 
background-color: #626262; 
border-radius: 50%; 
display: flex; 
align-items: center; 
justify-content: center; 
overflow: hidden; 
} 
.main-container { 
display: flex; 
width: 100vw; 
position: relative; 
top: 70px; 
z-index: 1; 
} 
.dpicn { 
height: 42px; 
} 

.main { 
height: calc(100vh - 70px); 
width: 100%; 
overflow-y: scroll; 
overflow-x: hidden; 
padding: 40px 30px 30px 30px; 
} 

.main::-webkit-scrollbar-thumb { 
background-image: 
        linear-gradient(to bottom, rgb(0, 0, 85), rgb(0, 0, 50)); 
} 
.main::-webkit-scrollbar { 
width: 5px; 
} 
.main::-webkit-scrollbar-track { 
background-color: #9e9e9eb2; 
} 

.box-container { 
display: flex; 
justify-content: space-evenly; 
align-items: center; 
flex-wrap: wrap; 
gap: 50px; 
} 
.nav { 
min-height: 91vh; 
width: 250px; 
background-color: var(--background-color2); 
position: absolute; 
top: 0px; 
left: 00; 
box-shadow: 1px 1px 10px rgba(198, 189, 248, 0.825); 
display: flex; 
flex-direction: column; 
justify-content: space-between; 
overflow: hidden; 
padding: 30px 0 20px 10px; 
} 
.navcontainer { 
height: calc(100vh - 70px); 
width: 250px; 
position: relative; 
overflow-y: scroll; 
overflow-x: hidden; 
transition: all 0.5s ease-in-out; 
} 
.navcontainer::-webkit-scrollbar { 
display: none; 
} 
.navclose { 
width: 80px; 
} 
.nav-option { 
width: 250px; 
height: 60px; 
display: flex; 
align-items: center; 
padding: 0 30px 0 20px; 
gap: 20px; 
transition: all 0.1s ease-in-out; 
} 
.nav-option:hover { 
border-left: 5px solid #a2a2a2; 
background-color: #dadada; 
cursor: pointer; 
} 
.nav-img { 
height: 30px; 
} 

.nav-upper-options { 
display: flex; 
flex-direction: column; 
align-items: center; 
gap: 30px; 
} 

.option1 { 
border-left: 5px solid #010058af; 
background-color: var(--Border-color); 
color: white; 
cursor: pointer; 
} 
.option1:hover { 
border-left: 5px solid #010058af; 
background-color: var(--Border-color); 
} 
.box { 
height: 130px; 
width: 230px; 
border-radius: 20px; 
box-shadow: 3px 3px 10px rgba(0, 30, 87, 0.751); 
padding: 20px; 
display: flex; 
align-items: center; 
justify-content: space-around; 
cursor: pointer; 
transition: transform 0.3s ease-in-out; 
} 
.box:hover { 
transform: scale(1.08); 
} 

.box:nth-child(1) { 
background-color: var(--one-use-color); 
} 
.box:nth-child(2) { 
background-color: var(--two-use-color); 
} 
.box:nth-child(3) { 
background-color: var(--one-use-color); 
} 
.box:nth-child(4) { 
background-color: var(--two-use-color); 
} 

.box img { 
height: 50px; 
} 
.box .text { 
color: white; 
} 
.topic { 
font-size: 13px; 
font-weight: 400; 
letter-spacing: 1px; 
} 

.topic-heading { 
font-size: 30px; 
letter-spacing: 3px; 
} 

.report-container { 
min-height: 300px; 
max-width: 1200px; 
margin: 70px auto 0px auto; 
background-color: #ffffff; 
border-radius: 30px; 
box-shadow: 3px 3px 10px rgb(188, 188, 188); 
padding: 0px 20px 20px 20px; 
} 
.report-header { 
height: 80px; 
width: 100%; 
display: flex; 
align-items: center; 
justify-content: space-between; 
padding: 20px 20px 10px 20px; 
border-bottom: 2px solid rgba(0, 20, 151, 0.59); 
} 

.recent-Articles { 
font-size: 30px; 
font-weight: 600; 
color: #5500cb; 
} 

.view { 
height: 35px; 
width: 90px; 
border-radius: 8px; 
background-color: #5500cb; 
color: white; 
font-size: 15px; 
border: none; 
cursor: pointer; 
} 

.report-body { 
max-width: 1160px; 
overflow-x: auto; 
padding: 20px; 
} 
.report-topic-heading, 
.item1 { 
width: 1120px; 
display: flex; 
justify-content: space-between; 
align-items: center; 
} 
.t-op { 
font-size: 18px; 
letter-spacing: 0px; 
} 

.items { 
width: 1120px; 
margin-top: 15px; 
} 

.item1 { 
margin-top: 20px; 
} 
.t-op-nextlvl { 
font-size: 14px; 
letter-spacing: 0px; 
font-weight: 600; 
} 

.label-tag { 
width: 100px; 
text-align: center; 
background-color: rgb(0, 177, 0); 
color: white; 
border-radius: 4px; 
}
/* Responsive CSS Here */
@media screen and (max-width: 950px) { 
    .nav-img { 
        height: 25px; 
    } 
    .nav-option { 
        gap: 30px; 
    } 
    .nav-option h3 { 
        font-size: 15px; 
    } 
    .report-topic-heading, 
    .item1, 
    .items { 
        width: 800px; 
    } 
    } 
    
    @media screen and (max-width: 850px) { 
    .nav-img { 
        height: 30px; 
    } 
    .nav-option { 
        gap: 30px; 
    } 
    .nav-option h3 { 
        font-size: 20px; 
    } 
    .report-topic-heading, 
    .item1, 
    .items { 
        width: 700px; 
    } 
    .navcontainer { 
        width: 100vw; 
        position: absolute; 
        transition: all 0.6s ease-in-out; 
        top: 0; 
        left: -100vw; 
    } 
    .nav { 
        width: 100%; 
        position: absolute; 
    } 
    .navclose { 
        left: 00px; 
    } 
    .searchbar { 
        display: none; 
    } 
    .main { 
        padding: 40px 30px 30px 30px; 
    } 
    .searchbar2 { 
        width: 100%; 
        display: flex; 
        margin: 0 0 40px 0; 
        justify-content: center; 
    } 
    .searchbar2 input { 
        width: 250px; 
        height: 42px; 
        border-radius: 50px 0 0 50px; 
        background-color: var(--background-color3); 
        padding: 0 20px; 
        font-size: 15px; 
        border: 2px solid var(--secondary-color); 
    } 
    } 
    
    @media screen and (max-width: 490px) { 
    .message { 
        display: none; 
    } 
    .logosec { 
        width: 100%; 
        justify-content: space-between; 
    } 
    .logo { 
        font-size: 20px; 
    } 
    .menuicn { 
        height: 25px; 
    } 
    .nav-img { 
        height: 25px; 
    } 
    .nav-option { 
        gap: 25px; 
    } 
    .nav-option h3 { 
        font-size: 12px; 
    } 
    .nav-upper-options { 
        gap: 15px; 
    } 
    .recent-Articles { 
        font-size: 20px; 
    } 
    .report-topic-heading, 
    .item1, 
    .items { 
        width: 550px; 
    } 
    } 
    
    @media screen and (max-width: 400px) { 
    .recent-Articles { 
        font-size: 17px; 
    } 
    .view { 
        width: 60px; 
        font-size: 10px; 
        height: 27px; 
    } 
    .report-header { 
        height: 60px; 
        padding: 10px 10px 5px 10px; 
    } 
    .searchbtn img { 
        height: 20px; 
    } 
    } 
    
    @media screen and (max-width: 320px) { 
    .recent-Articles { 
        font-size: 12px; 
    } 
    .view { 
        width: 50px; 
        font-size: 8px; 
        height: 27px; 
    } 
    .report-header { 
        height: 60px; 
        padding: 10px 5px 5px 5px; 
    } 
    .t-op { 
        font-size: 12px; 
    } 
    .t-op-nextlvl { 
        font-size: 10px; 
    } 
    .report-topic-heading, 
    .item1, 
    .items { 
        width: 300px; 
    } 
    .report-body { 
        padding: 10px; 
    } 
    .label-tag { 
        width: 70px; 
    } 
    .searchbtn { 
        width: 40px; 
    } 
    .searchbar2 input { 
        width: 180px; 
    } 
    }

JavaScript

//Header.js

import React from 'react';

const Header = () => {
    return (
        <header>
            <div class="logosec">
                <div class="logo">GeeksForGeeks</div>
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20221210182541/Untitled-design-(30).png"
                    class="icn menuicn"
                    id="menuicn"
                    alt="menu-icon" />
            </div>

            <div class="searchbar">
                <input type="text"
                    placeholder="Search" />
                <div class="searchbtn">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20221210180758/Untitled-design-(28).png"
                        class="icn srchicn"
                        alt="search-icon" />
                </div>
            </div>

            <div class="message">
                <div class="circle"></div>
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20221210183322/8.png"
                    class="icn"
                    alt="" />
                <div class="dp">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20221210180014/profile-removebg-preview.png"
                        class="dpicn"
                        alt="dp" />
                </div>
            </div>

        </header>
    );
};

export default Header;

JavaScript

//Nav.js

import React from 'react';

const Nav = () => {
    return (
        <div className="navcontainer">
            <nav className="nav">
                <div className="nav-upper-options">
                    <div className="nav-option option1">
                        <img
                            src="https://media.geeksforgeeks.org/wp-content/uploads/20221210182148/Untitled-design-(29).png"
                            className="nav-img"
                            alt="dashboard"
                        />
                        <h3>Dashboard</h3>
                    </div>

                    <div className="option2 nav-option">
                        <img
                            src="https://media.geeksforgeeks.org/wp-content/uploads/20221210183322/9.png"
                            className="nav-img"
                            alt="articles"
                        />
                        <h3>Articles</h3>
                    </div>

                    <div className="nav-option option3">
                        <img
                            src="https://media.geeksforgeeks.org/wp-content/uploads/20221210183320/5.png"
                            className="nav-img"
                            alt="report"
                        />
                        <h3>Report</h3>
                    </div>

                    <div className="nav-option option4">
                        <img
                            src="https://media.geeksforgeeks.org/wp-content/uploads/20221210183321/6.png"
                            className="nav-img"
                            alt="institution"
                        />
                        <h3>Institution</h3>
                    </div>

                    <div className="nav-option option5">
                        <img
                            src="https://media.geeksforgeeks.org/wp-content/uploads/20221210183323/10.png"
                            className="nav-img"
                            alt="blog"
                        />
                        <h3>Profile</h3>
                    </div>

                    <div className="nav-option option6">
                        <img
                            src="https://media.geeksforgeeks.org/wp-content/uploads/20221210183320/4.png"
                            className="nav-img"
                            alt="settings"
                        />
                        <h3>Settings</h3>
                    </div>

                    <div className="nav-option logout">
                        <img
                            src="https://media.geeksforgeeks.org/wp-content/uploads/20221210183321/7.png"
                            className="nav-img"
                            alt="logout"
                        />
                        <h3>Logout</h3>
                    </div>
                </div>
            </nav>
        </div>
    );
};

export default Nav;

JavaScript

//App.js

import React from 'react';
import './styles.css';
import Header from './components/Header';
import Nav from './components/Nav';
import Main from './components/Main';

function App() {
  return (
    <div>
      <Header />
      <div class="main-container">
      <Nav />
      <Main />
      </div>
    </div>
  );
}

export default App;

JavaScript

//Main.js

import React from 'react';

const Main = () => {
  return (
    <div className="main">
      <div className="searchbar2">
        <input type="text" name="" id="" placeholder="Search" />
        <div className="searchbtn">
          <img
            src="https://media.geeksforgeeks.org/wp-content/uploads/20221210180758/Untitled-design-(28).png"
            className="icn srchicn"
            alt="search-button"
          />
        </div>
      </div>

      <div className="box-container">
        <div className="box box1">
          <div className="text">
            <h2 className="topic-heading">60.5k</h2>
            <h2 className="topic">Article Views</h2>
          </div>
          <img
            src="https://media.geeksforgeeks.org/wp-content/uploads/20221210184645/Untitled-design-(31).png"
            alt="Views"
          />
        </div>

        <div className="box box2">
          <div className="text">
            <h2 className="topic-heading">150</h2>
            <h2 className="topic">Likes</h2>
          </div>
          <img
            src="https://media.geeksforgeeks.org/wp-content/uploads/20221210185030/14.png"
            alt="likes"
          />
        </div>

        <div className="box box3">
          <div className="text">
            <h2 className="topic-heading">320</h2>
            <h2 className="topic">Comments</h2>
          </div>
          <img
            src="https://media.geeksforgeeks.org/wp-content/uploads/20221210184645/Untitled-design-(32).png"
            alt="comments"
          />
        </div>

        <div className="box box4">
          <div className="text">
            <h2 className="topic-heading">70</h2>
            <h2 className="topic">Published</h2>
          </div>
          <img
            src="https://media.geeksforgeeks.org/wp-content/uploads/20221210185029/13.png"
            alt="published"
          />
        </div>
      </div>

      <div className="report-container">
        <div className="report-header">
          <h1 className="recent-Articles">Recent Articles</h1>
          <button className="view">View All</button>
        </div>

        <div className="report-body">
          <div className="report-topic-heading">
            <h3 className="t-op">Article</h3>
            <h3 className="t-op">Views</h3>
            <h3 className="t-op">Comments</h3>
            <h3 className="t-op">Status</h3>
          </div>

          <div className="items">
            <div className="item1">
              <h3 className="t-op-nextlvl">Article 73</h3>
              <h3 className="t-op-nextlvl">2.9k</h3>
              <h3 className="t-op-nextlvl">210</h3>
              <h3 className="t-op-nextlvl label-tag">Published</h3>
            </div>

            <div className="item1">
              <h3 className="t-op-nextlvl">Article 72</h3>
              <h3 className="t-op-nextlvl">1.5k</h3>
              <h3 className="t-op-nextlvl">360</h3>
              <h3 className="t-op-nextlvl label-tag">Published</h3>
            </div>

            <div className="item1">
              <h3 className="t-op-nextlvl">Article 71</h3>
              <h3 className="t-op-nextlvl">1.1k</h3>
              <h3 className="t-op-nextlvl">150</h3>
              <h3 className="t-op-nextlvl label-tag">Published</h3>
            </div>

            <div className="item1">
              <h3 className="t-op-nextlvl">Article 70</h3>
              <h3 className="t-op-nextlvl">1.2k</h3>
              <h3 className="t-op-nextlvl">420</h3>
              <h3 className="t-op-nextlvl label-tag">Published</h3>
            </div>

            <div className="item1">
              <h3 className="t-op-nextlvl">Article 69</h3>
              <h3 className="t-op-nextlvl">2.6k</h3>
              <h3 className="t-op-nextlvl">190</h3>
              <h3 className="t-op-nextlvl label-tag">Published</h3>
            </div>

            <div className="item1">
              <h3 className="t-op-nextlvl">Article 68</h3>
              <h3 className="t-op-nextlvl">1.9k</h3>
              <h3 className="t-op-nextlvl">390</h3>
              <h3 className="t-op-nextlvl label-tag">Published</h3>
            </div>

            <div className="item1">
              <h3 className="t-op-nextlvl">Article 67</h3>
              <h3 className="t-op-nextlvl">1.2k</h3>
              <h3 className="t-op-nextlvl">580</h3>
              <h3 className="t-op-nextlvl label-tag">Published</h3>
            </div>

            <div className="item1">
              <h3 className="t-op-nextlvl">Article 66</h3>
              <h3 className="t-op-nextlvl">3.6k</h3>
              <h3 className="t-op-nextlvl">160</h3>
              <h3 className="t-op-nextlvl label-tag">Published</h3>
            </div>

            <div className="item1">
              <h3 className="t-op-nextlvl">Article 65</h3>
              <h3 className="t-op-nextlvl">1.3k</h3>
              <h3 className="t-op-nextlvl">220</h3>
              <h3 className="t-op-nextlvl label-tag">Published</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Main;

JavaScript

//index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Steps to run the application:

Navigate to the project directory.

npm start

Open a web browser and go to http://localhost:3000 to view the application.

Output:

How To Create A Multi-Page Website Using ReactJS?

A

ashishrew7vh

Improve

Article Tags :

Similar Reads

ReactJS | Using Babel

Now we know that what Babel is, we will focus on how to install it on your machine using node. Babel can be installed easily after following these simple steps.Â Requirements :Â Â A code editor like atom, sublime text or Visual studio code.Node should be installed on the machine with npm too. We will

Build an Online Code Compiler using React.js and Node.js

In this article, we will learn how to build an online code compiler using React.js as frontend and Express.js as backend. Users will be able to write C, C++, Python, and Java code with proper syntax highlighting as well as compile and execute it online. The main objective of building an online compi

How To Create A Multi-Page Website Using ReactJS?

Multi-page website using ReactJS is the core for building complex web applications that require multiple views or pages. Previously where each page reloads entirely, ReactJS allows you to navigate between different pages without reloading the whole page thanks to libraries like React Router.In this

Recipe Finder using ReactJS

In this project article, we will be creating a recipe finder application using the React library. We have given the application the name "GeeksforGeeks Recipe Finder". This application is completely developed in ReactJS and mainly focuses on the functional components and also manages the various sta

ReactJS Onsen UI Page Component

ReactJS Onsen-UI is a popular front-end library with a set of React components that are designed to developing HTML5 hybrid and mobile web apps in a beautiful and efficient way. Page components are used for handling the entire page. The content can be scrolled. We can use the following approach in R

ReactJS Onsen UI List Component

ReactJS Onsen-UI is a popular front-end library with a set of React components that are designed to developing HTML5 hybrid and mobile web apps in a beautiful and efficient way. List components allow the user to display a list. We can use the following approach in ReactJS to use the Onsen-UI List Co

Job Board Using React

Job Board application using React and Rapidapi JSearch allows users to search, filter and view job listings posted on LinkedIn, Indeed, Glassdoor, ZipRecruiter, BeBee and many others in a single job board. Users can search for jobs by keyword, filter jobs by location or category and see detailed job

Contact Us Page using ReactJS and Tailwind

The Contact Us page is crucial for user interaction, allowing users to connect with the website owner or customer support, submit feedback, and suggestions, and access departmental contact information.Preview of final output: Let us have a look at how the final output will look like.Prerequisites:Re

Material UI | ReactJS AppBar

Material-UI is a library that provides React components for easy and fast web development. We can easily put together really aesthetic and functional components and make it work according to our use as all the components are configurable. This saves a lot of time as we don't have to struggle with CS

Create ToDo App using ReactJS

In this article, we will create a to-do app to understand the basics of ReactJS. We will be working with class based components in this application and use the React-Bootstrap module to style the components. This to-do list can add new tasks we can also delete the tasks by clicking on them. The logi