Build a NextJS 13 App with Firebase & Tailwind CSS
Вставка
- Опубліковано 22 лип 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 - Наука та технологія
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 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!!
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.
This is a great tiny Full Stack project. And yes, Thank you. Keep it up.
One of the best Firebase tutorials.
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.
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?
Perfect Tutoirla, This is very useful for me. Best regard.
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!
YOU ARE THE BEST, MAN!
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
Clint!! As usual, such a great and knowledgeable video!!
Thank you Alan!
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.
You are awesome dude! Thank you
thanks men, great job !
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
cool! your video solve my problem, thank you !
can you tech method put and push for edit data in form ?
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
Fantastic tutorial
thank you! really helped me
What extensions do you use?
Eggzellent! Thank you!!
You took me out of a block. Thanks
Thank you!
How to update items from database? Forgot that?
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!
great video
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
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.
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?
i like your tutorials, cool
Excellent!
thank you for this vedio you so mach help me in my code and thank you for tech good lock
make sure to use try catch blocks
Thanks !!!
Thank you bro 👍
Welcome 👍
Thanks alot, can you make on deploying next 13 to firebase both client and server. I'm subscribing 😀
Yes, soon
plz make Fully Functinal Ecommerce Website with Next js and Sanity backend
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
you are te best❤
Thanks Parsa!
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
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