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;