Learn the PERN stack by building a Todo List

Подписаться 3,8 тыс.

Просмотров 22 тыс.

50% 1

In this tutorial, we are going to use PostgreSQL (pg), Express, ReactJS, and NodeJS to build a full-stack application!
Video Bookmark
0:00 - 1:50 Demo and Prerequisite
1:50 - 3:53 Demo Diagram Explained
3:53 - 34:01 Build Restful Api
34:01 - 38:54 Restful Api Overview
38:54 - 41:57 React Set Up & Wireframe
41:57 - 52:07 Build Todo Input Component
52:07 - 58:39 Build List Todos Component
58:39 - 1:03:39 Delete Button
1:03:39 - 1:17:16 Build Edit Todo Component
1:17:16 - 1:21:59 Overview Of the Entire Project
Completed Project : github.com/ousecTic/pern-todo...
PostgreSQL Installation : • PostgreSQL (Postgres) ...

Опубликовано:

5 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 59

@Kprywatne 4 года назад

Question: When you edit a todo it re-places it at the bottom of the list. Why is this happening and how do we edit a list item and keep it at its index?

@TheQuackLearner 4 года назад

Hey Konto, ah it great to hear back from you again! Good question and one I should have specify in the video. Check out this stack overflow post (look at the accepted answer) and it should answer your question => stackoverflow.com/questions/10064532/the-order-of-a-sql-select-statement-without-order-by-clause . To emphasize on part of the answer, PostgreSQL or any other RDBMS will give you the order of rows depending on the most efficient algorithm used to produce that data. Now if you are wanting to specify the order, you would need to use ORDER BY clause . Check this clause in w3school => www.w3schools.com/sql/sql_orderby.asp

@Kprywatne 4 года назад

Why are there SO FEW up to date tutorials with this stack? Is it an uncommon stack in the wild? I thought Postgres was prety popular. All the tutorials with react show mongodb.

@Muazuestuas Месяц назад

This guy is a great teacher.

@ricardodelgado8429 4 года назад

You're an absolute here. There are basically no tutorials on the PERN stack, thanks a lot and you got a new subscriber!

@mexicanpimp33 2 года назад

Please come back and teach us more!!! You have amazing teaching skills!

@cassidylim9222 2 года назад

You're an excellent teacher! Keep up the great work!

@funcomedy2 Год назад

You're an excellent teacher! Keep up the great work! 👍🏻

@abellino5ive 4 года назад

Thanks a lot , this tutorial ha been very helpful for a beginner like me to understand how PERN works .

@m2tdev 3 года назад

thank you. This was spectacular for me as a beginner.

@jgvlc 3 года назад

Really fantastic tutorial, thanks for your time and dedication.

@ayjayaywhy 3 года назад

Great tutorial for a beginner like me. Very well explained.

@manujabandara8487 4 года назад

GREAT JOB MAN!!!! BEST ONE I HAVE GONE TROUGH

@trunojoyo84 2 года назад

such an amazing teacher you are ! Please make another project on PERN stack. Will really help us beginner developers!

@Noble_Savage 8 месяцев назад

These series of tutorials are amazing, truly a godsend compared to a lot of stuff out there. I followed along with my own project (parsing multiple json fields) and it worked out well, the only snag I had was accidentally setting react and nodejs on the same server. Thanks!

@AverageCho 3 года назад

Just finished watching the Build restful API section and I gotta say WOW, you make this stuff sooooo easy! I have paid Udemy courses that don't teach as well as you do. Thank you for putting this video together!

@musicproductionbrauns2594 3 года назад

greate tutorial. I never had touched react but still understood everything fine! :)

@lotusea7964 3 года назад

may God give you everything you want in this life !! please more tutorials you are a life savor!

@BlortNet 4 года назад

Keep this up, this tutorial is gold

@BlortNet 4 года назад

Nice newly up to date tutorial

@Jaime-yc8nq 3 года назад

This video is sosososo helpful!! really thanks to upload this video and share your knowledge!!

@marcw6875 Год назад

This was a very useful tutorial. I'm pretty new to React and had been looking for an explanation of how to get a backend up and running. I've been using MySQL for my databases up until now, but thanks to this video and the shorter video you made where you created the API with MySQL, I was able to put everything together in a functioning ToDo list. This will hopefully be very useful in trying to get a couple of my side projects up and running. I had the front ends mostly created, but wasn't sure how to access my databases. I think the knowledge I gained here should help with that. Thanks!

@raulbarriga7416 Год назад

I need to learn the pern stack. I already know the mern stack & already had a mern todo app, ergo, to save time, I just used my previous frontend part from the mern todo app & just followed your tutorial for the backend setup & postgres in particular.

@malmossa 2 года назад

I love it, simply project but very informative but want to tell everyone instead using postman i use Thunder Client VS code extension that way you don't need to leave vs code, very nice extension. Thank you, sir, for this tutorial

@opensourcerror 4 года назад

someone that explains, not just writes some code. thank you

@Kprywatne 4 года назад

Holy crap I tore my hair out for the past two days looking for a todo list tutorial with this stack and here you are like a knight in shining armor!! I hate making unsolicited requests, but would you consider an add-on to this video in the near future for adding jwt register/login to this project?

@TheQuackLearner 4 года назад

Hi Konto, thanks for watching! A jwt register/login sounds interesting so I will look into it. Thanks for bringing it up.

@Kprywatne 4 года назад

@@TheQuackLearner awesome!

@ericcartman4799 3 года назад

@The Stoic Programmer thanks for that

@schmutz06 3 года назад

This is a great starter tutorial. I understand how to do this locally. How do you put everything on a website? Do you just drag and drop via FTP and it works? There’s a lot of files that I’m unsure are all needed. What does it mean to ‘deploy’ a PERN stack?

@omar9987 4 года назад

PERN > MERN

@vivienhounsounou1867 2 года назад

The delete function is giving me error msg invalid input syntax for type integer: undefined. But it’s working fine on postman?

@oscarmartinez343 2 года назад

Hi, im following exactly and when you paste the edit modal and delete the things, my modal does not open, why

@josephl2027 3 года назад

Ive completed this tutorial and its great! I can't seem to get window.location = "/" to refresh the list onClick of the edit button. My code looks identical and i cant find the bug :(

@treddshort 3 года назад

At ~ 20:40 my request keeps hanging in postman and I get `connect EHOSTUNREACH 0.0.21.56:5432...` in my console. Is there something different I need to configure when doing this on a Mac?

@jumbo999614 3 года назад

The part you use Bootstrap 4 Modal, why doesn't generate error? I thought REACT only allows "className". Anyway, the modal doesn't work on my code. When I click the edit button, nothing happens.

@PhuongTran-bh6jv 4 года назад

I deploy server on Jerome but I got error h12 , anyone have the same problem? And how can I fix it?

@imzero1421 Год назад

Can i use your video to upload to my website for non-profit purposes and share to everyone.

@alexandershpilka5848 4 года назад

Thank you for the tutorial. One question: is it a good idea to refresh page in SPA with window.location = '/'?

@ericcartman4799 3 года назад

no, it is not a good idea. An alternate way is to elevate the state from ListTodo.js for the todo to App.js and update the state in App.js when ever anything changes so that it is reflected without reloading the page.

@josephl2027 3 года назад

@@ericcartman4799 How would this be implemented?

@ghoulian 3 года назад

I've been trying to diagnose an error "Unexpected token < in JSON at position 0" i get when following along with this tutorial. What could it be? I'm just following along

@josephl2027 3 года назад

Did you find the bug?

@jonellman3388 4 года назад

sweet tutorial. I followed along but my state does not update on the filter function in the deleteTodos. I still have to refresh the window manually. I've tried everything and it just doesn't work how does it work in your example

@jonellman3388 4 года назад

I realized my mistake. In my delete express route I forgot to include res.json("Todo was deleted") I'm confused why this was needed. Also another thing I find weird is that the "deleteTodo" variable is not being called anywhere, it's just declared as a pool.query. But since it's not being called, how does the query execute?

@TheQuackLearner 4 года назад

Hey Jon, let me see if I can help you with this. Just to make sure our code is the same, is the part where you use the filter look like this: setTodos(todos.filter(todo => todo.todo_id !== id)); I had faced the same problem like you , because I accidentally had a typo around this area. Also feel free to use www.diffchecker.com/ to check if our codes are the same. Tell me how it goes Jon

@TheQuackLearner 4 года назад

@@jonellman3388 Nice! Just saw the message.

@jonellman3388 4 года назад

@@TheQuackLearner Thanks!

@zackcooper-black6860 2 года назад

How do we make it so the list refreshes when we add an item to the to do list? This might be more complex.. I think it has something to do with Providers or Subscribers?

@c13laser Год назад

the getTodos method has to be run after InputTodo.js's onSubmitForm method. I ended up moving the getTodos method to the parent file, then passing it as a prop to the component

@treddshort 3 года назад

anyone else getting a 'connect EHOSTUNREACH 0.0.21.56:5432' when trying the initial 'INSERT INTO' statement?