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!
@@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.
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!
⭐️ Course Contents ⭐️ ⌨️ (0:00) Demo ⌨️ (1:35) Overview Diagram ⌨️ (3:39) Starting Our Server ⌨️ (7:09) Create PostgreSQL Database and Table ⌨️ (13:14) Connect Database and Server ⌨️ (15:30) Build Routes with PostgreSQL Queries ⌨️ (32:37) Restful API Overview ⌨️ (37:54) Set Up the Client Side (React) ⌨️ (40:59) Build The Input Todo Component ⌨️ (50:32) Build The List Todo Component ⌨️ (59:10) Build the Delete Button ⌨️ (1:04:49) Build the Edit Todo Component ⌨️ (1:19:47) PERN Stack Review
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.
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...
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.
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
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!!!
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!
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.
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.
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.
@@Lindaine Hey! I know this is several years late, but I ran into the exact same issues you were talking about here, so I thought I'd give an explanation in case you were still curious about this, or for anyone else who is still struggling with this. So the way to fix this is that you need to move some of the code functionality out of the ListToDo and into the app so that it can act as a parent. ListToDo and InputToDo are both considered parallel children, and thus, cannot directly modify one-another. To fix this, we need to move the useEffect, useState and getToDos that are in ListToDo out and into the app. Since the app is considered the parent of ListToDo and InputToDo, whatever it possesses can be used on all of its children. We will also need to make another useState to notify the useEffect when to update the inputToDo. I just made my new one look like this as an example const [changeTodo, FlipToDo] = useState(1); We first need to give setToDos and todos to ListToDos in order for the list to continue functioning as it was before. We pass in the children by doing the following: then in ListToDos we change the header to look like this const ListToDos = (props) => { const setTodos = props.setTodos; const todos = props.todos; this allows the children to be read in as props, and for the props to be assigned the proper names. ListToDos should just work now, since the methods calls will continue to function properly, with the only difference being that these methods being used are now located inside the parent app component instead of inside of itself. For InputToDo we do the same thing I put above but for ChangeToDo and FlipToDo. We then replace the window.location="/" with FlipToDo(!changeTodo); (I also suggest putting in setDescription("") so that the input box will clear, since it no longer doe so through the page re-render). Lastly go back to the app and put changeToDo inside of the brackets of the useEffect. This is all done so that adding in a new object will trigger our new useState, which is the trigger for useEffect to call another getToDos. This getToDos will then also call setToDos, thus changing updating our displayed list without needing to refresh the page! This comment is obscenely long, so if anything didn't quite make sense feel free to ask any questions you have and I'll try to explain myself better.
@@vinoperson1239 I did not expect this lol, but thank you for the explanation! I'm a front end dev now and I hope your answer will help other people that's learning as well.
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!
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.
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 !
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!
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 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.
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!!!!!
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 ✨✨
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!
@@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.
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 😅❤
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 " "
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! 👌🏼
Tip for you guys following along in 2024. Fragments is no longer needed in react. You can just use empty elements "" instead of a fragment now.
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!
so true!
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.
ah yes its a good practice, I have done that it made my day easier and faster
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!
So these jobs aren't just a myth?
Freecodecamps bots RT alot of people
@Aaron Daisuke_Luv Which part are you had stuck?
@@tyrrelldavis9919 My Goal is, Frontend for Career, Fullstack for freelancing, what do you think ? :D
@Aaron -_- me too, wonder what they do within these framework, especially when you read their hype about it.
@@tyrrelldavis9919 hey man I'm working as Fullstack JS + Postgres now, and I'm self-taught with freeCodeCamp, so yea, these jobs aren't a myth
Oh my word, there is the entire internet, then there is this video. Thank you so much for sharing this, it is immeasurably helpful.
Tip for you guys following along in 2023. Fragments is no longer needed in react. You can just use empty elements "" instead of a fragment now.
This has helped tremendously thank you.
This was the case when I first learned React in 2019
@@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.
is just the short hand for
Thank you so much. This helped me a lot. Im gonna repost this for people in 2024.
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.
Yup. Same here in terms of barebones SQL!
The best thing is to stay away from abstractions if you are learning something for building better logics
This is the best and most holesome video in existence. My homevideo of my son being born is not even a close second.
Oh wow ahahah
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!
Exceptional quality. Very straightforward, not too slow, not too fast.
⭐️ Course Contents ⭐️
⌨️ (0:00) Demo
⌨️ (1:35) Overview Diagram
⌨️ (3:39) Starting Our Server
⌨️ (7:09) Create PostgreSQL Database and Table
⌨️ (13:14) Connect Database and Server
⌨️ (15:30) Build Routes with PostgreSQL Queries
⌨️ (32:37) Restful API Overview
⌨️ (37:54) Set Up the Client Side (React)
⌨️ (40:59) Build The Input Todo Component
⌨️ (50:32) Build The List Todo Component
⌨️ (59:10) Build the Delete Button
⌨️ (1:04:49) Build the Edit Todo Component
⌨️ (1:19:47) PERN Stack Review
Thank you!
Very clear video explaining the working of a Full stack application with React.js and Postgres. Just love it.
Such a concise and thoughtful tutorial!
This is among my favourites. Thank you, Stoic!
PERN stack would be so interesting if express was called oxpress.
lol
lol
C-c-combo breaker
😂😂
And if you use Angular and MongoDB, you would be using MOAN stack 🤣🤣
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.
This was such an easy tutorial to understand PERN Stack. The Stoic Programmers are great teachers.
I'm at 23:43 in the video. This is a great tutorial to learn PERN. Thanks so much for the work and your energy. Love it!
Literally working on a project using this stack. This will help tremendously, thank you !
Hey !
Ik its been long but were you able to implement it with axios?or did u just use fetch?
I can't believe this is free... THANK YOU!
I know right. jackpot
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...
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 presume this is the first & full PERN Stack tutorial on UA-cam. Thanks buddy. This will help.
That's precisely what I needed to get started with relational DB and Postgres. Such an awesome tutorial! Tks for that guys!
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
`res.json(newTodo.rows[0]);` just like the video works fine for me
I have to say this has been probably the best tutorial I have come across in my year of learning
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!!!
This is so amazing. All you need is state management (e.g. Redux) and you're ready to build large full-stack apps.
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!
This is one of the best tutorials I've seen, thank you so much you where amazing.
C'est le meilleur cours de React en Full-stack jamais vu. Thank you very much
Great tutorial. Doing this in 2021 I needed to use Bootstrap 4, not Bootstrap 5. Modal didn't work properly until I used v4.
Same thing -- be sure to use bootstrap 4 links in your index.html file too!
If I am not wrong, I think Bootstrap v5 doesnt use jQuery anymore
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.
For anyone seeing this in the future this one will work with Bootstrap 5.
Launch demo modal
Modal title
...
Close
Save changes
@@dremiq6670 thanks my friend!!!!!
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.
Thank you, Mr. Stoic. You also have the best voice!
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!
The best tutorial I've ever seen , congrats Engineer
Please do some giant tutorial series with PERN Stack..
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.
@@Lindaine Hey! I know this is several years late, but I ran into the exact same issues you were talking about here, so I thought I'd give an explanation in case you were still curious about this, or for anyone else who is still struggling with this.
So the way to fix this is that you need to move some of the code functionality out of the ListToDo and into the app so that it can act as a parent. ListToDo and InputToDo are both considered parallel children, and thus, cannot directly modify one-another. To fix this, we need to move the useEffect, useState and getToDos that are in ListToDo out and into the app. Since the app is considered the parent of ListToDo and InputToDo, whatever it possesses can be used on all of its children. We will also need to make another useState to notify the useEffect when to update the inputToDo. I just made my new one look like this as an example
const [changeTodo, FlipToDo] = useState(1);
We first need to give setToDos and todos to ListToDos in order for the list to continue functioning as it was before. We pass in the children by doing the following:
then in ListToDos we change the header to look like this
const ListToDos = (props) => {
const setTodos = props.setTodos;
const todos = props.todos;
this allows the children to be read in as props, and for the props to be assigned the proper names. ListToDos should just work now, since the methods calls will continue to function properly, with the only difference being that these methods being used are now located inside the parent app component instead of inside of itself.
For InputToDo we do the same thing I put above but for ChangeToDo and FlipToDo. We then replace the window.location="/" with FlipToDo(!changeTodo); (I also suggest putting in setDescription("") so that the input box will clear, since it no longer doe so through the page re-render).
Lastly go back to the app and put changeToDo inside of the brackets of the useEffect.
This is all done so that adding in a new object will trigger our new useState, which is the trigger for useEffect to call another getToDos. This getToDos will then also call setToDos, thus changing updating our displayed list without needing to refresh the page!
This comment is obscenely long, so if anything didn't quite make sense feel free to ask any questions you have and I'll try to explain myself better.
@@vinoperson1239 I did not expect this lol, but thank you for the explanation! I'm a front end dev now and I hope your answer will help other people that's learning as well.
best coding YT Channel
i hope we Get Rust soon
bro just guided me thru my 1st full stack work.
hell yeah
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!
Thanks!
Very Good Learning from You Sir....👍👍
"okay?".. makes me say yes in my mind. Great.
Although this video is three years old but the explanation is pure gold
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.
Amazing man!!! You completed a Full Stack Web Developer bootcamp in one hour and twenty-two minutes."
This with Bootstrap is the perfect tech stack for a beginner in my opinion.
I don't think React is for beginners. It requires foundational JavaScript knowledge to understand what some of the syntax is doing.
@@mandy1339 I mean beginning your first full stack project, when you're at that point.
@@PR1V1LE6ED Gotcha, yea that makes sense
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 am using MySQL instead of Postgres to this course and it's working fine!
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!
literally the best video on the topic, thank you so much!
Thank you for this tutorial. Concise and easy to understand!
Thanks my man, really helping out with my school project
Your way to explation is pretty good.
that clicking noise is insane lol 100% turn that off for recording videos. Appreciate the clear, concise explanation though, this is a great lesson.
thanks for this video. now it feels like i have applied all the things that i have learnt so far❤
Mulțumim!
This is such a great tutorial! Really easy to follow!
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.
Where do you include it though bro ^^
This is straight up gold, tysm bro
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.
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!!!!!
I cant thank you enough. ı am at 37.26 I have learned crud operations from this video please do more pern stack tutorial
Amazing, just came from your other tutorial, great work
one of the best tutorials for beginners!
I feel it. Someone is trying to make a really good replacement for express, and they don't care what it's called, so long as it starts with an O.
your explanation is fantastic!!!!!
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".
It's a really great tutorial, very clear and staight to the point. Thank you!!!
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 ✨✨
Just completed this tutorial end to end
Had like 5 extra fields but it was still really helpful🔥🔥🔥
very good tutorial using Postgre!!!
Really enjoyed this tutorial...Thank you.
Really fantastic tutorial, thanks for your time and dedication.
Excellent CRUD tutorial 🔥🔥🔥. Once you get this down you can do your own thing.
love this.... Exactly what i looking for..
Thanks man, awesome video, straight to the point and clear
Great video, when i got it to work it was like yay!
I just wanted this tutorial... Thanks so much.. God bless you
Thank you very much for making this course!! Your explanations are very easy to understand!
Thanks for a great tutorial. You saved me a ton of time from following other tutorials.
so good at teaching man
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!
I learned a lot with this tutorial. You are amazing!
I really enjoyed the course, thank you!
Thank you so much for making a simple app with this stack! Super helpful.
thank you so much for the great content.
such an amazing teacher you are ! Please make another project on PERN stack. Will really help us beginner developers!
Great powerful explanations, required amount of details; restful api server, postgre db queries and react front end are all well covered. Thank you
Saw this ytube video, but I hesitated since it's 2 years old already. Is it not outdated?
@@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.
Waiting for sequel and NODE so long!!!
honestly enjoyed how he only explained wut mattered and how he moved from the big picture and diagram into the smaller parts
how u rectified this error ? TypeError: todos.map is not a function
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 😅❤
Thanks. Did it with React + tailwind with Typescript. Still applicable in 2022.
thanks for commenting. Wanted to make sure this was all still applicable.
I thought postgre is dead
@@SonGoku-ep4wj why you said that?
This video is amazing !! Thanks for sharing your knowledge :D
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 " "
Great nice tutorial..I learned a lot...I'm a simply beginner in this slack...
very nice tutorial fast and clear thankyou very much
Thank you soo much for this wonderful tutorial . GodBless
If you are following along with the video - we are on Bootstrap 5 now so bear that in mind. This video uses Bootstrap 4.
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! 👌🏼