I hope that you enjoy the tutorial. I might make a shorter version without the images. *** Update: I forgot to check if the data was created successfully on the server. The book data could be null, so I'll add a simple if statement to check for this. I'll add it to the Github repo.
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❤😊
I just completed the recipe blog project.. I enjoyed... But i wanted learn the process in developing a whole project... I never expected ill get that here in this channel, your are so greatful❤.. I'm going to start this but small doubt.. should i know react before this?
Love the video man. Thanks so much for posting (Net Ninja brought me here). One question, I'm only getting 3 books to display. I have all the books in Mongodb, all images, and everything looks good. Am I missing something?
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
@@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.
Hello. Great tutorial. However there is a problem I could not solve. It throws server error if I am not attaching an image with adding a new book! It works with image, but not without one. What could cause that and where to look?
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, });
Hi Raddy,I have a question. How come I can’t use your dummy JSON data. I copied it in my mongodb but when I fetch the api. The only response on localhost is [ ] empty array.Thanks for the tutorial.
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
I am setting error when submit the data and its giving 500 server error and loging Data failed to add I have checked all endpoints its working fine in Thunderclient but not in Client
hello @RaddyDev, I am stuck in small issue, in the client part, after Fetching the data when I try to console.log it, first it prints me an empty array and after some moments it is fetching me the data, due to this , I cannot even render my data content to the boooks, please help me with it!!
@@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
@@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
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".
Any tutorial for uploading to the server so everyone in the world can see you website? I've learned some MERN tutorial before but I still don't understand how my MERN work on the server. I followed the tutorial about hosting the website without knowing anything about it. I use Netlify for my website and Heroku for storing backend which use MongoDB. It worked for a few months then Heroku stopped its free hosting. So now my website is not functioning. One way I can think of now is to use DDNS like noip but I have to use my own PC as server and have to leave it on 24hr.
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
am begginer in mern recently see your blog project playlist on net ninja then comes the already subscribe or also click the bell and hope to clone this and waiting for many your thankew❤