Full stack Shopping Cart Application using Strapi.

Frontend (React js)

index.js

import React from 'react';

import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
app.js
import {useState,useEffect} from 'react';
import apple from './apple.jpeg';
import orange from './orange.jpeg';
import cabbage from './cabbage.jpeg';
import beans from './beans.jpeg';
import axios from 'axios';
import Card from 'react-bootstrap/Card';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import Button from 'react-bootstrap/Button';
function App() {
let photos = [apple,orange,cabbage,beans];
let products = [{name:"Apple",country:"India",instock:10,price:120},
{name:"Orange",country:"India",instock:10,price:100},
{name:"cabbage",country:"srilanka",instock:12,price:50},
{name:"beans",country:"UK",instock:12,price:80}]
let [item,setItem] = useState(products)
let [cart,setCart] = useState([])
let [cost,setCost] = useState(0)
let [data,setData] = useState([])
let [name,setName] = useState("")
let [country,setCountry] = useState("")
let [instock,setInstock] = useState("")
let [price,setPrice] = useState("")
let [delTrigger,setDelTrigger] = useState(false);
const [productId,setProductId] = useState('');
let [productIdDel,setProductIdDel] = useState('')
let url = "http://localhost:1337/api/carts";
function addCart(selectedItem){
if(selectedItem.instock <=0){
alert('Out of stock');
return;
}
const newCart =[...cart];
let itemFound = false;
for(let i=0;i<newCart.length;i++){
if(newCart[i].name===selectedItem.name){
newCart[i].quantity++;
itemFound=true;
break;
}
}
if(!itemFound){
newCart.push({...selectedItem,quantity:1})
}
const newList = item.map((listItem)=>
listItem.name===selectedItem.name ? {...listItem,instock:listItem.instock-1}:listItem)
setCart(newCart)
let newTotal = 0;
newCart.forEach((item)=>{
newTotal += item.price * item.quantity;
})
setCost(newTotal)
setItem(newList)
}
console.log(cart)
console.log(data)
useEffect(()=>{
async function fetchdata(){
let res = await axios(url);
let result = res.data;
setData(result)
}
fetchdata();
},[url])
const restockproducts = (data) =>{
let newItem = data.data.map((item)=>{
let {name,country,price,instock} = item.attributes;
return {name,country,price,instock}
});
setItem([...newItem])
console.log(item)
}
function handleSubmit(){
axios.post('http://localhost:1337/api/carts',{"data":{name,country,instock,price}})
}
const handleSubmitUpdate = async (e) => {
e.preventDefault();
await axios.put(`http://localhost:1337/api/carts/${productId}`, {"data":{name,
country,
instock,
price}
});
alert("Updated Successfully")
setName('');
setCountry('');
setInstock('');
setPrice('');
};
const handleDel = async() =>{
await axios.delete(`http://localhost:1337/api/carts/${productIdDel}`);
alert("Product Deleted");
}
return (<>
<h1 className='heading'>Shopping Cart</h1>
<div className='row'>
{
item.map((item,key)=><div className='col-md-3'>
<Card style={{ width: '25rem' }}>
<Card.Img variant="top" src={photos[key%4]} height={200} width={100} />
<Card.Body>
<Card.Text>
<h5>Name : {item.name}<br></br> Instock : {item.instock} <br></br> Price :$
{item.price}</h5>
</Card.Text>
<Button onClick={()=>addCart(item)} variant="success" className='cart'>Add To
Cart</Button>
</Card.Body>
</Card>
</div>)
}
</div>
<h2 className='citems'>Cart Items</h2><br></br>
<h5 className='item'>{cart.map((item,key)=><h5
style={{color:'indigo'}}>Name:&nbsp;&nbsp;{item.name}&nbsp;&nbsp;&nbsp;
Quantity:&nbsp;&nbsp;{item.quantity}</h5>)}</h5>
<h2 className='citems'>Total Cost</h2><br></br><h5 style={{color:'indigo'}}
className='tot'>{cost}</h5>
<h2 className='citems'>Restock Items</h2>
<form className='form1' onSubmit={(e) => {
restockproducts(data);
e.preventDefault();
}}>
<input type='text' value={url}></input>
<button>Submit</button>
</form>
<h2 className='citems'>Create a Data</h2>
<form className='form2' onSubmit={handleSubmit}>
<input onChange={(e)=>setName(e.target.value)} type='text' placeholder='Enter
Name'></input>
<input onChange={(e)=>setCountry(e.target.value)} type='text' placeholder='Enter
Country'></input>
<input onChange={(e)=>setInstock(e.target.value)} type='text' placeholder='Enter
Stock'></input>
<input onChange={(e)=>setPrice(e.target.value)} type='text' placeholder='Enter
Cost'></input><br></br>
<button type='submit'>Push</button>
</form>
<div>
<h2 className='citems'>Update Product Details</h2><br></br>
<form className='form3' onSubmit={handleSubmitUpdate}>
<input
type="text"
value={productId}
onChange={(e) => setProductId(e.target.value)}
placeholder="Enter product Id"/>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Enter Name"/>
<input
type="text"
value={country}
onChange={(e) => setCountry(e.target.value)}
placeholder="Enter Country"/>
<input
type="text"
value={instock}
onChange={(e) => setInstock(e.target.value)}
placeholder="Enter Stock"/>
<input
type="text"
value={price}
onChange={(e) => setPrice(e.target.value)}
placeholder="Enter Price"/>
<button type="submit">Update Product</button>
</form>
</div>
<h2 className='citems'>Delete Items</h2><br></br>
<form className='form4'>
<input
type="text"
value={productIdDel}
onChange={(e) => setProductIdDel(e.target.value)}
placeholder="Enter Product Id to delete"/>
<button type="submit" onClick={handleDel}>Delete Product</button>
</form>
</>);
}
export default App;
App.css
body{
background-color:black;
}
.heading{
text-align: center;
color: white;
background-color: green;
padding: 15px;
font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
letter-spacing: 3px;
margin-bottom: 30px;
}
.citems{
text-align: center;
margin-top: 40px;
color: green;
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-shadow: 0px 0px 5px darkgreen;
}
.item{
text-align: center;
}
.tot{
text-align: center;
}
input{
display:list-item;
margin: 10px;
height: 45px;
width: 500px;
border: 2px solid palevioletred;
border-radius: 10px;
text-align: center;
}
button{
height: 45px;
width: 500px;
margin: 10px;
background-color: palevioletred;
border: none;
border-radius: 10px;
}
.form1,.form2,.form3,.form4{
/* margin-left: 480px; */
display: grid;
justify-content: center;
align-items: center;
}
.cart{
width: 150px;
height: 50px;
padding: 0px;
margin: 15%;
}
Output: