******************************22 oct****************************************

step1 src/App.js

import React from 'react'

function App() {
return (
<div> welcome</div>
)
}

export default App

step2
npm start

step3
https://www.npmjs.com/package/react-router-dom
npm i react-router-dom

step4 terminal

PS G:\21octreactproject\frontend> npm i react-router-dom

step5 src/pages/ Home.js

import React from 'react'

function Home() {
return (
<div>welcome Home Page</div>
)
}

export default Home

step6 App.js

import React from 'react'

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './pages/Home';
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Home/>}/>
</Routes>

</Router>
)
}

export default App

step7 terminal
npm start
***************************6 Nov
2024********************************************************
step1 package.json

npm i react-bootstrap
npm i react-dom
npm i react-router-bootstrap
npm i react-router-dom

***************************7 Nov
2024*******************************************************
step1frontend/src/components/HeroSection.js

import React from 'react';

import { Container, Row, Col, Button } from 'react-bootstrap';
const HeroSection=()=>{

return(
<div className="hero-section">
<Container>
<Row className="align-items-center">
<Col md={6}>
<h1>sarso</h1>
</Col>
<Col md={6}>
<h1>aalo</h1>
</Col>

</Row>

</Container>

</div>

}
export default HeroSection

step2 frontend/src/pages/Home.js

import React from 'react'

import HeroSection from '../components/HeroSection'

function Home() {
return (
<div>
<HeroSection/>
<div>welcome Home Page</div>
 </div>

)
}

export default Home

*************************************11 Nov
2024***************************************
step1frontend/src/components/HeroSection.js

import React from 'react';

import { Container, Row, Col, Button } from 'react-bootstrap';
const HeroSection=()=>{

return(
<div className="hero-section">
<Container>
<Row className="align-items-center">
<Col md={6}>
<h1>Welcome to DellDen</h1>
<p>Your one-stop destination for the best products at unbeatable prices!</p>
<Button variant="primary" href="/">Shop Now</Button>
</Col>
<Col md={6}>
<img src='https://img.freepik.com/free-photo/view-table-with-articles-food-
family_1398-5025.jpg?semt=ais_hybrid'
alt="Shopping"
className="hero-image"

/>

</Col>

</Row>

</Container>

</div>

}
export default HeroSection

step2frontend/src/components/HeroSection.css
.hero-section {
background-color: #f8f9fa; /* Light background color */
padding: 4rem 0; /* Padding for the section */
text-align: left; /* Left align text */
}
 .hero-section h1 {
font-size: 3rem; /* Large heading size */
color: #333; /* Dark text color */
}

.hero-section p {
font-size: 1.25rem; /* Medium text size */
color: #666; /* Grey text color */
}

.hero-image {
max-width: 100%; /* Responsive image */
height: auto; /* Maintain aspect ratio */
border-radius: 0.5rem; /* Rounded corners for the image */
}

step3frontend/src/components/HeroSection.js

import React from 'react';

import { Container, Row, Col, Button } from 'react-bootstrap';
import './HeroSection.css'
const HeroSection=()=>{

return(
<div className="hero-section">
<Container>
<Row className="align-items-center">
<Col md={6}>
<h1>Welcome to DellDen</h1>
<p>Your one-stop destination for the best products at unbeatable prices!</p>
<Button variant="primary" href="/">Shop Now</Button>
</Col>
<Col md={6}>
<img src='https://img.freepik.com/free-photo/view-table-with-articles-food-
family_1398-5025.jpg?semt=ais_hybrid'
alt="Shopping"
className="hero-image"

/>

</Col>

</Row>

</Container>

</div>

}
export default HeroSection
*********************************12 nov
2024*********************************************
step1 frontend/src/data/Products.js

const products=[

{
id: 1,
name: 'Smartphone',
price: 299.99,
description: 'Latest model smartphone with amazing features.',
image: '/images/im1.jpg'
},
{
id: 2,
name: 'Laptop',
price: 799.99,
description: 'High-performance laptop for gaming and work.',
image: '/images/im2.jpg'
},
{
id: 3,
name: 'Headphones',
price: 99.99,
description: 'Noise-cancelling headphones with premium sound quality.',
image: '/images/im3.jpg'
},
{
id: 4,
name: 'Headphones',
price: 99.99,
description: 'Noise-cancelling headphones with premium sound quality.',
image: '/images/im4.jpg'
},
{
id: 5,
name: 'Headphones',
price: 99.99,
description: 'Noise-cancelling headphones with premium sound quality.',
image: '/images/im5.jpg'
},
{
id: 6,
name: 'Headphones',
price: 99.99,
description: 'Noise-cancelling headphones with premium sound quality.',
image: '/images/im6.jpg'
},
{
id: 7,
name: 'Headphones',
price: 99.99,
description: 'Noise-cancelling headphones with premium sound quality.',
image: '/images/im7.jpg'
},
{
id: 8,
name: 'Headphones',
 price: 99.99,
description: 'Noise-cancelling headphones with premium sound quality.',
image: '/images/im8.jpg'
},

step2frontend/public/images

step3 download images and paste images folder

*****************************13 nov 2024*******************************************

step1frontend/src/components/ProductCard.js

step2
https://react-bootstrap.netlify.app/
import Button from 'react-bootstrap/Button';
import Card from 'react-bootstrap/Card';
<Card style={{ width: '18rem' }}>
<Card.Img variant="top" src="holder.js/100px180" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>

step3frontend/src/components/ProductCard.js

import React from 'react'

import Button from 'react-bootstrap/Button';
import Card from 'react-bootstrap/Card';
export const ProductCard = () => {
return (
<Card style={{ width: '18rem' }}>
<Card.Img variant="top" src="holder.js/100px180" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
)
}

step4 frontend/src/components/ProductList.js

import React from 'react'

import ProductCard from './ProductCard'

function ProductList() {
return (
<div>
<ProductCard/>
</div>
)
}

export default ProductList

step4 frontend/src/pages/Home.js

import React from 'react'

import HeroSection from '../components/HeroSection'
import ProductList from '../components/ProductList'

function Home() {
return (
<div>
<HeroSection/>
<ProductList/>
<div>welcome Home Page</div>
</div>

)
}

export default Home

******************************************14 nov
2024************************************
step1 frontend/src/data/products.js

const products = [
{
id: 1,
name: 'Aata',
price: 299.99,
description: 'Latest model smartphone with amazing features.',
image: '/images/im1.jpg'
},
{
id: 2,
name: 'Home Made',
price: 799.99,
description: 'High-performance laptop for gaming and work.',
image: '/images/im2.jpg'
},
{
id: 3,
name: 'Delicious Food',
price: 99.99,
description: 'Noise-cancelling headphones with premium sound quality.',
image: '/images/im3.jpg'
 },
{
id: 4,
name: 'Headphones',
price: 99.99,
description: 'Noise-cancelling headphones with premium sound quality.',
image: '/images/im1.jpg'
},
{
id: 5,
name: 'Headphones',
price: 99.99,
description: 'Noise-cancelling headphones with premium sound quality.',
image: '/images/im2.jpg'
},
{
id: 6,
name: 'Headphones',
price: 99.99,
description: 'Noise-cancelling headphones with premium sound quality.',
image: '/images/im2.jpg'
},
{
id: 7,
name: 'Headphones',
price: 99.99,
description: 'Noise-cancelling headphones with premium sound quality.',
image: '/images/im2.jpg'
},
{
id: 8,
name: 'Headphones',
price: 99.99,
description: 'Noise-cancelling headphones with premium sound quality.',
image: '/images/im2.jpg'
},
// Add more products here...
];

export default products;

step2frontend/src/components/ProductList.js

import React from 'react';

import { Row, Col } from 'react-bootstrap';
import products from '../data/products';
import ProductCard from './ProductCard';

const ProductList = () => {

return (
<Row>
{products.map((product) => (
<Col key={product.id} sm={12} md={6} lg={3}>
<ProductCard product={product} />
</Col>
))}
</Row>
);
};
export default ProductList;

step3frontend/src/components/ProductCard.js

import React from 'react';

import { Card, Button } from 'react-bootstrap';
import { Link } from 'react-router-dom';

const ProductCard = ({ product }) => {

return (
<Card style={{ width: '18rem' }}>
<Link to={`/product/${product.id}`}> {/* Correct link to ProductDetail */}
<Card.Img variant="top" src={product.image} />
</Link>
<Card.Body>
<Card.Title>{product.name}</Card.Title>
<Card.Text>Price: ${product.price}</Card.Text>
<Button variant="primary" >
Add to Cart
</Button>
</Card.Body>
</Card>
);
};

export default ProductCard;

step4 frontend/src/pages/Home.js

import React from 'react';

import ProductList from '../components/ProductList';
import { Container, Row, Col, Card } from 'react-bootstrap';

import HeroSection from '../components/HeroSection';

const Home = () => {
return (

<Container fluid className="home-container">

<HeroSection />
<h2 className="text-center my-4">Product Listing</h2>
<Row>
<Col md={12}>
<Card className="bg-light shadow-sm">
<Card.Body>
<ProductList />
</Card.Body>
</Card>
</Col>
</Row>
</Container>
);
};
export default Home;

step5
npm start

***************************18 nov
2024*****************************************************************
step1 frontend/src/pages/Home.css

.home-container {
background-color: #f8f9fa; /* Light gray background */
padding: 20px; /* Padding around the container */
min-height: 100vh; /* Make sure the container covers full height */
}

h2 {
color: #343a40; /* Darker color for heading */
}

.card {
border: none; /* Remove default card border */
border-radius: 8px; /* Rounded corners for the card */
}

.card-body {
padding: 20px; /* Padding for the card body */
}

.card-title {
font-size: 1.5rem; /* Larger title font size */
}

.card-text {
font-size: 1.25rem; /* Larger text size for product info */
}

.product-list {
display: flex; /* Align items in a flexbox */
flex-wrap: wrap; /* Allow items to wrap to the next line */
justify-content: space-between; /* Space items evenly */
}

.product-item {
margin-bottom: 20px; /* Space between product items */
flex: 1 0 21%; /* Responsive item sizing (4 items per row) */
max-width: 22%; /* Limit maximum width for product items */
}

step2 frontend/src/components/Navbar.js

import React from 'react'

import { Navbar, Nav, Container, Badge } from 'react-bootstrap';

import './NavigationBar.css';
function NavigationBar() {
return (
 <Navbar expand="lg" className="bg-body-tertiary">
<Container>
<Navbar.Brand href="#home">DellDen</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#link">About</Nav.Link>
<Nav.Link href="#link">Contact</Nav.Link>

</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
)
}

export default NavigationBar

step3 frontend/src/components/NavigationBar.css

.custom-navbar {
background-color: #343a40; /* Dark background color */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.custom-navbar .nav-link {
color: #ffffff; /* White text color */
margin-left: 15px; /* Space between links */
transition: color 0.3s; /* Smooth transition */
}

.custom-navbar .nav-link:hover {
color: #ffd700; /* Change color on hover */
}

.custom-navbar .navbar-brand {
font-size: 1.5rem; /* Brand font size */
font-weight: bold; /* Brand bold text */
}

.custom-navbar .navbar-toggler {
border: none; /* Remove border */
}

.custom-navbar .navbar-toggler-icon {
background-color: #ffffff; /* Change toggle icon color */
}

@media (max-width: 768px) {

.custom-navbar .nav-link {
margin: 0; /* Remove margin on smaller screens */
}
}