https://github.com/saikatkarar/l5-project-1
This web application is designed to provide a seamless shopping experience, featuring a product listing and detailed views for individual items. Utilizing the power of React, React Router, and Axios, this project is a showcase of modern web development techniques.
https://github.com/saikatkarar/l5-project-1
react tailwindcss
Last synced: 2 months ago
JSON representation
This web application is designed to provide a seamless shopping experience, featuring a product listing and detailed views for individual items. Utilizing the power of React, React Router, and Axios, this project is a showcase of modern web development techniques.
- Host: GitHub
- URL: https://github.com/saikatkarar/l5-project-1
- Owner: SaikatKarar
- Created: 2024-07-12T06:44:33.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-07-15T07:28:28.000Z (11 months ago)
- Last Synced: 2025-01-28T17:18:30.648Z (4 months ago)
- Topics: react, tailwindcss
- Language: JavaScript
- Homepage: https://l5-project-1.vercel.app
- Size: 49.8 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# E-commerce Web Application Project - Overview and Key Functionalities
## Project Overview
* This web application is designed to provide a seamless shopping experience, featuring a product listing and detailed views for individual items. Utilizing the power of React, React Router, and Axios, this project is a showcase of modern web development techniques.
## Key Functionalities
1. Product Listing:
~ Home page displaying a list of products fetched from a fake store API.
~ Each product is linked to its detailed view page.
2. Product Details:
~ Individual product details are fetched based on the product ID.
~ Detailed view includes product title and description.
3. Context API for State Management:
~ Efficient state management using React's Context API to handle product data.
4. Routing:
~ Smooth navigation between the home page and product details using React Router.
5. API Integration:
~ Axios is used for API calls to fetch product data from a backend server.
## Technical Stack
- React for building the user interface.
- React Router for handling navigation.
- Axios for API calls.
- Context API for state management.
## CODE
***
| main.jsx | App.jsx | component/Home.jsx | component/Details.jsx | utils/axios.js | utils/Context.jsx
### main.jsx
```
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import { BrowserRouter } from "react-router-dom";
import Context from "./utils/Context.jsx";
ReactDOM.createRoot(document.getElementById("root")!).render(
,
);
```
### App.jsx
```
import { Route, Routes } from "react-router-dom";
import { Home } from "./component/Home";
import Details from "./component/Details";
function App() {
return (
<>
} />
} />
>
);
}
export default App;
```
### component/Home.jsx
```
import React, { useContext } from "react";
import { Link } from "react-router-dom";
import { ProductContext } from "../utils/Context";
export const Home = () => {
const [products] = useContext(ProductContext);
return products ? (
<>
{products.map((e, idx) => (
{e.title}
))}
>
) : (
Loading...
);
};
```
### component/Details.jsx
```
import React, { useEffect, useState } from "react";
import axios from "../utils/axios";
import { useParams } from "react-router-dom";
function Details() {
const { id } = useParams();
const [product, setProduct] = useState(null);
const getSingleProduct = async () => {
try {
const { data } = await axios.get(`/products/${id}`);
setProduct(data);
} catch (error) {
console.log(error);
}
};
useEffect(() => {
getSingleProduct();
}, []);
return product ? (
{product.title}
{product.description}
) : (
Loading...
);
}
export default Details;
```
### utils/axios.js
```
import axios from "axios";
const instance = axios.create({
baseURL: "https://fakestoreapi.com/",
});
export default instance;
```
### utils/Context.jsx
```
import axios from "./axios";
import React, { createContext, useEffect, useState } from "react";
export const ProductContext = createContext();
const Context = (props) => {
const [product, setProduct] = useState(null);
const getProducts = async () => {
try {
const { data } = await axios("/products");
setProduct(data);
} catch (error) {
console.log(error);
}
};
useEffect(() => {
getProducts();
}, []);
return (
{props.children}
);
};
export default Context;
```
- [Project Link](https://codesandbox.io/p/devbox/focused-marco-q3p67m)
- [Live Link](https://q3p67m-5173.csb.app/)