Build a NextJS 13 App with Firebase & Tailwind CSS

Рет қаралды 37,317

Күн бұрын

Build an expense tracker with NextJS 13, Firebase, & Tailwind CSS.
ZeroTo Mastery:
Master React JS Course - bit.ly/Learn-React-JS
Complete Web Developer in 2023 - bit.ly/Complete-Web-Developer
💻 Solve EDABIT coding challenges - BEGINNER! 💻
bit.ly/Code-Challenges
🔥 Connect with me on IG 🔥
/ fireclint
☕ Support the channel ☕
www.buymeacoffee.com/clintbriley
🔥 My Coding Equipment 🔥
Logitech MX Wireless Keyboard - amzn.to/3xKPFiN
Logitech MX Master 2S Wireless Mouse - amzn.to/3O5WmRD
SAMSUNG 49-Inch Gaming Monitor - amzn.to/3mvUy8M
Shure MV7 USB Podcast Microphone - amzn.to/3O00nqG
Mic Boom Arm - amzn.to/3NHn6YU
Monitor Desk Light Bar - amzn.to/3xzKlyj
GitHub Repo:
github.com/fireclint/expense-...
Timestamps-
0:00 - Intro
0:15 Demo
00:45 - Create Nextx App
02:30 Main Layout
12:35 Install & ConfigureFirebase
05:50 - Add CSS styles from ChatGPT
06:30 - Test our Weather App!
17:50 - Add data to firebase
28:00 - Fetch items from database
35:00 - Delete item from database

Пікірлер: 65

@tsykin 11 ай бұрын

Thank you so much for this tutorial! This was actually my first CRD (almost CRUD) app ever! I really appreciate your effort to make such useful content. Please, make more simple tutorials on React with Next & Typescript + Firebase 🙏

@manuelbarreiro9596 10 ай бұрын

This is great Clint! Waiting for more Next.js + TailwindCSS material!

@gustavoeraso7253 9 ай бұрын

This video is excellent, my language is Spanish, but with the little I understand of English, I was able to follow the tutorial without problems!!! you really helped me!!

@nocopyrightgameplaystockvi231 Жыл бұрын

This is a great tiny Full Stack project. And yes, Thank you. Keep it up.

@diegobarrera4824 8 ай бұрын

Thanks for this tutorial, it was really easy to understand. You made me realize that she was reading the documentation where she wasn't lol. New sub, you explain very well.

@kroffe Жыл бұрын

I’m new but I always thought I needed to learn to typescript before I did stuff with nextjs 13 thx for tutorial!

@codecommerce Жыл бұрын

Not at all sir!

@TrackingAcademy 10 ай бұрын

One of the best Firebase tutorials.

@AlanCodes Жыл бұрын

Clint!! As usual, such a great and knowledgeable video!!

@codecommerce Жыл бұрын

Thank you Alan!

@user-si3gx8wt3x 5 ай бұрын

Thank you so much. Very useful video. Appreciate you effort and time on this.

@kristijan9696 Жыл бұрын

YOU ARE THE BEST, MAN!

@ThatRandomDude914 3 ай бұрын

You are awesome dude! Thank you

@patitorodri 11 ай бұрын

thanks men, great job !

@pomiusu 4 ай бұрын

thank you! really helped me

@Nanashi-rq7lk Жыл бұрын

Perfect Tutoirla, This is very useful for me. Best regard.

@raytristani 7 ай бұрын

Eggzellent! Thank you!!

@leiyin5512 7 ай бұрын

cool! your video solve my problem, thank you !

@MrAngelluis3 10 ай бұрын

Fantastic tutorial

@moeidnasir534 Жыл бұрын

Hey! I was wondering if you can make (or already have) a video that shows how to deploy monorepos that are created with React. I am struggling with deploying a lot :( Thanks for this video!

@stevensoneugenio1172 9 ай бұрын

Thank you so much for this tutorial! Do you have a tutorial about fetching data from Firebase using Next.js with dynamic rendering since the getServerSideProps() is not exist in version 13. thank you

@gokulnaathb2627 5 ай бұрын

Thank you!

@moamberraza7658 7 ай бұрын

what in case if you want to have fetch data initially and after that listen change with onSnapshot ... how do we going to render server displayed component.

@user-cm1ip6hk9n Ай бұрын

Great video, much easier to follow than the Google docs. Now would you push the input from the client to a server component instead of keeping everything in the client. Would this help to reduce client code/speed up the app?

@jodd3458 11 ай бұрын

Sir , your way of teaching is very awesome.. please more project like that, and some more complex project on nextjs

@codecommerce 11 ай бұрын

I will try my best sir!

@aburaihan-py4vi 7 ай бұрын

Excellent!

@osoningliztili6708 7 ай бұрын

i like your tutorials, cool

@hesammovahed420 Жыл бұрын

what's your snippet extensions? my snippet extensions don't work on next js

@user-go1wq5wv8v Ай бұрын

can you tech method put and push for edit data in form ?

@JoseGarcia-qq6sk 3 ай бұрын

You took me out of a block. Thanks

@theanthill22 4 ай бұрын

What extensions do you use?

@mingothemongo4466 7 ай бұрын

great video

@armenbarkhudaryan4730 Жыл бұрын

Thank you bro 👍

@codecommerce Жыл бұрын

Welcome 👍

@BLACKDREAMIO Ай бұрын

is this the best practice to write backend api code to direct into the client file

@gsindar Жыл бұрын

Thanks !!!

@waleedsharif618 Жыл бұрын

How should we deploy this to firebase ? That database has rules section and we can have this working for a month and then everytime should set it again for another month… otherwise its not visible

@Anonymousssss368 11 ай бұрын

Hey you are using next 13 still used the useeffect to fetch data. Then what's the purpose for using next13 ? You should need to fetch data server side without using useState and useEffect hook.

@NorgeSantana 11 ай бұрын

I agree came here expecting that, this is like using regular react. wasting nextjs potential.

@Skarvion 29 күн бұрын

I've been messing around with Firebase on NextJS, but I don't know how to load data on server side as firebase client doesn't work on server side, and using firebase admin does not obey firestore rules without writing more code and lose the firebase off-line data handling functionality. What to do then?

@user-go1wq5wv8v Ай бұрын

thank you for this vedio you so mach help me in my code and thank you for tech good lock

@geetech2939 9 ай бұрын

make sure to use try catch blocks

@muyiwajohnson6486 Жыл бұрын

Thanks alot, can you make on deploying next 13 to firebase both client and server. I'm subscribing 😀

@codecommerce Жыл бұрын

Yes, soon

@waleedsharif618 Жыл бұрын

How to update items from database? Forgot that?

@parsazarabi6333 Жыл бұрын

you are te best❤

@codecommerce Жыл бұрын

Thanks Parsa!

@blazi_0 3 ай бұрын

Man firebase has so much potential, problem is they don't give a shit about new technologies! This is frustrating man, the only reason why I don't use firebase is how hard it's to deal with it's queries and mutations, there's no type system you can have like an orm or something. It's hard to manage nosql

@codecommerce 2 ай бұрын

I just started a supabase project for that reason

@clickbaitpolice9792 8 ай бұрын

16:20 but HOW are we supposed to hide those keys? I tried using environmental variables but the config file doesn’t work without using NEXT_PUBLIC and at that point, it’s not secret anymore

@alexandergeorgesquire220 2 ай бұрын

env files wont work on client components

@hubesh716 Жыл бұрын

plz make Fully Functinal Ecommerce Website with Next js and Sanity backend

@VarunKapoor-tc1je Жыл бұрын

great videos brother . My question is in interviews for junior developer , do they ask about styling in deep . Like I use tailwind css on projects . Many time i just copy tailwind css instead of writing line by line . so can it be a factor during interviews ?

@alext5497 Жыл бұрын

Obviously

@parsazarabi6333 Жыл бұрын

🔥🔥🔥

@MrAngelluis3 10 ай бұрын

You should do a tip calculator next! with the same stack

@codecommerce 10 ай бұрын

I feel like that would be a quick 45 second JavaScript video :). Total * 1.20 = result. 😀

@abhinav6280 11 ай бұрын

What's the point of using next js if you're gonna put "use client" at the top and fetching data inside the client component, you could have done this in normal react, would have made no difference to performance

@blazi_0 3 ай бұрын

You can fetch firebase data from server components without need for use client what do u mean ? It just has some simple setup you have to do so it will work with server components as well as client components

@blazi_0 3 ай бұрын

U can use firebase-admin SDK to get data on server, also for auth stuff just use client and save session using route handler so you can use it on the backend as well