Routing

Import React from ‘react’;

Import { BrowserRouter as Router, Routes, Route } from ‘react-router-

dom’;

Import Home from ‘./pages/Home’;

Import Login from ‘./components/Auth/Login’;

Import Register from ‘./components/Auth/Register’;

Import AdminPanel from ‘./components/Admin/AdminPanel’;

Import NotFound from ‘./pages/NotFound’;

Function App() {

Return (

<Router>

<Routes>

<Route path=”/” element={<Home />} />

<Route path=”/login” element={<Login />} />

<Route path=”/register” element={<Register />} />

<Route path=”/admin” element={<AdminPanel />} />

<Route path=”*” element={<NotFound />} />

</Routes>

</Router>

);

Export default App;

Home page

Import React, { useState, useEffect } from ‘react’;

Import axios from ‘axios’;

Import FlowerCard from ‘../components/Flowers/FlowerCard’;

Function Home() {

Const [flowers, setFlowers] = useState([]);

useEffect(() => {

axios.get(‘http://localhost:5000/api/flowers’)

.then(response => setFlowers(response.data))

.catch(error => console.error(error));

}, []);

Return (

<div className=”container mt-5”>

<h1 className=”text-center mb-4”>Flower Garden</h1>

<div className=”row”>

{flowers.map(flower => (

<FlowerCard key={flower._id} flower={flower} />

))}

</div>

</div>

);

Export default Home;

Flower card

Import React from ‘react’;

Function FlowerCard({ flower }) {

Return (

<div className=”col-md-4 mb-4”>

 <div className=”card”>

<img src={flower.image} className=”card-img-top”

alt={flower.name} />

<div className=”card-body”>

<h5 className=”card-title”>{flower.name}</h5>

<p className=”card-text”>{flower.description}</p>

<p className=”card-text”><strong>Price: </strong>$

{flower.price}</p>

<button className=”btn btn-primary”>Buy Now</button>

</div>

</div>

</div>

);

Export default FlowerCard;

Login page

Import React, { useState } from ‘react’;

Import axios from ‘axios’;

Function Login() {

Const [email, setEmail] = useState(‘’);

Const [password, setPassword] = useState(‘’);

Const handleLogin = async (e) => {

e.preventDefault();

try {

const response = await

axios.post(‘http://localhost:5000/api/auth/login’, { email, password });

localStorage.setItem(‘token’, response.data.token);
 alert(‘Login successful’);

window.location = ‘/’;

} catch (error) {

Alert(‘Login failed’);

};

Return (

<div className=”container mt-5”>

<h2>Login</h2>

<form onSubmit={handleLogin}>

<div className=”mb-3”>

<label>Email</label>

<input type=”email” className=”form-control” value={email}

onChange={(e) => setEmail(e.target.value)} required />

</div>

<div className=”mb-3”>

<label>Password</label>

<input type=”password” className=”form-control”

value={password} onChange={(e) => setPassword(e.target.value)}
required />

</div>

<button type=”submit” className=”btn

btn-primary”>Login</button>

</form>

</div>

);

Export default Login;

Register page

Import React, { useState } from ‘react’;

Import axios from ‘axios’;

Function Register() {

Const [name, setName] = useState(‘’);

Const [email, setEmail] = useState(‘’);

Const [password, setPassword] = useState(‘’);

Const handleRegister = async (e) => {

e.preventDefault();

try {

await axios.post(‘http://localhost:5000/api/auth/register’, { name,

email, password });

alert(‘Registration successful’);

window.location = ‘/login’;

} catch (error) {

Alert(‘Registration failed’);

};

Return (

<div className=”container mt-5”>

<h2>Register</h2>

<form onSubmit={handleRegister}>

<div className=”mb-3”>

<label>Name</label>

<input type=”text” className=”form-control” value={name}

onChange={(e) => setName(e.target.value)} required />

</div>
 <div className=”mb-3”>

<label>Email</label>

<input type=”email” className=”form-control” value={email}

onChange={(e) => setEmail(e.target.value)} required />

</div>

<div className=”mb-3”>

<label>Password</label>

<input type=”password” className=”form-control”

value={password} onChange={(e) => setPassword(e.target.value)}
required />

</div>

<button type=”submit” className=”btn

btn-primary”>Register</button>

</form>

</div>

);

Export default Register;

Admin panel

Import React from ‘react’;

Function AdminPanel() {

Return (

<div className=”container mt-5”>

<h1>Admin Panel</h1>

<p>Manage flowers, users, and the website here.</p>

{/* Add admin functionalities here */}

</div>

);
}

Export default AdminPanel;

Admin

Import React, { useState, useEffect } from ‘react’;

Import axiosInstance from ‘../../axiosInstance’;

Function AdminPanel() {

Const [flowers, setFlowers] = useState([]);

Const [users, setUsers] = useState([]);

// Fetch flowers and users

useEffect(() => {

axiosInstance.get(‘/flowers’)

.then(response => setFlowers(response.data))

.catch(error => console.error(error));

axiosInstance.get(‘/admin/users’)

.then(response => setUsers(response.data))

.catch(error => console.error(error));

}, []);

// Delete a flower

Const deleteFlower = (id) => {

axiosInstance.delete(`/admin/flowers/${id}`)

.then(() => {

Alert(‘Flower deleted successfully’);

setFlowers(flowers.filter(flower => flower._id !== id));

})
 .catch(error => alert(‘Failed to delete flower’));

};

// Delete a user

Const deleteUser = (id) => {

axiosInstance.delete(`/admin/users/${id}`)

.then(() => {

Alert(‘User deleted successfully’);

setUsers(users.filter(user => user._id !== id));

})

.catch(error => alert(‘Failed to delete user’));

};

Return (

<div className=”container mt-5”>

<h1>Admin Panel</h1>

{/* Flowers Management */}

<h2>Flowers</h2>

<table className=”table”>

<thead>

<tr>

<th>Name</th>

<th>Price</th>

<th>Actions</th>

</tr>

</thead>

<tbody>

{flowers.map(flower => (
 <tr key={flower._id}>

<td>{flower.name}</td>

<td>${flower.price}</td>

<td>

<button className=”btn btn-danger” onClick={() =>

deleteFlower(flower._id)}>Delete</button>

</td>

</tr>

))}

</tbody>

</table>

{/* Users Management */}

<h2>Users</h2>

<table className=”table”>

<thead>

<tr>

<th>Name</th>

<th>Email</th>

<th>Actions</th>

</tr>

</thead>

<tbody>

{users.map(user => (

<tr key={user._id}>

<td>{user.name}</td>

<td>{user.email}</td>

<td>

<button className=”btn btn-danger” onClick={() =>

deleteUser(user._id)}>Delete</button>
 </td>

</tr>

))}

</tbody>

</table>

</div>

);

Export default AdminPanel;

Front-end route

Import React from ‘react’;

Import { BrowserRouter as Router, Routes, Route, Navigate } from ‘react-

router-dom’;

Import Home from ‘./pages/Home’;

Import Login from ‘./components/Auth/Login’;

Import Register from ‘./components/Auth/Register’;

Import AdminPanel from ‘./components/Admin/AdminPanel’;

Const isAdmin = () => {

Const token = localStorage.getItem(‘token’);

Const userRole = JSON.parse(atob(token.split(‘.’)[1])).role; // Decode

token

Return userRole === ‘admin’;

};

Function App() {

Return (

<Router>

<Routes>
 <Route path=”/” element={<Home />} />

<Route path=”/login” element={<Login />} />

<Route path=”/register” element={<Register />} />

<Route

Path=”/admin”

Element={isAdmin() ? <AdminPanel /> : <Navigate to=”/” />}

/>

</Routes>

</Router>

);

Export default App;