//products.json

[
    {
        "id": 1,
        "name": "Product 1",
        "description": "Description of Product 1",
        "price": 9.99,
        "image": "https://media.geeksforgeeks.org/wp-content/uploads/20230728154500/download-(1).jfif"
    },
    {
        "id": 2,
        "name": "Product 2",
        "description": "Description of Product 2",
        "price": 19.99,
        "image": "https://media.geeksforgeeks.org/wp-content/uploads/20230728154740/download-(2).jfif"
    },
    {
        "id": 3,
        "name": "Product 3",
        "description": "Description of Product 3",
        "price": 20,
        "image": "https://media.geeksforgeeks.org/wp-content/uploads/20230728154838/download-(3).jfif"
    },
    {
        "id": 4,
        "name": "Product 4",
        "description": "Description of Product 4",
        "price": 25,
        "image": "https://media.geeksforgeeks.org/wp-content/uploads/20230728154931/download.jfif"
    },
    {
        "id": 5,
        "name": "Product 5",
        "description": "Description of Product 5",
        "price": 30,
        "image": "https://media.geeksforgeeks.org/wp-content/uploads/20230728155132/images-(1).jfif"
    },
    {
        "id": 6,
        "name": "Product 6",
        "description": "Description of Product 6",
        "price": 999,
        "image": "https://media.geeksforgeeks.org/wp-content/uploads/20230728155224/images.jfif"
    }
]

//index.js

const express = require('express');
const app = express();
const cors = require('cors');
app.use(express.json())
const data = require('./products.json')
app.use(cors());

// REST API to get all products details at once
// With this api the frontend will only get the data
// The frontend cannot modify or update the data 
// Because we are only using the GET method here.

app.get("/api/products", (req, res) => {
    res.json(data)
});

app.listen(5000, () => {
    console.log('Server started on port 5000');
});

//App.js

import React, { useState, useEffect } from 'react';
import axios from "axios";
import './App.css';

function App() {
    const [data, setData] = useState();

    useEffect(() => {
        axios.get('http://localhost:5000/api/products').then(
            response => {
                setData(response.data);
            }
        ).catch(error => {
            console.error(error);
        })
    }, [])

    return (
        <div className="App">
            {
                <div className='products'>
                    {data?.map((data) => {
                        return (
                            <div key={data.id}>
                                <img className='img'
                                    src={data.image}
                                    alt="img" />
                                <h1>{data.name}</h1>
                                <p>{data.description}</p>
                            </div>
                        );
                    })
                    }
                </div>
            }
        </div>
    );
}
export default App;