Introduction
creating visually appealing and functional admin panels or e-commerce dashboards is crucial for engaging users and efficiently managing content. In this article, we'll explore how to build a dynamic dashboard using React and Bootstrap, focusing on key features like carousels, promotional cards, countdown timers, and product lists.
Setting Up the Project
To begin, ensure you have Node.js installed on your machine. Initialize a new React project with Create React App.
npx create-react-app e-commerce-dashboard
cd e-commerce-dashboard
Next, install Bootstrap and React-Bootstrap for styling and UI components.
npm install bootstrap react-bootstrap
Implementing Key Features
Carousel for Featured Products
The Carousel component from react-bootstrap allows you to display a rotating set of images and captions. Here's how you can integrate it.
import Carousel from 'react-bootstrap/Carousel';
import Card from 'react-bootstrap/Card';
import CountdownTimer from '../CountdownTimer';
import ListGroup from 'react-bootstrap/ListGroup';
import { Link } from 'react-router-dom';
function DarkVariantExample() {
const THREE_DAYS_IN_MS = 3 * 24 * 60 * 60 * 1000;
const SEVEN_DAYS_IN_MS = 7 * 24 * 60 * 60 * 1000;
const NOW_IN_MS = new Date().getTime();
const dateTimeAfterThreeDays = NOW_IN_MS + THREE_DAYS_IN_MS;
const dateTimeAfterSevenDays = NOW_IN_MS + SEVEN_DAYS_IN_MS;
return (
<div className="container">
<div className="row">
<div className="col-md-6">
<Carousel data-bs-theme="dark">
<Carousel.Item>
<img
className="d-block w-100"
src="https://kachabazar-store-nine.vercel.app/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fahossain%2Fimage%2Fupload%2Fv1697688491%2Fsettings%2Fslider-2_o6aezc.jpg&w=1080&q=75"
alt="First slide"
/>
<Carousel.Caption>
<h3>Best Quality Product<br />Guaranteed!</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img
className="d-block w-100"
src="https://kachabazar-store-nine.vercel.app/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fahossain%2Fimage%2Fupload%2Fv1697688491%2Fsettings%2Fslider-2_o6aezc.jpg&w=1080&q=75"
alt="First slide"
/>
<Carousel.Caption>
<h3>Best Different Type of <br />Grocery Store!</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum1.</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img
className="d-block w-100"
src="https://kachabazar-store-nine.vercel.app/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fahossain%2Fimage%2Fupload%2Fv1697688491%2Fsettings%2Fslider-2_o6aezc.jpg&w=1080&q=75"
alt="First slide"
/>
<Carousel.Caption>
<h3>Best Quality Product<br />Guaranteed!</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum2.</p>
</Carousel.Caption>
</Carousel.Item>
</Carousel>
</div>
<div className="col-md-6">
<div className="row">
<div className="col-md-12">
<Card style={{ height: '15rem' }}>
<div className="row">
<div className="col-md-3">
<img
className="d-block w-100"
id="imgid"
src="https://kachabazar-store-nine.vercel.app/_next/image?url=https%3A%2F%2Fi.ibb.co%2F4thS4Z1%2Fins2.jpg&w=128&q=75"
alt="First slide"
/>
</div>
<div className="col-md-5">
<div className="flex items-center font-serif">
<h6 className="pl-1 text-base font-medium text-gray-600">
<span className="text-lg md:text-xl lg:text-xl text-red-500 font-bold">
<span>10%</span>
</span> Off
</h6>
<div className="ml-2">
<span className="text-emerald-600 inline-block px-4 py-1 rounded-full font-medium text-xs bg-emerald-100">
Active
</span>
</div>
</div>
<h4 className="pl-1 font-serif text-base text-gray-700 leading-6 font-semibold mb-2">
Summer Gift Voucher
</h4>
<div>
<CountdownTimer targetDate={dateTimeAfterThreeDays} />
</div>
</div>
<div className="col-md-4">
<div className="w-full">
<div className="block">
<div className="font-serif border border-dashed bg-emerald-50 py-1 border-emerald-300 rounded-lg text-center block">
<button className="block w-full">
<span className="uppercase font-serif font-semibold text-sm leading-7 text-emerald-600">
SUMMER24
</span>
</button>
</div>
</div>
<p className="text-xs leading-4 text-gray-500 mt-2">
* This coupon applies when shopping more than{' '}
<span className="font-bold">$1000</span>
</p>
</div>
</div>
</div>
</Card>
</div>
</div>
</div>
</div>
<div className="ctntxxt">
<Card>
<Card.Body>
<h5 className="qlty">100% Natural Quality Organic Product</h5>
<p className="text-gray-500">
See our latest discounted products here and get a special discount product
</p>
</Card.Body>
</Card>
</div>
<div className="listofpro">
<div className="row">
<div className="col-md-2">
<div className="lst1">
<div className="row">
<div className="col-md-12">
<Card className="vdsr">
<div className="wltvi">
<Card.Body className="dsfsdfs">
<div className="lstimcont">
<img
className="d-block w-100"
id="lst"
src="https://kachabazar-store-nine.vercel.app/_next/image?url=https%3A%2F%2Fi.ibb.co%2F4thS4Z1%2Fins2.jpg&w=128&q=75"
alt="First slide"
/>
<Link to="/contactus">
<p className="ftd">Food Cupboard</p>
</Link>
</div>
</Card.Body>
</div>
</Card>
</div>
</div>
</div>
</div>
<div className="col-md-2">
<div className="lst1">
<div className="row">
<div className="col-md-12">
<Card className="vdsr">
<div className="wltvi">
<Card.Body className="dsfsdfs">
<div className="lstimcont">
<img
className="d-block w-100"
id="lst1"
src="https://kachabazar-store-nine.vercel.app/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fahossain%2Fimage%2Fupload%2Fv1715166356%2Fcategory%2FBeemor2.jpg&w=48&q=75"
alt="First slide"
/>
<Link to="/contactus">
<p className="ftd">fooF</p>
</Link>
</div>
</Card.Body>
</div>
</Card>
</div>
</div>
</div>
</div>
<div className="col-md-2">
<div className="lst1">
<div className="row">
<div className="col-md-12">
<Card className="vdsr">
<div className="wltvi">
<Card.Body className="dsfsdfs">
<div className="lstimcont">
<img
className="d-block w-100"
id="lst2"
src="https://kachabazar-store-nine.vercel.app/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fahossain%2Fimage%2Fupload%2Fv1658340705%2Fcategory%2520icon%2Fcarp-fish_paxzrt.png&w=48&q=75"
alt="First slide"
/>
<Link to="/contactus">
<p className="ftd">Fish & Meat</p>
</Link>
<div className="culp"></div>
</div>
</Card.Body>
</div>
</Card>
</div>
</div>
</div>
</div>
<div className="col-md-2">
<div className="lst1">
<div className="row">
<div className="col-md-12">
<Card className="vdsr">
<div className="wltvi">
<Card.Body className="dsfsdfs">
<div className="lstimcont">
<img
className="d-block w-100"
id="lst3"
src="https://kachabazar-store-nine.vercel.app/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fahossain%2Fimage%2Fupload%2Fv1658340704%2Fcategory%2520icon%2Fcabbage_n59uv3.png&w=48&q=75"
alt="First slide"
/>
<Link to="/contactus">
<p className="ftd">Fruit & Vegetables</p>
</Link>
</div>
</Card.Body>
</div>
</Card>
</div>
</div>
</div>
</div>
<div className="col-md-2">
<div className="lst1">
<div className="row">
<div className="col-md-12">
<Card className="vdsr">
<div className="wltvi">
<Card.Body className="dsfsdfs">
<div className="lstimcont">
<img
className="d-block w-100"
id="lst4"
src="https://kachabazar-store-nine.vercel.app/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fahossain%2Fimage%2Fupload%2Fv1658340704%2Fcategory%2520icon%2Ffrying-pan_vglm5c.png&w=48&q=75"
alt="First slide"
/>
<Link to="/contactus">
<p className="ftd">Cooking Essentials</p>
</Link>
</div>
</Card.Body>
</div>
</Card>
</div>
</div>
</div>
</div>
<div className="col-md-2">
<div className="lst1">
<div className="row">
<div className="col-md-12">
<Card className="vdsr">
<div className="wltvi">
<Card.Body className="dsfsdfs">
<div className="lstimcont">
<img
className="d-block w-100"
id="lst5"
src="https://kachabazar-store-nine.vercel.app/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fahossain%2Fimage%2Fupload%2Fv1658340705%2Fcategory%2520icon%2Fcookie_1_ugipqa.png&w=48&q=75"
alt="First slide"
/>
<Link to="/contactus">
<p className="ftd">Biscuits & Cakes</p>
</Link>
</div>
</Card.Body>
</div>
</Card>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
export default DarkVariantExample;
Install Angular CLI
Angular CLI simplifies Angular project setup and management. Install it globally if not already installed.
npm install -g @angular/cli@17
Create a New Angular Project
Use Angular CLI to generate a new Angular project.
ng new admin-panel-angular
cd admin-panel-angular
Install Bootstrap
Angular 17 integrates seamlessly with Bootstrap for styling and layout. Install Bootstrap using npm.
npm install [email protected]
Generate Components
Use Angular CLI to generate necessary components for your admin panel, such as a dashboard, sidebar, header, etc. For example.
ng generate component dashboard
ng generate component sidebar
ng generate component header
Implementing Bootstrap Components
Utilize Bootstrap components like cards, navbars, modals, and forms within your Angular components.
Here’s an example of integrating a card component in Angular.
- Configure Routing: Implement Angular Router for navigation between different components/pages of your admin panel
- Create Navigation Links: Use the Angular RouterLink directive in your sidebar or header components to navigate between different sections of your admin panel.
- Integrate with Backend Services: Use Angular Services to fetch data from APIs and provide dynamic content to your admin panel.
Conclusion
you can create a robust admin panel using Angular 17 and Bootstrap, leveraging Angular's powerful features and Bootstrap's responsive UI components. Customize further based on your project requirements, add authentication, form validations, and other functionalities as needed to build a comprehensive admin interface.