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;
