FSWD
EX:5-SELLING APP
App.js
import React from 'react';
import { BrowserRouter as Router, Route, Routes } from
'react-router-dom';
import Navbar from './components/Navbar';
import Home from './components/Home';
import Login from './components/Auth/Login';
import Register from './components/Auth/Register';
import ListingList from './components/Listings/ListingList';
import ListingForm from './components/Listings/ListingForm';
function App() {
return (
<Router>
<Navbar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/login" element={<Login />} />
<Route path="/register" element={<Register />} />
<Route path="/listings" element={<ListingList />} />
<Route path="/listings/new" element={<ListingForm />} />
</Routes>
</Router>
);
export default App;
Style.css
.App {
text-align: center;
/* Global Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
/* Navbar Styles */
nav {
background-color: #333;
color: #fff;
padding: 1rem;
nav h1 {
display: inline;
margin-right: 2rem;
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 1rem;
nav a {
color: #360ee6;
text-decoration: none;
nav a:hover {
text-decoration: underline;
/* Home Page Styles */
h2 {
color: #333;
margin: 2rem 0;
}
/* Listing Styles */
ul {
list-style-type: none;
padding: 0;
li {
background: white;
margin: 1rem 0;
padding: 1rem;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
button {
background-color: #007bff;
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 5px;
cursor: pointer;
button:hover {
background-color: #0056b3;
/* Form Styles */
form {
background: white;
padding: 1.5rem;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
margin: 2rem 0;
form input, form textarea {
width: 100%;
padding: 0.5rem;
margin: 0.5rem 0;
border: 1px solid
#ccc; border-radius:
5px;
form button {
width: 100%;
/* Error and Success Messages */
p {
margin: 0.5rem 0;
.error {
color: red;
.success {
color: green;
}
li {
background: white;
margin: 1rem 0;
padding: 1rem;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center; /* Center items vertically */
li img {
width: 150px; /* Set the width to 150 pixels */
height: 150px; /* Set the height to 150 pixels
*/
object-fit: cover; /* Ensures the image covers the box, cropping
if necessary */
margin-right: 1rem; /* Space between image and text
*/ border-radius: 10px; /* Rounded corners */
}
Index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './styles.css';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
Components–Home.js
import React from 'react';
const Home = () => {
return (
<div>
<h2>Welcome to the Selling App</h2>
<p>Buy and sell used products easily!</p>
</div>
);
};
export default Home;
Components–Navbar.js
import React from 'react';
import { Link } from 'react-router-dom';
const Navbar = () => {
return (
<nav>
<h1>SELLING APP</h1>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/login">Login</Link></li>
<li><Link to="/register">Register</Link></li>
<li><Link to="/listings">Listings</Link></li>
<li><Link to="/listings/new">New Listing</Link></li>
</ul>
</nav>
);
};
export default Navbar;
Components–Auth–Login.js
import React, { useState } from 'react';
import axios from 'axios';
const Login = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState('');
const handleSubmit = async (e) => {
e.preventDefault();
try {
// Replace with your backend API endpoint
const response = await axios.post('/api/auth/login', { email,
password });
// Handle successful login (e.g., save token, redirect)
console.log('Login successful', response.data);
} catch (err) {
setError('Invalid credentials. Please try again.');
}
};
return (
<div>
<h2>Login</h2>
{error && <p style={{ color: 'red' }}>{error}</p>}
<form onSubmit={handleSubmit}>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="Email"
required
/>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="Password"
required
/>
<button type="submit">Login</button>
</form>
</div>
);
};
export default Login;
Components–Auth–Register.js
import React, { useState } from 'react';
import axios from 'axios';
const Register = () => {
const [username, setUsername] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState('');
const [success, setSuccess] = useState('');
const handleSubmit = async (e) => {
e.preventDefault();
try {
// Replace with your backend API endpoint
const response = await axios.post('/api/auth/register', {
username, email, password });
setSuccess('Registration successful! Please log in.');
setError('');
// Clear form fields after successful registration
setUsername('');
setEmail('');
setPassword('');
} catch (err) {
setError('Registration failed. Please try again.');
setSuccess('');
}
};
return (
<div>
<h2>Register</h2>
{error && <p style={{ color: 'red' }}>{error}</p>}
{success && <p style={{ color: 'green' }}>{success}</p>}
<form onSubmit={handleSubmit}>
<input
type="text"
value={username}
onChange={(e) => setUsername(e.target.value)}
placeholder="Username"
required
/>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="Email"
required
/>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="Password"
required
/>
<button type="submit">Register</button>
</form>
</div>
);
};
export default Register;
Components–Listings–ListingForm.js
import React, { useState } from 'react';
const ListingForm = () => {
const [title, setTitle] = useState('');
const [description, setDescription] = useState('');
const [price, setPrice] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
// Logic to handle form submission (e.g., API call)
console.log({ title, description, price });
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={title}
onChange={(e) => setTitle(e.target.value)}
placeholder="Title"
required
/>
<textarea
value={description}
onChange={(e) => setDescription(e.target.value)}
placeholder="Description"
required
/>
<input
type="number"
value={price}
onChange={(e) => setPrice(e.target.value)}
placeholder="Price"
required
/>
<button type="submit">Create Listing</button>
</form>
);
};
export default ListingForm;
Components–Listings–ListingItem.js
import React from 'react';
const ListingItem = ({ listing }) => {
return (
<li>
<img src={listing.image} alt={listing.title} />
<div className="listing-details">
<h3 className="listing-title">{listing.title}</h3>
<p className="listing-description">{listing.description}</p>
<p className="listing-price">{listing.price}</p>
<button>Contact Seller</button>
</div>
</li>
);
};
export default ListingItem;
Components–Listings–ListingList.js
import React from 'react';
import ListingItem from './ListingItem';
const ListingList = () => {
// Sample listings with image URLs
const listings = [
{
id: 1,
title: 'Used Bike',
price: '$150',
description: 'A well-maintained bike.',
image:
'https://www.otocapital.in/_next/image?url=https%3A%2F%2Fassets.otocapi
tal.in%2Fproduction%2Fblack-with-blue-honda-shine-right-view.png&w=1024
&q=75', // Placeholder image
},
{
id: 2,
title: 'Old TV',
price: '$50',
description: 'Still works great!',
image:
'https://thumbs.dreamstime.com/b/vintage-television-13933447.jpg', //
Placeholder image
},
];
return (
<div>
<h2>Listings</h2>
<ul>
{listings.map((listing) => (
<ListingItem key={listing.id} listing={listing} />
))}
</ul>
</div>
);
};
export default ListingList;
