MERN Starter Tutorial for Beginners

Learn the MERN stack by creating a simple CRUD book application. I will cover NodeJs, MongoDB (Mongoose), Express and React.
☕ BuyMeACoffee: www.buymeacoffee.com/RaddyThe...
Download Files:
github.com/RaddyTheBrand/30.M...
Discounts:
⚡ Hostinger: www.hostg.xyz/aff_c?offer_id=...
⚡ Elementor: be.elementor.com/visit/?bta=2...
Recording Equipment:
◾ Microphone: amzn.to/3uX0yvP
◾ Shotgun Mic: amzn.to/3aRsSJb
◾ Camera: amzn.to/3IMumkx
◾ Lens: amzn.to/3ARxvh8
◾ Lighting: amzn.to/3PBetj2
Computer Gear:
◾ Keyboard: amzn.to/3RCXRcC
◾ Headphones: amzn.to/3aIvskX
◾ Mouse: amzn.to/3VfVuxO
Connect with me:
◾ Website: www.raddy.dev
◾ Newsletter: www.raddy.co.uk/newsletter
Chapters:
◾ 0:00 Introduction:
◾ 0:35 Server
◾ 9:39 Database Setup
◾ 22:34 Dymmy Data
◾ 23:19 Get Books Route
◾ 25:16 Client
◾ 38:49 Books + Filters
◾ 59:39 Single Book
◾ 1:12:59 Add Book
◾ 1:42:45 Update Book
◾ 1:56:50 Delete Book
#nodejs #react #mernstack

[@RaddyDev]

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.

[@rizwanmohammad1624]

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❤😊

[@elmokhtar8576]

This is my first video discovering the MERN stack, till now 30 minutes of watching and so far everything is clear. Thank you so much Raddy

[@RaddyDev]

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

[@blue_berry_pie64]

Thank you for your full tutorial to build book app! I am happy to learn!

[@mehrdad1068]

Thank you for sharing this awesome tutorial 💛💚

[@eloytekila]

Very good tutorial man, I had finished now and I need to say that I had learn a lot, Tks for the video

[@SoftwareScience]

Thanks so much. The best mern crud tutorial! You might show us how to add authentication to this?

[@anasyoussef2022]

Thank you brother ❤

[@williamyanney6071]

Thanks for the Tutorial, u made me understanding on MERN Stack good. Hope to find more great content..Bro.

[@abd9641]

Thank you so much my first mern app😊

[@RaddyDev]

My pleasure 😊

[@mehrdad1068]

Thank you for this awesome tutorial🙏

[@RaddyDev]

My pleasure 😊

[@mehrdad1068]

@@RaddyDev 🌺🌺

[@vividmilan9175]

This is a great tutorial man, Plz don't stop making Tutorials 💯♥

[@RaddyDev]

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

[@MsAlokranjan]

awesome. Sir 👌

[@MightyKingKala]

Thank you brother

[@govindr3004]

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?

[@RaddyDev]

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

[@patrap4625]

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.

[@RaddyDev]

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?

[@MCAAARULMishra]

Hi raddy, I wasnt able to find the Books as collection my DataBase even after I added /Books in env file as well as imported Books.js model

[@RaddyDev]

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

[@cshark1990]

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?

[@cshark1990]

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

[@RaddyDev]

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} ))}

[@cshark1990]

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

[@andraspoljak]

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?

[@RaddyDev]

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, });

[@adenugbamicheal2140]

What do i do if am to deploy for production?

[@RaddyDev]

Video coming out today :)

[@manuelgoncalves4026]

Hey. What's the extension to use the emoji icons???

[@RaddyDev]

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

[@nitish394]

@RaddyDev, Sir in backened server my api link showing empty array, why?

[@RaddyDev]

Double check the collection name. Could be something silly like a typo

[@viewsbyblur]

finally finished my project, having trouble deploying on vercel tho, the backend/server deployed fine but the client side is giving me errors

[@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

[@viewsbyblur]

@@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.

[@viewsbyblur]

@@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.

[@animentalproducts5228]

There is an issue when editing a book's category, as the updated category does not seem to appear in bulleted form.

[@RaddyDev]

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

[@bilal5488]

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❤

[@RaddyDev]

I appreciate you being here!

[@bilal5488]

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

[@viewsbyblur]

my json data shows as a huge paragraph on the browser instead of json format, is it fine to leave it this way?

[@RaddyDev]

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".

[@viewsbyblur]

@@RaddyDev thank you! Ill try this out

[@viewsbyblur]

it worked, appreciate that again.

[@viewsbyblur]

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

[@jumbo999614]

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.

[@RaddyDev]

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

[@MCAAARULMishra]

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

[@RaddyDev]

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

[@smeetcoder9021]

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

[@RaddyDev]

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

[@user-fl1km1jq1d]

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]

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

[@user-fl1km1jq1d]

@@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]

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

[@RaddyDev]

@@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

[@user-fl1km1jq1d]

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

[@CristianoRonaldo-vv6sv]

22:00

[@bilal5488]

please also create on project with JWT auth and cookieparser mern project please

[@RaddyDev]

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

[@bilal5488]

@@RaddyDev thankew waiting for that❤️

[@viewsbyblur]

my app.post route for api/books keeps giving me an error on thundercloud, I made sure the route in the server is correct.

[@viewsbyblur]

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

[@viewsbyblur]

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.

[@viewsbyblur]

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