No video

Build an Awesome Full Stack React Project Tutorial

  Рет қаралды 87,841

developedbyed

developedbyed

Күн бұрын

🚀 Upgrade your web development skills with my courses: developedbyed....
In today's episode, we will learn how to create an awesome modern full stack react application with a backend and auth using firebase. We will be using next.js for our front end to build out a full crud app with auth included.
We will also take a look on how to fully deploy our project to Vercel.
💻 Full code here
github.com/dev...
💡 If you want to learn more about React, check out my channel for more React tutorials and you can find React courses on my website. developedbyed.com
🛴 Follow me on:
Twitter: / developedbyed
Github: github.com/dev...
Instagram: / developedbyed
#react #programming

Пікірлер: 158
@pratikbhandari6679
@pratikbhandari6679 Жыл бұрын
What I really like about your projects is how visually good they look It shows that you put a lot of work on the design Not all projects are like that They have functionality but lack the visually pleasing design element that makes me actually want to do it
@developedbyed
@developedbyed Жыл бұрын
awww that means a lot!
@pratikbhandari6679
@pratikbhandari6679 Жыл бұрын
@@developedbyed You are an inspiration Ed, truly. You are the one who taught me how to build APIs a couple years back. It just stuck with me. Thank you.
@jaemdessources
@jaemdessources Жыл бұрын
Facts ...👌🏿👌🏿👌🏿👌🏿
@gambomaster
@gambomaster Жыл бұрын
@@pratikbhandari6679 Which tutorial is that? 🤔
@ryanbitonio4793
@ryanbitonio4793 Жыл бұрын
agree!
@developedbyed
@developedbyed Жыл бұрын
Well this is a big one 🚀🚀🚀 Couldn't make this with all your support, thank you so much for subbing and supporting the courses. I will pump out as many informative videos I can for you guys ♥
@khizerrehman7227
@khizerrehman7227 Жыл бұрын
Thank you ...
@ryanbitonio4793
@ryanbitonio4793 Жыл бұрын
thank you ed!
@avinashukla07
@avinashukla07 Жыл бұрын
Love your way of teaching
@alex1m5a
@alex1m5a Жыл бұрын
Thanks to you Ed, you are an awesome developer and educator. You freaking rock!!
@taylortoast2
@taylortoast2 Жыл бұрын
Thank you
@NOTHING-sf4rp
@NOTHING-sf4rp Жыл бұрын
You’ve been an instrument of building my career in web development. At a time I left my laptop and the idea of being a software developer I just watched your video and I recovered my desire. I’ve finished and built on your recent NEXT JS portfolio project and also added animations on it. From Nigeria 🇳🇬
@gambomaster
@gambomaster Жыл бұрын
Wow. Thanks to our gorgeous teacher on the internet. 🙏
@nutshell5494
@nutshell5494 Жыл бұрын
For someone who stuck with why the firestore isnt update, like in 1:13:07 , you have to change the rule and change it to= allow write: if request.auth.uid != null; hope this helps
@nutshell5494
@nutshell5494 Жыл бұрын
also if your Message component doesnt render, u need to return it= {allPosts.map((post) => { return ; })}
@pedrotavares9266
@pedrotavares9266 Жыл бұрын
Big help! Thanks a lot
@adaezedawari
@adaezedawari Жыл бұрын
Very helpful, thanks alot
@TORiSPADe
@TORiSPADe Жыл бұрын
Thank you so much!
@rushikeshgandhmal
@rushikeshgandhmal Жыл бұрын
Dev you are just awesome, unique. Never seen someone like you, you are a great teacher, magician, funny person. Initial seconds was hilarious 🤣 Keep up the good work. Will definitely support you. 😇
@rubinatabassum2562
@rubinatabassum2562 Жыл бұрын
You are making coding very easy for new comers. Thank you So much ... I make my first project by the help of you. You make coding & making project s really exciting & enjoying... Thanks a lot...
@vez87
@vez87 Жыл бұрын
Thank you for this, I've been wanting to try a new stack and you made it much less intimidating than a pile of documentation! Love your content.
@chess4964
@chess4964 Жыл бұрын
You are one of my teachers here in YT :) Thanks to you and other content creators I'm in my 3rd month in my first fulltime job as a FS dev.
@SriramRadhakrishnan1
@SriramRadhakrishnan1 Жыл бұрын
The best thing i like in your videos is your ux design it just basic and hits the perfection details.. started 2yrs back still you are one of my favourite content creator.. keep going deved love from india
@Nokturnal-Developer
@Nokturnal-Developer Жыл бұрын
If your sign-up feature is not working on Vercel, you have to go to Firebase < Authentication < Settings < Authorized Domains and add the Vercel domain manually. That's what worked for me. :)
@ufufu001
@ufufu001 Жыл бұрын
this is literally entertainment for me. i love watching people code. i watch these long ass coding videos like it's a movie
@jonypatterson577
@jonypatterson577 Жыл бұрын
Really enjoyed this. More of the same please. Really enjoying the tailwind CSS too sir. Thank you for these videos. They are really helping me!
@edemmarvinkudjo9346
@edemmarvinkudjo9346 Жыл бұрын
Just finished this project. Really learned a lot about firebase. Thank you for this project.
@amarmohammed5644
@amarmohammed5644 Жыл бұрын
Excellent video and nice to see a DB connection without the tedious SQL setup. Auth out of the box, can't complain! Thank you!
@DevMadeEasy
@DevMadeEasy Жыл бұрын
Hey Ed, nice content as always, thanks for sharing it... I love the way you teach!!
@henrydeveloper2388
@henrydeveloper2388 Жыл бұрын
You're very cool Ed, It's fun to watch your videos and learn web development at the same time
@leonvanzyl
@leonvanzyl Жыл бұрын
Was anyone else shouting at Ed at the 2:41:53 mark? 🙂 Excellent work Ed, hope to see more projects like this from you!
@derekprieur5258
@derekprieur5258 Жыл бұрын
Ed, your videos are very entertaining and I find myself laughing throughout. Great tutorial! 👍
@dakotadavis7399
@dakotadavis7399 Жыл бұрын
Thank you for making code tutorials entertaining ❤
@noelbanas1642
@noelbanas1642 Жыл бұрын
Awesome and very entertaining project (how web dev project tutorials suppose to be 😆). I've added relative time using dayjs to display timestamps in 'a minute ago', etc... Thanks again!
@outplay3759
@outplay3759 Жыл бұрын
Anyone having issues with the google Avatar? When I log with new email, it is not showing unless I inspect the img and refresh the page a couple of times... Not sure how inspecting solves the issue but after inspecting and refreshing it displays automatically. I have this problem only with the fresh user. If user has logged in at least once, no issues there even after a relog.
@FN-zg8lj
@FN-zg8lj Жыл бұрын
I'm guessing it has something to do with async/ await, but I can't figure out what exactly
@tacolegs2833
@tacolegs2833 Жыл бұрын
I'd love to see you do a tutorial using stuff like prisma and trpc!!
@gabrielmoraes4516
@gabrielmoraes4516 Жыл бұрын
Super cool! Your tutorials are super awesome! Thank you!
@nikhiltyagi6619
@nikhiltyagi6619 Жыл бұрын
Thanks a ton!! You're awesome as always. Can you do a short video on how to make a basic html css javascript website GDPR compliant? I made a website for a client in UK and have Google analytics tracking turned on. How do I apply a cookie consent system on the website?
@Maximiliant6
@Maximiliant6 Жыл бұрын
Enjoying the video and thanks Ed but I am encountering a 403 error on the profile image. This is at mark 47:33. Anyone know how to resolve this?
@virginiav5658
@virginiav5658 Жыл бұрын
Hi! I have added the referrerPolicy attribute to img and it worked!
@ahmedrassoul6553
@ahmedrassoul6553 Жыл бұрын
Thank you so much for this video ! I learnt so much
@pchunter168
@pchunter168 Жыл бұрын
I have been using Next.js for a month. I feel it is much easier and faster than React for the front & backend development.
@gabrielmoraes4516
@gabrielmoraes4516 Жыл бұрын
Awesome Video! Thanks for making it!
@astawanzen9766
@astawanzen9766 Жыл бұрын
i'll be here for the next few days, it just so amazingly clear best explanations for beginner like me. How should i thank you???😁😁🤞🤞
@evilwarrior4095
@evilwarrior4095 Жыл бұрын
if there is one thing that i love more than the content is the greeting " hello there my gorgeous friends on the internet"
@gourobsaha8130
@gourobsaha8130 Жыл бұрын
You really good at explaining thank you
@Popo-hr6gc
@Popo-hr6gc Жыл бұрын
Thank you so much Ed!
@anuraghere4997
@anuraghere4997 Жыл бұрын
You are like the steve jobs of web development. Technically sound on one hand and asthetically beautiful on the other hand.!!!!!
@Amvflix7
@Amvflix7 Жыл бұрын
Thanks for everything dev ed❤️ love from India 🥰
@sopyantirtolaksono8694
@sopyantirtolaksono8694 Жыл бұрын
Thanks bro, your video is very inspiring.👍
@blue_berry_pie64
@blue_berry_pie64 Жыл бұрын
Yeahh thank you for making react project with tailwind❤
@Popo-hr6gc
@Popo-hr6gc Жыл бұрын
Can you share the security settings/rules on Firebase?
@Joshdevbox_my_Teleqram_id
@Joshdevbox_my_Teleqram_id Жыл бұрын
🌟DM for help/support👆
@nutshell5494
@nutshell5494 Жыл бұрын
Try this in the document section : allow read, write: if request.auth.uid != null;
@imposterdeveloper101
@imposterdeveloper101 Жыл бұрын
for anyone who deploy on vercel and can not login you have to go in fireStore setting and add your domain name to it.
@Joshdevbox_my_Teleqram_id
@Joshdevbox_my_Teleqram_id Жыл бұрын
🌟DM for help/support👆
@neerajchowhanvlogs
@neerajchowhanvlogs Жыл бұрын
Hello, it worked, thank you so much!
@trevorfranks69
@trevorfranks69 Жыл бұрын
awesome work!
@sravanimaragani2338
@sravanimaragani2338 Жыл бұрын
Can you please do the videos on refresh the table with button and all the refresh concepts.
@gabrielmoraes4516
@gabrielmoraes4516 Жыл бұрын
Hey Ed, your website isn't working. ⁉⚠
@planetmall2
@planetmall2 Жыл бұрын
Great job!
@DannyCallaghan
@DannyCallaghan Жыл бұрын
Great video. One thing I noticed though is that, when passing the post as the value of the query property of the Link tag (when navigating to Details), it won't pass a nested object (so the user and timestamp objects come through as strings). The only way I could fix this was to JSON.stringify it before passing it through, then JSON.parse it in the Details component. This is confusing, as it clearly works in your video. Wonder if we're using different versions already?
@Joshdevbox_my_Teleqram_id
@Joshdevbox_my_Teleqram_id Жыл бұрын
🌟DM for help/support👆
@markokafor7432
@markokafor7432 Жыл бұрын
Nice one. Question. Do you want all that data showing up in your url ? If you pass it as a query, it shows up in the url including the id
@mattl7599
@mattl7599 Жыл бұрын
Would love to see more typescript stuff from you, Ed!
@marebot404
@marebot404 Жыл бұрын
if you have an error saying that the api key is wrong, make sure that your .env file is not in the source folder
@GawdTy
@GawdTy Жыл бұрын
Any idea how I can deploy it on vercel I keep getting firebase auth error even tho I put my Environment Variables in. Any help? Finally got it to work thx for the great tutorial Ed
@emreozturk7803
@emreozturk7803 Жыл бұрын
Thank you bro for video
@adityaaufar4565
@adityaaufar4565 Жыл бұрын
Another React Project Tutorial by Dev Ed? I don't even need to watch first to like this.
@rahulbhatt1
@rahulbhatt1 Жыл бұрын
Sir make a video on Blockchain based web apps or u can either make a playlist using Internet computer
@edwardmcintire2513
@edwardmcintire2513 Жыл бұрын
I give up... I can't get tailwind to install and then I've tried to redo the project three times but it throws an error when I run 'npm run dev'. It sounds great but can't get it to work
@atkhodier
@atkhodier Жыл бұрын
I have the same exact code as you in my slug.js but keep getting cannot read properties of undefined indexOf as a type error. I have no idea how to fix it.
@mohamedanouarjabri271
@mohamedanouarjabri271 Жыл бұрын
Thanks so much
@thomschery2800
@thomschery2800 Жыл бұрын
Again awesome!!
@maskman4821
@maskman4821 Жыл бұрын
This one is awesome 😍
@eleah2665
@eleah2665 Жыл бұрын
Hello! Thanks for this. If you do another project I would be interested in Remix.
@megatronskneecap
@megatronskneecap Жыл бұрын
The gorgeous teacher built a mini social network! SICKKKKK!
@samuelblackk6106
@samuelblackk6106 Жыл бұрын
at 35:54 i am having an issue i cnnot seem to fix... the Error Message is : 'Server Error FirebaseError: Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app).' 19 | 20 | // Initialize Firebase > 21 | const app = initializeApp(firebaseConfig); | ^ 22 | export const auth = getAuth(); 23 | export const db = getFirestore(app); 24 |
@samuelblackk6106
@samuelblackk6106 Жыл бұрын
Solution: const createFirebaseApp = (config) => { try { return initializeApp(config); } catch (e) { return getApp(); } } const app = createFirebaseApp(firebaseConfig);
@yosterdaniel1213
@yosterdaniel1213 Жыл бұрын
@@samuelblackk6106 Im having same issue, What is 'getApp'? . when i use it i get error 'ReferenceError: getApp is not defined'?
@sagar7929
@sagar7929 Жыл бұрын
Please make a mern course of multilanguage support web app with dynamic backend Thank you
@hafiz_n
@hafiz_n Жыл бұрын
hello please help me out !!! in portion 1:55:00 , can you please tell me what to do to pass a query in the Link component on React js. Because I've been trying this project in react js too . please replay me with the solution 🥺
@vaporeon2822
@vaporeon2822 Жыл бұрын
Hey can I know what’s the vscode theme you’re using?
@mohamedanouarjabri271
@mohamedanouarjabri271 Жыл бұрын
2:37:00 or you can just add allMessages to the dependancy array of the useEffect
@thanathatjivapaiboonsak2180
@thanathatjivapaiboonsak2180 Жыл бұрын
what theme vscode u use ???
@sherkan_n
@sherkan_n Жыл бұрын
Super tutorial
@mdamirulislam7
@mdamirulislam7 Жыл бұрын
Hello gorgeous Teacher, What is your opinion about chatGPT? I mean is there any possibilities to developers lost their jobs for chatGPT?
@sessinouadjagbe9698
@sessinouadjagbe9698 Жыл бұрын
HI Bro first of all thanks for your nice videos!!! I'm following this video but tha application broke when i add -- export const auth = getAuth() -- the error is ( export const app = initializeApp(firebaseConfig); export const auth = getAuth(); // ERROR on this line ^ export const db = getFirestore(app); ) Removing the parenthesis from getAuth it works but can't take me to google ..how can i fix ? ..Help please...
@optimizeryt37
@optimizeryt37 Жыл бұрын
35:53 ur error got fixed while i got another Server Error : FirebaseError: Installations: Missing App configuration value: "projectId" (installations/missing-app-config-values) :/
@vinaykumardevadiga385
@vinaykumardevadiga385 Жыл бұрын
@dev when I click on the Google sign in button 36:37 nothings happens, even after providing onClick. Can anyone suggest
@sanyamjain4777
@sanyamjain4777 Жыл бұрын
File name should be Login.js
@lehlohonolomphuthi4
@lehlohonolomphuthi4 Жыл бұрын
Is there anyone else having issues with the "npm run dev" command? Please help
@Benimrac
@Benimrac Жыл бұрын
Are you in the right folder? I had to cd one folder deeper for the command to work.
@sabertoothwallaby2937
@sabertoothwallaby2937 Жыл бұрын
issue with npm run dev, What do I need to do in my scripts?
@devoxygen7395
@devoxygen7395 Жыл бұрын
Always great
@josiasguzman3318
@josiasguzman3318 Жыл бұрын
not sure if im the only one but after deploying the project to vercel i cant login with google. has anyone else had the same problem?
@benjaminsmith2717
@benjaminsmith2717 Жыл бұрын
"this is taking a long time isn't it?..." (hits vape hard af) "..okay done"
@Joshdevbox_my_Teleqram_id
@Joshdevbox_my_Teleqram_id Жыл бұрын
🌟DM for help/support👆
@mihailpopovici1419
@mihailpopovici1419 Жыл бұрын
HI! Is anyone else having problems with the website? Every time I try to access the url it says Gateway time-out, server error
@mihailpopovici1419
@mihailpopovici1419 Жыл бұрын
Edit: now I see that sometimes it loads up, but even when it does, it works really really slow
@LainonShiraya
@LainonShiraya Жыл бұрын
Hiya, I've been watching your videos for quite a while, and noticed that in this video and previous one based on firebase authentication you didn't touch the topic about credentials & that google overwrite facebook in firebase authentication/database , so once you login with google on account that have been logged with facebook before, you can no more login using facebook on that email. Do you have any solution on linking both accounts , so the user can use same email to authenticate through facebook&google, yet having the same data and id ? It makes me sleepless for days, would appreciate a video or some tips ! ( there's lot of info on it online, but most of it is outdated or not working as intended)
@derekprieur5258
@derekprieur5258 Жыл бұрын
I am randomly getting a 403 error on loading the google avatar where sometimes it comes through and sometimes it does not. Does anyone else run into this as well?
@outplay3759
@outplay3759 Жыл бұрын
Have you solved the issue with the avatar? My problem is when I log-in with a new email, Avatar is not showing. When I inspect the image and only after that if I refresh the page it is displayed... Otherwise, it is not showing.
@samfeighery1224
@samfeighery1224 Жыл бұрын
Great video as always and managed to create the app locally, unfortunately I am facing an issue when I attempt to deploy. ./pages/[slug].js 51:8 Warning: React Hook useEffect has a missing dependency: 'getComments'. Either include it or remove the dependency array. react-hooks/exhaustive-deps Anyone manage to solve this issue?
@briansanchez44
@briansanchez44 Жыл бұрын
were you able to resolve this issue? I'm getting the same result as well and I noticed it occurs when you try to delete a post for some weird reason that has comments i believe
@77dreimaldie0
@77dreimaldie0 Жыл бұрын
This is a full stack project, yes. But personally, I had hoped to see full stack development, i.e. without using a third party service. A third party package which runs on my machine would have been fine
@donnybanga4447
@donnybanga4447 Жыл бұрын
bro when you open poppins font page, those lline are in hindi language
@enzocam07
@enzocam07 Жыл бұрын
I dont know but my firebase.js doesn't read my env variables. Anyone here have the same error?
@debakrishnaboruah2831
@debakrishnaboruah2831 Жыл бұрын
i cannot get post data from the firebase plzz help ??
@Ролтун
@Ролтун Жыл бұрын
Yes
@akmalzamri8422
@akmalzamri8422 Жыл бұрын
Any chance for a Black Friday deals?
@arkithecyanide3109
@arkithecyanide3109 Жыл бұрын
Hi Ed, for some reason I get this wierd error: Firebase: Error (auth/invalid-api-key) Even though, I made 101 with your code.. Any Ideea why am I getting this error?
@jemienachukwu2919
@jemienachukwu2919 Жыл бұрын
i got the exact same error too
@chess4964
@chess4964 Жыл бұрын
use your own api key
@arkithecyanide3109
@arkithecyanide3109 Жыл бұрын
@@chess4964 I Used it but for some reason still the same error.
@chess4964
@chess4964 Жыл бұрын
@@arkithecyanide3109 what is the error?
@lxonthemix834
@lxonthemix834 Жыл бұрын
can you do a react and php?
@mercee4097
@mercee4097 Жыл бұрын
Please could u make a website that authenticates products using serial number or barcode
@mycode0
@mycode0 Жыл бұрын
This has more functionalities than Twitter
@anonymouscoder2238
@anonymouscoder2238 Жыл бұрын
Wassup Ed
@firosiam7786
@firosiam7786 Жыл бұрын
Hey could u do a giveaway for ur java script course . Just asking don't take any offense
@michaelhofby
@michaelhofby Жыл бұрын
i have the course :D its pretty good
@michaelhofby
@michaelhofby Жыл бұрын
dont reply the person above :)
@abdumalikmirzafarov9768
@abdumalikmirzafarov9768 Жыл бұрын
Hello , I have a problem on 35:54 I cannot solve it who can help me . | // Initialize Firebase 21 | const app = initializeApp(firebaseConfig); > 22 | export const auth = getAuth(); | ^ 23 | export const db = getFirestore(app); 24 |
@metacoder4912
@metacoder4912 Жыл бұрын
what is the error?
@dunyan1586
@dunyan1586 Жыл бұрын
just do export const auth = getAuth
@samuelblackk6106
@samuelblackk6106 Жыл бұрын
@@dunyan1586 i am having the same issue and this didnt help... except I am missing something
@yosterdaniel1213
@yosterdaniel1213 Жыл бұрын
@@dunyan1586 This does not work
@dunyan1586
@dunyan1586 Жыл бұрын
@@yosterdaniel1213 did you check whether you copied the links from firebase properly?
@FN-zg8lj
@FN-zg8lj Жыл бұрын
getting this error: "FirebaseError: Missing or insufficient permissions."
@FN-zg8lj
@FN-zg8lj Жыл бұрын
temporarily fixed this error. Go to rules in Firebase database and change to allow read, write; This will make all your data public so it's not recommended past dev stage.
@sanyamjain4777
@sanyamjain4777 Жыл бұрын
Did u get 404 error on 41:30
@FN-zg8lj
@FN-zg8lj Жыл бұрын
@@sanyamjain4777 no
@dunyan1586
@dunyan1586 Жыл бұрын
@@sanyamjain4777 TypeError: (0 , _firebase_util__WEBPACK_IMPORTED_MODULE_0__.getModularInstance)(...).onAuthStateChanged is not a function I got this error lol gg
@OrekiBurd
@OrekiBurd Жыл бұрын
Hello are you still learning game development?
@ImamNurArifinHA
@ImamNurArifinHA Жыл бұрын
nice,,
@noobienate1293
@noobienate1293 Жыл бұрын
Hey ed! I love ur work and i would love to see you do seomething like this but with node and stuff. You dont have to do it cus im not forcing you i have ur children hostage so do it jk
@serge2nd
@serge2nd Жыл бұрын
I dont see the "Activate your windows" anymore 😊
@GarfieLD-Mami
@GarfieLD-Mami Жыл бұрын
Hello gorgeus Ed 😉⚛⚛⚛⚛
@crashtheboss07
@crashtheboss07 Жыл бұрын
Floki form Vikings..
@emilryden8306
@emilryden8306 Жыл бұрын
Chesus tight you’re pushing it to the limit with all of the latest content, are you real? is anything real?
Learn Sass In 20 Minutes | Sass Crash Course
19:42
developedbyed
Рет қаралды 933 М.
Top 10 CSS One Liners That Will Blow Your Mind
13:34
developedbyed
Рет қаралды 946 М.
❌Разве такое возможно? #story
01:00
Кэри Найс
Рет қаралды 4,1 МЛН
The Joker kisses Harley Quinn underwater!#Harley Quinn #joker
00:49
Harley Quinn with the Joker
Рет қаралды 25 МЛН
If Barbie came to life! 💝
00:37
Meow-some! Reacts
Рет қаралды 79 МЛН
Parenting hacks and gadgets against mosquitoes 🦟👶
00:21
Let's GLOW!
Рет қаралды 13 МЛН
This Developer Got Hired With This Portfolio (Analyze it)
17:47
CodingPhase
Рет қаралды 40 М.
HTMX + GO 15 Minute Quickstart (For Javascript Devs)
16:59
developedbyed
Рет қаралды 22 М.
React Native CLI Setup for Windows [Created in 2024]
25:02
CodeLegends
Рет қаралды 6 М.
Firebase vs Supabase - I Built The Same App With Both
6:21
Your Average Tech Bro
Рет қаралды 108 М.
3 Years Experienced React Interview
1:16:16
ProCodrr
Рет қаралды 21 М.
Why I Pick ShadCN and Tailwind for all my projects
18:53
developedbyed
Рет қаралды 64 М.
"The Life & Death of htmx" by Alexander Petros at Big Sky Dev Con 2024
23:01
Montana Programmers
Рет қаралды 54 М.
TypeScript Origins: The Documentary
1:21:36
OfferZen Origins
Рет қаралды 284 М.
5 Tips and Tricks To Make Your Life With Next js 14 Easier
17:11
developedbyed
Рет қаралды 37 М.
❌Разве такое возможно? #story
01:00
Кэри Найс
Рет қаралды 4,1 МЛН