🛑 3hrs to Build and DEPLOY an Authenticated TO DO APP! PostGres + React + Node.js + Kinsta

Sponsored Message:
Kinsta provides Application Hosting, Database Hosting, and Managed WordPress Hosting for projects of all sizes, for 55,000+ users and they’re powered exclusively by Google Cloud Platform and its premium tier network to ensure lightning-fast load times.

Kinsta’s new Application Hosting and Database Hosting simplifies your workflow in seconds. Building and maintaining complex infrastructures for your web apps is now a simple task. Connect your GitHub account, select your repository, and deploy your app. Plus, you can connect your database and benefit from fast internal connections with no row count or query limits.

And if you’ve followed along with this tutorial and built an app with Kinsta’s Hosting, share it on Twitter using the hashtag #PoweredByKinsta and tagging @kinsta- they’ll send you a free swag kit!

____

⭐ New to code and none of this is making sense? Watch my '12hr+ YouTube Coding Bootcamp' in which you will learn HTML, CSS and JavaScript Fundamentals completely from scratch. It's on my channel and its 100% free.

You can also find me on:

[KhafidhTriRamdhani]

00:00:00 Project overview
00:00:54 Kinsta registration
00:04:20 React creation
00:05:20 Manage files using VS Code
00:05:40 Clean up default React setup
00:07:15 Create client directory
00:07:40 Create server directory00:
00:08:00 Server initialization
00:08:50 Project root initialization
00:09:15 Root package adjustment
00:11:20 Create server.js file
00:12:05 Client side initialization
00:13:15 Create Components folder and files
00:18:10 Styling with css
00:25:50 Create PostgreSQL database
00:27:00 Create an SQL file
00:33:25 Install server packages
00:36:00 Server package script adjustment
00:37:00 Server start
00:37:40 server.js adjustment
00:41:40 Create db.js file
00:43:00 Create server .env file
00:45:00 server.js adjustment - continue
00:48:30 Client App.js adjusment
00:59:30 Client ListItem.js and index.css adjustment
01:04:40 Client TickIcon.js and index.css adjustment
01:15:50 Client Modal.js and index.css adjustment
01:20:50 Client ListHeader.js and index.css adjustment
01:26:30 Client Modal.js and index.css adjustment - continue
01:33:20 Client ListHeader.js and index.css adjustment - continue
01:36:30 Client ListItem.js and index.css adjustment - continue
01:40:35 server.js adjustment - continue
01:44:20 Client Modal.js and App.js adjustment - continue
01:47:20 server.js adjustment - continue
01:48:50 Client Modal.js adjustment - continue
01:49:40 Client ListItem.js and index.css adjustment - continue
01:51:05 Client Modal.js adjustment - continue
01:52:45 server.js adjustment - continue
01:55:55 Client Modal.js adjustment - continue
01:58:10 server.js adjustment - continue
02:00:15 Client ListItem.js and index.css adjustment - continue
02:02:20 Create client .env file
02:03:50 Client Auth.js and App.js adjustment
02:13:20 Client index.css adjustment
02:17:40 Client Auth.js and App.js adjustment - continue
02:20:05 server.js and Client Auth.js adjustment - continue
02:33:00 Client App.js adjustment - continue
02:35:50 Client Auth.js and server.js adjustment - continue
02:40:00 Client ListHeader.js and App.js adjustment - continue
02:43:00 Client ProgressBar.js and styling concept- continue
02:45:20 Client ListItem.js and index.css adjustment - continue
02:46:00 Client ProgressBar.js and styling adjustment - continue
02:48:15 Client ListItem.js and styling adjustment - continue
02:50:00 GitHub uploading
02:51:20 Kinta deployment

[cpjordan]

This was an excellent tutorial. I learned a lot and everything worked flawlessly from beginning to end. Love your teaching style! Thank you.

[ricrendrer]

That was such a great tutorial, thank you so much! No video has explained it as clearly as yours did. Keep up! 🔥

[CalAaron]

This was such a useful tutorial, I learned so much more about React following along. As always, this lesson was amazing. Thank you

[abstractss_]

For anyone having problems with the env variables @ 44:55 looks like you can't name your env variable USERNAME, try naming it USER and place in as your user
// .env
USER=fakeuser

// db.js
user: process.env.USER

[davidef.]

I've learned a lot in less than 3 hours, thanks a lot Ania !

[regilearn]

MORE postgres + typescript + sequelize + REACT Video pls, bcz youtube have lot of mongodb videos, but no PERN Stack videos

[nispre]

Oh my God, you are sooo awesome and easy to understand! Thank you so much for such lessons!

[cuti]

Cannot wait to watch it.Kindly do this project in next js 13 ❤😊

[kamertonaudiophileplayer]

Inspired by your video I implemented TODO app for Android in 3 hours. Thanks a lot for the idea and I will look forward for new ideas from you.

[noobmaster]

Thanks. I learn english to do your tutorials. When i finish i up to my github. Thanks from my heart for you help.

[guig]

As allways amazing stuff Ania ! Very instructive :)

[luciaolivera]

you are one of my favourites programming teachers<3

[jgoloven]

Briliant and easy to understand, step by step guide 🔥🔥🔥

[SuperPompey]

New glasses look good! Nice work on this build.

[MrLgbk]

Pretty nice tutorial, you talented creator. Please keep doing such videos. Thanks.

[retrofuturst]

clearing out my weekend to watch this <3

[amandac.]

hi ania!!! i have one question how come you don’t use git init when creating your project folder (development -todo-app), that way you could have just done npx create-react-app client that clay you don’t have to worry about creating a client folder? hope i explained my question good. Just curious😅 Love you and all you share and explaining how to code in such a simple and understanding way for everyone ❤❤❤❤ i really appreciate you sharing your knowledge i wouldn’t know what i would’ve done without you as i start my career in software development, transitioning out the education field into tech.

[bellabear]

Anna you should do a (Part 2) Security settings and testing. In this day and age it's important. Great tutorial I love your channel.

[ashwinsuryawanshi]

Thank you for giving me the joy of setting up my first server.