Build a NextJS 13 App with Firebase & Tailwind CSS
Vložit
- čas přidán 30. 05. 2024
- 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 - Věda a technologie
![[柴犬ASMR]曼玉Manyu&小白Bai 毛发护理Spa asmr](http://i.ytimg.com/vi/0TsXQ7z2Dh4/mqdefault.jpg)
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 🙏
This is great Clint! Waiting for more Next.js + TailwindCSS material!
This is a great tiny Full Stack project. And yes, Thank you. Keep it up.
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!!
One of the best Firebase tutorials.
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.
Clint!! As usual, such a great and knowledgeable video!!
Thank you Alan!
You are awesome dude! Thank you
I’m new but I always thought I needed to learn to typescript before I did stuff with nextjs 13 thx for tutorial!
Not at all sir!
Thank you so much. Very useful video. Appreciate you effort and time on this.
YOU ARE THE BEST, MAN!
thanks men, great job !
Perfect Tutoirla, This is very useful for me. Best regard.
Fantastic tutorial
thank you! really helped me
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.
I agree came here expecting that, this is like using regular react. wasting nextjs potential.
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?
cool! your video solve my problem, thank you !
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!
Eggzellent! Thank you!!
Thank you!
i like your tutorials, cool
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
Excellent!
Sir , your way of teaching is very awesome.. please more project like that, and some more complex project on nextjs
I will try my best sir!
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.
what's your snippet extensions? my snippet extensions don't work on next js
is this the best practice to write backend api code to direct into the client file
great video
You took me out of a block. Thanks
Thank you bro 👍
Welcome 👍
What extensions do you use?
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
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
I just started a supabase project for that reason
Thanks !!!
How to update items from database? Forgot that?
make sure to use try catch blocks
Thanks alot, can you make on deploying next 13 to firebase both client and server. I'm subscribing 😀
Yes, soon
you are te best❤
Thanks Parsa!
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
env files wont work on client components
🔥🔥🔥
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 ?
Obviously
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
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
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
plz make Fully Functinal Ecommerce Website with Next js and Sanity backend
You should do a tip calculator next! with the same stack
I feel like that would be a quick 45 second JavaScript video :). Total * 1.20 = result. 😀
te quiero mucho
28:00 unsubscribe = onSnapshot
I need a Nike store with routes