******************************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