Dear Sir,
First of all thank you for an amazing tutorial. However i got stuck on “React & Node ECommerce Tutorial For Beginners 2022 [MERN Stack ECommerce Website]” video on add product screen lesson. The link is https://www.youtube.com/watch?v=CDtPMR5y0QU. I get error Request failed with status code 404 when i click on a product to take me to ProductScreen.js. I rewatched that part of the video multiple times and I am pretty sure that my code matches yours. Do you have any idea where the problem might be? In ProductScreen.js or in server.js? I will paste the code of both files down below. Once again, thank you sir for an amazing tutorial.
import axios from \'axios\'; import { useEffect, useReducer } from \'react\'; import { useParams } from \'react-router-dom\'; const reducer = (state, action) => { switch (action.type) { case \'FETCH_REQUEST\': return { ...state, loading: true }; case \'FETCH_SUCCESS\': return { ...state, object: action.payload, loading: false }; case \'FETCH_FAIL\': return { ...state, loading: false, error: action.payload }; default: return state; } }; function ObjectScreen() { const params = useParams(); const { slug } = params; const [{ loading, error, object }, dispatch] = useReducer(reducer, { object: [], loading: true, error: \'\', }); //const [objects, setObjects] = useState([]); useEffect(() => { const fetchData = async () => { dispatch({ type: \'FETCH_REQUEST\' }); try { const result = await axios.get(`/api/objects/slug/${slug}`); dispatch({ type: \'FETCH_SUCCESS\', payload: result.data }); } catch (err) { dispatch({ type: \'FETCH_FAIL\', payload: err.message }); } //setObjects(result.data); }; fetchData(); }, [slug]); return loading ? ( <div>Loading...</div> ) : error ? ( <div>{error}</div> ) : ( <div>{object.name}</div> ); } export default ObjectScreen;
import express from \'express\'; import data from \'./data.js\'; const app = express(); app.get(\'/api/objects\', (req, res) => { res.send(data.objects); }); app.get(\'/api/objects/slug/:slug\', (req, res) => { const object = data.objects.find((x) => x.slug === req.params.slug); if (object) { res.send(object); } else { res.status(404).send({ message: \'Restaurant not found\' }); } }); const port = process.env.PORT || 5000; app.listen(port, () => { console.log(`serve at http://localhost:${port}`); });
Hello Ante,
I am also learning Mern. Why you use forward(\) in line 7 ( app.get(\’/api/objects/slug/:slug\’, (req, res) => {). I think this will create a problem. I am waiting for your response.
Best,
Fajla Rabby Khan


Hello Fajla,
Yes, that was the problem. I wasted so much time over this and now I can move on with the tutorial. Thank you sir.
Hello Fajla. Yes, that was the problem. I wasted so much time over this and now I can move on with tutorial. Thank you sir.