Big, Big Thank you! And Actually Thank you is Not Enought! You spend so much time to write down these timings! Really Thank you to Sacriface Your Time and Save Our!
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
The tutorial completely exceeded my expectations. Great learning experience. Everything made sense and worked as intended, with just one hitch. The ENV file needed to be in the root of the project -- instead of the root of the server -- for the the app to access the variables.
@@mushkansingh5757 sorry, just discovered that my GitHub account is inaccessible for being unable to verify via my old email, which I have cancelled. I have written to GitHub for help, in the meanwhile, if you like, provide the git link to your code, so I can give it a spin and see what might be the issue. Cheers.
hi @@vwpwv, I actually use pgAdmin4 too so I just kept using that for the db part. If you try and run both, you have to change Port numbers - so I would just use pgAdmin if you've already got that configured. all the sql prompts are the same in terminal. hope that helps
@@vwpwv not sure if you're using PC or Mac? I use Mac, using Homebrew to install postgres. So when you install postgres to your computer there's a setup process - this is where you configure it to your machine. then after downloading pgAdmin4 follow the setup wizard to configure. Once it's complete, you shouldn't have to do any more setup functions - just go straight into CREATE DATABASE once you've started running postgres from terminal. If you're already using pgAdmin then you should be set re configuring
This was an awesome tutorial! Thank you for taking the time to teach us. I learned a lot. I just ended with a bug where everything works fine but out of nowhere, whenever i wat to read/write to the database it fails and I don't get an error in either front or backend. What could be the issue? not sure if anyone came across this issue but I had to rename the environment variables to connect to the database as PGUSER, PGPASSWORD, etc. without this prefix the database attempts to connect with the OS username instead of the database username.
24:59 : English :if your arent found the console, you can create de database and de tables with pgadmin. Español: Si no encuentras la consola, puedes crear directamente la dataBase y las tablas con PGadmin. CREATE TABLE todos ( id VARCHAR(255) PRIMARY KEY, user_email VARCHAR(255), title VARCHAR(30), progress INT, date VARCHAR(300) ); CREATE TABLE users ( email VARCHAR(255) PRIMARY KEY, hashed_password VARCHAR(255) );
This tutorial was very useful ..i learnt soo much ...i thought i could only use ORMs when working with javascript and SQL this project is very complete
Great video. Appreciate your effort. There is a serious security issue in the current app version however. When I'm logged in and I manually change Email cookies value for someone's else email address that exists in the database, I can fetch all tasks assigned to that email address. This can be quickly fixed by auth middleware. Thanks for the video anyway!
hello , i am not able to connect postgres . all i can see in the browser is cannot get it works if i dont use the pool to query for data ... it says fatal error and password authentication failed
@@jessicapyledev Hey! I'm still searching for it. But as far as I see, you can handle everything with pgAdmin4 too! Or with SQL Shell. It must be downloaded with PostgreSQL. And you can write all codes that she writes to that shell. If you stuck or it's complicated, feel free to ask more hahahhh
same, it looks very different on windows i only found pgAdmin 4 and i can see the SQL shell too. but im not sure if its running or not or if just type 'cd postgres' on the shell will work
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.
Great video! Really detailed and easy to understand! I am new in this, I have one question for the auth part, can I use like login from google account? and if yes, will it effect the database in PostGres?
if you have a Mac, just do CTRL + CMD + Space and a little window w/ the usual emojis comes up. if you search 'tree' or 'vacation' it will be one of the options
Hi, I have a question. Would it be an advantage to use Axios here to post, get and patch the data in the database? THis tutorial made total sense, but I see lots of people using Axios for this, and I am not quite sure if start using it in my projects or not. :)
Hej Ania, how do you do that your data 'First todo" fetching via localhost:8000 look very readability with spaces and colors like real code, when my looks like single line?? Thanks for respone :)
I have a question that is stopping me deploy the app on kinsta. I can only open the app locally but running server and client seperately. I looked at the video and the github file, and in the root package.json there is no universal 'start' script for both client and server. Kinsta tells me I am missing the start command. If I use concurrently (which is not usedin the video) I get authorisation errors. Has anyone else found this?
When i follow along i get the following errors: the params in the console log doesn't return the email address i use to access to the database, it remains blank?? also ...... i can not get the first database entry to show up in the array in the console log therefore "first todos" is not appearing on the page under Holiday tick list Any solutions please???
Hello, I get stuck for days can someone please help me : I got the error while running catch line, this one console.error(error); ^ ReferenceError: error is not defined and if i try to change it the again problem i got is this : password authentication failed for user "91966"
Ania, what is your take on ChatGPT and the future of software development? Do you think junior developers will still stand a chance when ChatGPT will, very likely, do the same job as them for a way lower cost? What would you recommend new coders to focus on to be more marketable?
ChatGPT may be able to code some stuff but it can't code a full fledged production ready application. It will tell you it doesn't have that capability. There's more than code that goes into creating great programs. I think we're (Jr devs) are good for a while.
I think mac users miss one feature in vscode; in windows vscode editor, we don't have to write the full relative path of a component when import it to another js file. Just type first few letters of the name of the component and press tab and vscode automatically gives the full relative path of the component which I want to import 😎
Meanwhile in chatGPT 1. Write code for authentication api using nodejs and write connection and migration for postgres 2.use express js 3.Write code for crud apis for todo app and authenticate with above auth api 4.write routes for the above apis 5.write code for user registration with following fields using React, scss, Reactstrap and with form validation and use axios and sample api 6.write code for login page using React, scss and reactstrap.use axios and sample apis 7.replace sample apis with apis route written above code using express 8.write react components for todo app using React, scss and axios, check crud api code written above for api url and parameters
I'm getting this error: "Uncaught runtime errors: × ERROR Cannot use import statement outside a module SyntaxError: Cannot use import statement outside a module"
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
Respect dude
Big, Big Thank you! And Actually Thank you is Not Enought! You spend so much time to write down these timings! Really Thank you to Sacriface Your Time and Save Our!
This was an excellent tutorial. I learned a lot and everything worked flawlessly from beginning to end. Love your teaching style! Thank you.
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.
Exactly, most guides are just basic tutorials and cannot fit into a serious project.
@@serhiiway Anna is pretty good she does more than most. I just thought this one totally could use a part 2.
I've learned a lot in less than 3 hours, thanks a lot Ania !
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
Thank you very much, I was stucked at the json response for the first added row due to that.
Yeah, windows seems to give process.env.USERNAME as the windows login username, just using something else like DBUSERNAME or such should work.
Cannot wait to watch it.Kindly do this project in next js 13 ❤😊
That was such a great tutorial, thank you so much! No video has explained it as clearly as yours did. Keep up! 🔥
Oh my God, you are sooo awesome and easy to understand! Thank you so much for such lessons!
MORE postgres + typescript + sequelize + REACT Video pls,bcz youtube have lot of mongodb videos,but no PERN Stack videos
PERN STACK DEVS ❤😊
you are one of my favourites programming teachers
This was such a useful tutorial, I learned so much more about React following along. As always, this lesson was amazing. Thank you
This girl has so much knowledge.
The tutorial completely exceeded my expectations. Great learning experience. Everything made sense and worked as intended, with just one hitch. The ENV file needed to be in the root of the project -- instead of the root of the server -- for the the app to access the variables.
Hey, It will really helpful if you can share the code with me. I got stuck at the end I got error while clicking on submit. Thank you in advance
@@mushkansingh5757 sorry, just discovered that my GitHub account is inaccessible for being unable to verify via my old email, which I have cancelled. I have written to GitHub for help, in the meanwhile, if you like, provide the git link to your code, so I can give it a spin and see what might be the issue. Cheers.
such a cool project Ania! I love how you've added in the backend, not just client side
Hi, do you know ow can I open the window at 26:12 :) ? I can only open PgAdmin4
hi @@vwpwv, I actually use pgAdmin4 too so I just kept using that for the db part. If you try and run both, you have to change Port numbers - so I would just use pgAdmin if you've already got that configured. all the sql prompts are the same in terminal. hope that helps
@@thenicogeorge Thank you so much :) But are we configuring that page in installation?
@@vwpwv not sure if you're using PC or Mac? I use Mac, using Homebrew to install postgres. So when you install postgres to your computer there's a setup process - this is where you configure it to your machine. then after downloading pgAdmin4 follow the setup wizard to configure. Once it's complete, you shouldn't have to do any more setup functions - just go straight into CREATE DATABASE once you've started running postgres from terminal. If you're already using pgAdmin then you should be set re configuring
@@vwpwv Hi I just figured it out today, if you use window, so basically you can search for SQL shell
Briliant and easy to understand , step by step guide 🔥🔥🔥
Thanks. I learn english to do your tutorials. When i finish i up to my github. Thanks from my heart for you help.
New glasses look good! Nice work on this build.
This was an awesome tutorial! Thank you for taking the time to teach us. I learned a lot.
I just ended with a bug where everything works fine but out of nowhere, whenever i wat to read/write to the database it fails and I don't get an error in either front or backend. What could be the issue?
not sure if anyone came across this issue but I had to rename the environment variables to connect to the database as PGUSER, PGPASSWORD, etc. without this prefix the database attempts to connect with the OS username instead of the database username.
Ran into this exact issue and could not figure out what it was, THANK YOU FOR THIS INFO!
I was stuck on this, too. Thanks for posting your solution!
Same here, thank you for the solution! However, for me, it was sufficient to just set the PGUSER.
As allways amazing stuff Ania ! Very instructive :)
24:59 :
English :if your arent found the console, you can create de database and de tables with pgadmin.
Español: Si no encuentras la consola, puedes crear directamente la dataBase y las tablas con PGadmin.
CREATE TABLE todos (
id VARCHAR(255) PRIMARY KEY,
user_email VARCHAR(255),
title VARCHAR(30),
progress INT,
date VARCHAR(300)
);
CREATE TABLE users (
email VARCHAR(255) PRIMARY KEY,
hashed_password VARCHAR(255)
);
Thankyou for this tutorial, it helped me a lot :)
Thanks for watching ☺️
Hey have you try this tutorial? because i need help
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.
clearing out my weekend to watch this
Pretty nice tutorial, you talented creator. Please keep doing such videos. Thanks.
This tutorial was very useful ..i learnt soo much ...i thought i could only use ORMs when working with javascript and SQL this project is very complete
Hey, I got stuck. Can you please help me if possible can you share the code with me so i can check what i did wrong. Thanks
If I don't know React, should I code my todo app front-end with vanilla js alongside this tutorial??
If someone tell me, it would be really helpful..
You are using SQL queries. I prefer ORMs so that i can use javascript queries. As I don't know SQL. What's the preferred and best way ?
Great video. Appreciate your effort.
There is a serious security issue in the current app version however. When I'm logged in and I manually change Email cookies value for someone's else email address that exists in the database, I can fetch all tasks assigned to that email address. This can be quickly fixed by auth middleware.
Thanks for the video anyway!
I love your amazing content.
So useful, thanks! ❤
2:38:40 shouldn't the auth token only be created in the success scope?
Ania - great tutorial! Even better if code was available. Will you be posting soon?
26:00 it has taken me several days how to figure out how to install and use postgreSQL, wish it wer included in the video!
2:02 is where i am at
👍
Is it okay to mutate the state directly?
In sortedTasks, you seem to mutate the tasks directly, shouldn't you make a copy of the tasks first??
I thank you whole heartedly i have learned many new things
Hey, if you have the code of this project so can you please share it with me, i got stuck that's way Thank you.
Excelente video ☺️
i can't find to how to solve this issue : npm ERR! gyp ERR! find Python checking if Python is C:\Program Files\Python37-32\python.exe
34:00
Thank you for giving me the joy of setting up my first server.
nice project! thx for the content
Thanks. Amazing project.
Can't wait for this one 🙂
Love it...thanx Ania
hello , i am not able to connect postgres .
all i can see in the browser is cannot get
it works if i dont use the pool to query for data ...
it says fatal error and password authentication failed
Let's gooo
Hey ania is there any student discount available for student from low purchase power parity countries for your course.
please make a tutorial on how to deploy to railway , or other alternatives to Heroku for already existing projects with DBs (MongoDB , mySQL)
Awesome stream, good job
How can I open the window at 26:12 :) ? I can only open PgAdmin4
same issue, i dont get it??
@@jessicapyledev Hey! I'm still searching for it. But as far as I see, you can handle everything with pgAdmin4 too! Or with SQL Shell. It must be downloaded with PostgreSQL. And you can write all codes that she writes to that shell. If you stuck or it's complicated, feel free to ask more hahahhh
same, it looks very different on windows i only found pgAdmin 4 and i can see the SQL shell too. but im not sure if its running or not or if just type 'cd postgres' on the shell will work
This is so exciting
One question, why we need to put localhost:8000 to .env file ? And is it also needed when using nextjs ?
Thanks you very much you are best
My name is hashim from egypt
Please help.. I just installed postgress buh it's not loading...
It's just stucked at loading pgadmin after I clicked the app..
Please what do I do
i love this lady
😘
You are good explaining and clear, would have been better if database was some known like MySQL or some other…
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.
Thank you for the video, can you share git repo of project pls 💜
Great video! Really detailed and easy to understand! I am new in this, I have one question for the auth part, can I use like login from google account? and if yes, will it effect the database in PostGres?
where can i find the repository? When i click to edit and make changes, it deletes the todo? Have no idea what i did wrong.
Can you simply host this project on something like digital ocean, and have it work the same?
I am not getting the postgres GUI which shes getting when she first opens postgres window. i am on windows
Does this make 2 different applications costing 20$ each? Server and Client.
can you follow this tutorial but work with aws ec2 linux instance instead of kinsta?
thank Ania 🥰
Great Tutorial and lots of fun. Can somebody tell me where I can grab that icon(the tree). Can't seem to find it 😏
if you have a Mac, just do CTRL + CMD + Space and a little window w/ the usual emojis comes up. if you search 'tree' or 'vacation' it will be one of the options
Why kinsta was used, and aws for example?
Hi, I have a question. Would it be an advantage to use Axios here to post, get and patch the data in the database? THis tutorial made total sense, but I see lots of people using Axios for this, and I am not quite sure if start using it in my projects or not. :)
Yes, it is an advantage as it saves a few lines of code, Axios does some things for you automatically
Hej Ania, how do you do that your data 'First todo" fetching via localhost:8000 look very readability with spaces and colors like real code, when my looks like single line?? Thanks for respone :)
It's an extension called "JSON Formatter"
@@lucianobatista7296thanks a lot :)
I have a question that is stopping me deploy the app on kinsta. I can only open the app locally but running server and client seperately. I looked at the video and the github file, and in the root package.json there is no universal 'start' script for both client and server. Kinsta tells me I am missing the start command. If I use concurrently (which is not usedin the video) I get authorisation errors. Has anyone else found this?
i have the same problem and i think the reason is the if-env package,
but i dont know how to solve it
@@Ghandourr i can run conurrently from my local browser but cannot run in kinsta the way the video shows, always is missing start command
When i follow along i get the following errors: the params in the console log doesn't return the email address i use to access to the database, it remains blank??
also ...... i can not get the first database entry to show up in the array in the console log therefore "first todos" is not appearing on the page under Holiday tick list
Any solutions please???
DataStax has a great discord channel if it’s a database related issue :)
Hello, I get stuck for days can someone please help me : I got the error while running catch line, this one console.error(error);
^
ReferenceError: error is not defined
and if i try to change it the again problem i got is this :
password authentication failed for user "91966"
how cool ...... is that ! 🙃
i need urgent help to deploy PERN stack on hostinger Ubuntu server or Windows VPS, Please help me
Thanks ❤
My process env wont allow my Postgres data thought to connect to my server. Anyone know why?
nevermind i figured it out
Paused at 1:00:04
Any reason using a JS file instead of a JSX file?
Your awesome.
Do you also give tutorials on django?
Czesc Ania! I want to ask you if you plan to do some Angular tutorial someday. Thanks in advance.
Hello somebody know how to import Pool from pg in module type? Thanks!
Ania, what is your take on ChatGPT and the future of software development? Do you think junior developers will still stand a chance when ChatGPT will, very likely, do the same job as them for a way lower cost? What would you recommend new coders to focus on to be more marketable?
You shouldn't be focusing on chatGPT it's not going to take your job right now.
ChatGPT may be able to code some stuff but it can't code a full fledged production ready application. It will tell you it doesn't have that capability.
There's more than code that goes into creating great programs. I think we're (Jr devs) are good for a while.
Everything worked fine in vs code but server app failed kinsta deployment. ERROR: No start command could be found. Anyone can help?
Kinsta resolved the issue. Apparently, their setup does not like combining Front and Backend in one package, as is the case with this tutorial.
Please use sequelize for this
how do I open this window at 29:40 with windows ?
just type terminal in search
curious why she didnt use prisma??
I love you so much
I think mac users miss one feature in vscode; in windows vscode editor, we don't have to write the full relative path of a component when import it to another js file. Just type first few letters of the name of the component and press tab and vscode automatically gives the full relative path of the component which I want to import 😎
Where can I get the code for this project?
2:17:22 gotcha
Meanwhile in chatGPT
1. Write code for authentication api using nodejs and write connection and migration for postgres
2.use express js
3.Write code for crud apis for todo app and authenticate with above auth api
4.write routes for the above apis
5.write code for user registration with following fields using React, scss, Reactstrap and with form validation and use axios and sample api
6.write code for login page using React, scss and reactstrap.use axios and sample apis
7.replace sample apis with apis route written above code using express
8.write react components for todo app using React, scss and axios, check crud api code written above for api url and parameters
Yeah, you got it 👍
Yes exactly and if you don't know how to code you won't be able to see or understand all the errors it's going to give you.
I'm getting this error: "Uncaught runtime errors:
×
ERROR
Cannot use import statement outside a module
SyntaxError: Cannot use import statement outside a module"
Give me code
😭 my terminal gives me this: -bash: npx: command not found
intall npm and make sure you are in correct directory before running the command
thank you for tutorial
I'm not able to move node_modules to client pls someone help me
is the app responsive?
I'm at 1:39:20
Does this work on Android?
rafce would be a much quicker way than copying/pasting and changing everything..
npm init doesn't create node modules and package-lock.json the second time in the main to-do-app folder?any hint? thank you!!!
You have to run npm install in the root directory.
@@pratimaadhikari7207 already done but did nothing, it creates only package.json and package-lock.json🤔
pls build a location based weather app