MERN Starter Tutorial for Beginners 

Please make a small cart functionality for this project. It will be very helpful. Mini book selling application. Thank you so much for the amazing videos❤😊

The thumbnail bit can be confusing, but I hope that you make it work. This is why I made a new video, without it 😀

This should help you get started with React. Don't need to know it, just get started and learn as you go

Thank you! I am hoping to make a lot more this year 🙂

My pleasure 😊

My pleasure 😊

@@RaddyDev 🌺🌺

import {useState, useEffect } from 'react' import { Link } from 'react-router-dom' function Book() { const baseURL = 'localhost:8000/api/books'; const [data, setData] = useState([]); useEffect(() => { const fetchData = async () => { try { const response = await fetch(baseURL) if(!response.ok) { throw new Error('Failed to fetch Data') } const jsonData = await response.json() setData(jsonData) } catch (error) { console.log(error) } } fetchData() }, []) return ( Book Page Fetch Example {data.map((item) => ( {item.title} ))} ) } export default Book

Glad that you like it! 🐱‍👤🔥 NetNinja What you can do is to console log your Book data object in Nodejs. The one where you query the Books in the GET route: const data = await Book.find(filter); console.log(data); Do that and see if you get all the data in the console. If you do then start debugging in React. You can do the same thing there, and double check your loop {data.map((item) => ( {item.title} ))}

Hey, thanks so much for the reply. As soon as you said 'Check Node', I released I had Book.find({).limt(3). Problem solved. Thanks a again and love your content @@RaddyDev

Have a look at the server logs when you deploy and that will tell you what the problem is. Hopefully it will be something small

@@RaddyDev yes the error logs when I try to deploy are "npm run build" exited with 1, Ive tried googling this issue but so far no luck. Still searching to see what i can do.

@@RaddyDev So I checked the error logs when deploying my front end and it said, Could not resolve "./components/Header.jsx" from "src/App.jsx". Ive checked locally in my header component and i see no issue there or the app.jsx Ive tried stack overflow but no one seems to understand my issue either.

Video coming out today :)

It could be the POST a book route. You could add a default thumbnail or an empty one: Add Default thumbnail const: const defaultThumbnailPath = "path/to/default_thumbnail.jpg"; and then for the thumbnail you could check if the file is empty and add the default one (or empty): `thumbnail: req.file ? req.file.filename : defaultThumbnailPath,` New book code would look like this: const newBook = new Book({ title: req.body.title, slug: req.body.slug, stars: req.body.stars, description: req.body.description, category: req.body.category, thumbnail: req.file ? req.file.filename : defaultThumbnailPath, });

Two things to check. Did you invoke the fetch data function? And if you console.log(jsonData), after you do await response.json() do you get the data in the console?

Some of this doesn't match the code on the video. FaAngleDoubleLeft I don't have. Did you import that icon? The bookDetails class should be bookdetails. If you remove the icon and change the class name it should start working

I'll be happy to take a look if you don't mind uploading your code on GitHub. As long as you connect to the database successfully, you have the model exported and then imported into the main file, it should work

It's the standard Emoji keyboard from Windows. Mac also has it: For Mac keyboards: Use CTRL + CMD + Space Windows + ; (semi-colon) or Windows + . (period) It works when you type somewhere

That's a strange one... Have you got your project uploaded on GitHub? I'll be happy to have a look

Interesting, I need to check it out. Have you got a public Github repo with the project?

I would have to look at your code. Do you get any other errors?

@@RaddyDev after careful scrutiny, I found that it is because of the asynchronous nature of the fetch that we are using in here, since the fetch is asyncronous,by the time our flow reaches the printing part, the fetch function has'nt fetched the data, after some time when the fetch function is done with the fetching we are getting the array as the output, we could mitigate this issue by using some conditionals to it,Thanks

@user-fl1km1jq1d Hello!I have the same issue. Could you share your solution with us?(the conditionals part).Thank you

@@enikoszebenyi3750 Hello, I don't know if they will reply so I will try to help 🙂 Reading back at the original comment, the Async function is most likely working correctly. The problem could be that they are trying to console log the data before it has been fetched. After setting the data setData(jsonData); you can do a check like this: if (jsonData.length > 0) { console.log(jsonData); } Do you ever get the data back from the server? Have you tested the API endpoint in the browser or thunder client? I would be interested to know what is causing the problem

@@RaddyDev You are wrong raddy! I do reply😂😂

Yeah that's absolutely fine. Your browser probably doesn't have a JSON Formatter that's all. You can install them as a browser extension. On chrome there is one literally called "JSON Formatter".

@@RaddyDev thank you! Ill try this out

it worked, appreciate that again.

@@RaddyDev hey i keep receiving a 404 not found error for my delete button, idk why i made sure the http URL is correct.

nevermind i fixed it, i had to type node index.js again in the terminal again for the server

Hey, back again. for some reason I keep receiving an error in thundercloud when i try testing my app.post route i made in the server.

man idk what it is, i did the same thing as last time and it worked this time. typed node index.js again and the route worked lol

I'll create a follow-up video soon. We can use Render to build two projects: a Web Service (Server - Node.js) and a Static Site (Client - React). Publish them on GitHub and connect the Static Site to the React repo and the Web Service to the Node.js repo. Render handles the build process, so you don't have to do much. The only thing that we'll need to configure is the URL's since I hardcoded them. Normally you would add them in a .env file to make it easy to update. I will cover all that

@@RaddyDev when can we expect the follow-up video?

@@MCAAARULMishra just finished recording it. It should be done by Monday

I appreciate you being here!

@@RaddyDev 😌yeah just want content from you full support from my side😂😂

I am defiantly looking into doing stuff like that. I appreciate the suggestion

@@RaddyDev thankew waiting for that❤️