React Node.js MySQL Full Stack Blog App Tutorial

If it is valuable to you, you can support Lama Dev.

Join Lama Dev groups

0:00 Introduction
01:53 Installation
04:26 React Router Dom 6.4 Tutorial
11:47 React Login & Register Page Design
17:20 React Navbar Design
24:42 React Footer Design
26:03 React Blog Website Homepage Design
34:22 React Blog Single Post Page Design
42:17 React Add New Post Page Design
56:57 MySQL Basics with MySQL Workbench
01:27:06 React Context API (Login & Logout)
01:36:40 React How to Fetch MySQL Data
01:58:33 Fetching Recommended Posts
02:00:38 React MySQL How to Add New Item
02:10:00 React MySQL Create and Update Post
02:21:30 What’s Next?
02:23:00 Outro

[shivammahajan]

At 1:16:00 if anyone getting the SQL or the cors error, follow the following steps:

1) To resolve the SQL error, npm install mysql2 and update the import statement (import mysql from 'mysql2')

2) To resolve the cors error, npm install cors and -> import cors from ''cors' . Then, include this in your code - > app.use(cors());

Hope this helps!

[PattySpicy]

Wow look at the design, How clean is that !!

[sivakarthikeyans]

1. in node js express use cors to avoid cors error
const corsOptions = {
origin: true,
credentials: true,
};
const app = express()
app.use(cors(corsOptions));

2. in axios login add { withCredentials: true } to set cookie
3. use jsx not js as file extension

[webdev]

amazing amazing stuff.... really react with sql wow

[adindatasyaamelia]

Thank you for this video!! I really like how you explain things

[mdhossen]

this video is very helpful,
Thanks,

[Ash-ufsn]

Great Video! Thanks. Well some things work out quite simply for you, I had my share of debugging when the logout didn't delete the cookie.
the postrequests without {withcredentials: true}...the image upload... the cors erros...all of it made a f*king mess. Other than that, pretty awesome video.

[GAMEZONELITE]

cannot follow as I can't follow the whole clone git and install library. After cloning, there's already a clear difference between what the repo in the video has and the current repo. Still, I continued on, thinking that it's not a big deal, until I went and installed the library. There seems to be lacking when installing the library like the "node_modules" file. and from there can't "yarn start" as the script doesn't exist. I tried cloning the finish "blog-app" repo instead. Installed the library and it installed what was on the video. typing yarn start does launch the app.

Does anybody have a copy of the old repo, the repo version from this video?

[adhdmed]

Please make a video on how to upload this site with Database to the internet

[AvnishKumar-hrwu]

Try using thunder client an alternative of postman

[sabanabibi]

You didn't use cors middleware but it's still working, how? Please reply

[albatross]

Sir please start full course for beginners plz and share full roadmap

[Alieaz]

Hello! Great video. I'm just wrapping up a bootcamp which covers this stack and doing your project as extra practice. Tell me, what snippet extension do you use, or are they your own? I have a basic one by Burke Holland.

[srijankhadka]

i am facing problem while deleting post, 1:57:04, req.cookies.access_token is not accessing the access_token from the cookies and showing error 401 (Unauthorized) . Has anyone solve this issue

[deogenesabejuela]

Because of your tutorials. Learning CRUD from reactjs, nodejs, and express became easy for me to understand, compared to the other tutorials. What a talent. I will remember you in the future Mark that 🙂🙌👐👏👏👏👏🙏🙏🙏🙏🙏. You are helping a lot of beginners and i am one of them. Thank you!

[raphaelrocha]

i had a error with bcryptjs because its a old library, use bcrypt instead and follow along the npm for use. i was having lots of axios 404 ( forgot to change route posts to auth) and then the error 500 come ... its was the hash from bcryptjs not working properly

[iUniverse]

If you don't mind, can you make a fullstack tutorial that includes react, redux, and saga? Nonetheless, thank you very much for this great tutorial.

[christianjamesguevarra]

So refreshing to see a fullstack project-based tutorial that doesn't copy-paste CSS styling so that "we can focus on the logic" BS like most project-based tutorials here on youtube. Big plus for using MySQL instead of Mongodb (eew).

[LuisVargas]

oh man I can't believe this is good and wrong in so many ways! Lama Dev doesn't answer any comment or question. The main folder has been updated or replaced with something new. If you follow alongside you will face frustration when connecting the client to the api.

[bobbylee]

Great video. Has anyone gotten around the "Uncaught (in promise) TypeError: Converting circular structure to JSON" error msg in console around the 1:36:00 time mark when trying to log out and clear cookies/localstorage?