Videos like this are one of the main reasons why I love the internet. Free and high quality education for those who are willing to learn. Thanks a lot!
I am so glad I found this tutorial. I have been all over the web looking for this exact thing. Sometimes when you're new to something, you just don't have the vocab to find help on what exactly you're looking for. PERN Stack is new verbage to me, and that has been so nice!
Pro tip when it comes to using Postman: Create a new collection by Collections -> +New Collections -> in the created folder click on the three dots "..." -> Add request -> Give the request a name like "Get all todos" or something -> Save to your newly created folder. Then adjust the request to whatever suites your needs and press save (which can be found in the top right corner next to the Send button). That way you don't have to recreate all of the calls each time you want to run test towards the backend.
I was Frontend Engineer(especially on react), and i always waiting for MySQL/MariaDB/SQL's with node, it so rare, so with this tutorial it helps me to build fullstack web, thanks!
I use VueJS for my frontend projects, so came to this video for how you integrated Postgres with Express. So many boilerplates and videos use Sequelize ORM to do this, so I was happy to see one that just went bare bones SQL. Great job.
That's a good one! Short, quick, and simple. Ideal for those who are figuring out how to marry those 4 things together for the first time. Thanks, man!
@@TunedInLive Yes, in that case use something like a table or elements, fragments are just meant to wrap blocks of code where you don't want a separate div.
You copied the wrong code for bootstrap 5. Go to the bootstrap website to the modal component section and make sure it's the docs for bootstrap version 5 and then copy that code.
100% I’m used to doing MongoDB from school and tutorials and now I’m learning MySQL in my architecture class and I realize how amazing it is. This tutorial literally teaches the core core fundamentals. I’m considering doing something similar with redux. If I do, i wanna make a video. I’ll come back to this and link you if I do!
might consider using Sequelize to abstract raw SQL queries into something more JS-like. Shoot, maybe even axios instead of fetch as well. This video is great!
Ohhh Man. Thank you so much for this video. I studied MERN and now i started learning PERN. and this is the first video I've seen related to PERN. And now I'm so happy, man. Love from KARNATAKA.
Use thunder client instead of postman. Its essentially the same thing except its a vscode extension that creates a new sidebar area for testing your API. Good tutorial!
If you lift up the todos state to App component, you don't have to use window.location = "/" to get the new todos, you can simply pass down a function that sets the todos state to the input component, so after you submit you push a new obj onto the array so the list todo component (which consumes the state) will automatically re-render. Of course if you use redux its not gonna be a problem at all since you can dispatch a state change anywhere. Love the video, just that using window.location = "/" to force a refresh is kinda against the whole point of react and you wouldn't want to just reset all the states in a larger project.
can you please give an example, I'm still new to react so I don't really know what should I do here. I know that the window.lcoation thing is wrong but I don't know how to implement what you said, especially the input component.
I love it so much when my teacher sounds so enthusiastic about the subject it keeps me glued. Thanks, i was interested in the Postgres integration and you did a fantastic job explaining.
I can't express how much thankful i am for this video. No further words, just WOW oh WOW. Found what i was searching for a long time. Thanks a lot again...
This was amazing... I have been beating myself up on the CORS issue for days now. Was not aware you could just add the command when installing express. Thank you!!!
Really good tutorial ! At times a little too fast paced and non - descriptive of the steps you were taking, but it could be because Im fairly new at writing code in react, and Im still learning the basics. Thank you !
I love how you created the edit todo component and rendered that with it's own logic. i would normally have put the logic in the parent but this is so much better. TIL something new thank you!
This was clearly laid out and explained. Thank you so much for taking the time to be clear. You did NOT leave out crucial information and I was able to complete the entire build and then iterate from it.
for anyone having issues with postman stuck at sending request (around 20:10) beware of line 22 res.json(newTodo); replace that by res.status(200).json(newTodo); I dont know if something has changed over the last 4 years but this worked for me
for those that are stuck trying to get a response in postman after sending a post request, you need to include "res.send("your message");", after receiving the request. It seems like the post method does not automatically send back a response after a request is received.
An awesome tutorial, thanks for it! Very nice thing about it is how it shows usage of various tools and approaches by example. The main thing that I miss in it though is deploying the app which would help feeling like "ok, I did it, now I can learn more, expand this project or build something different".
If this is the level of a free course , I wonder what will be the level of value in your paid course !! Loved to see so much care for the viewers and you explaining everything , one word . Wonderful ✨✨
An excellent video. I've been postponing a first project with this stack for a long time, a little laziness, of course, but this excellent tutorial was the trigger to get my hands dirty.
To good to be true. It is so easy to do when you find someone like The Stoic Programmers teach it. You just see how easy it it and I think I will go with the PERN stack for some big project. Hope to learn how to connect Nextjs with Postgres. Thanks Guys!
Few updates in June 2021 : in post : pool.query( `INSERT INTO "todo" (description) VALUES ($1) RETURNING *`, [description]) in get: pool.query(`SELECT * FROM public."todos"`) have backticks in query and database_name in " "
Just the refresher I needed! Been bogged down in C# and MSSQL for too long. I'd lost my bearings I had well established with PERN stack. Thank you so much!
Thank you so much for explaining the PostgreSQL part so well! I was frustrated to work with SQL db with node and this video helped me setup everything perfectly! 👌🏼
I know I'm just another person who will say it, but really, thank you for this tutorial. I was struggling with API - React - Postgres part for so long that I was about to abandon my dream of becoming a dev 😅❤
es increiblo lo facil que lo explica, con todos los conecptos que tenia no sabia como armar todo esto, me mostraste una forma ordenada de armarlo, muchas gracias!!!!!
Great beginner or refresher video for PERN stack. Some things have changed in react recently and this is a great quick update. It goes fast in a couple of places (postman) but you can stop and pick the testing software you want. Very few tutorials show how it all fits together. Thank you!
@@satellitesage2487 I have followed whole tutorial by implementing also, did not face so outdated practices although I am not very competent person in these topics. But everything worked well and there was no need to update/revise any meaningful parts of it.
Everything what I needed ❤️ Tysm ... so well explained ...very clean ..I had made notes while learning ...your are the best teacher so good tutorial without any ads ..great love you❤️😊
Nice one I was try to find the best way to add back-end to react with this tutorial I think it's the best way to a fresh starter at back-end for understand the basics and CRUD app
1:17:01 -Instead of doing window.location = "/" you could re-render the list like every 3seconds for example or whatever suits you. useEffect(() => { setInterval(updateDescription, 3000); }, []); You could also do the following: useEffect(() => updateDescription()); - Without the [ ] after the useEffect but it will cause error and memory leak so do the first one.
I see that there is no ORM here. Is that a good approach? Honestly I would prefer an ORM not being used as I am very well-versed with SQL. Someone please advise.
If you just want to perform basic crud operations and some basic one to o ne and one to many relations ORM is definitely the way to go , but if you want to perform much complex tasks like joining and stuff and processing , Raw SQL is the way to go ! I would although suggest you to use just Raw SQL , as senior developers also suggest this , it might take some time to write things , but it's definitely worth it and much scalable!
The Postman part was a bit of a curve ball since i dont know how it use it, got a bit discourage but continued watching and only realized that you wanted to set an example
Really good tutorial. Concepts explained well. Was worried it may be out of date as it was made in 2020 but it appears to still work fine. I am using the current react v18.2.0 and also bootstrap5 (instead of bootstrap 4 which is used in the video).
