https://tube.grossholtz.net/videos/watch/3d3f98f4-fc75-49d1-b6dc-74864b81d1da In this tutorial series we'll create a production-ready Finance Tracker app using Next.js 13, Tailwind CSS and Firebase. The app includes security using user authentication, protected routes, data storage using Firebase Firestore and styling the website using Tailwind CSS. In lesson 6, Part 1, we will set up the Firestore Database for our expenses, and create the modal and layout required for creating expense items. Project demo: https://youtube-finance-tracker.vercel.app Source code: https://github.com/leonvanzyl/next13-finance-tracker Next.js docs: https://nextjs.org Tailwindcss docs: https://tailwindcss.com/ Firebase: https://firebase.google.com CHAPTERS: 00:00 - Introduction 01:24 - Creating the Expenses Collection 02:52 - Updating the finance context 08:49 - Creating the Add Expenses Component 17:00 - AddExpenseHandler Function 18:18 - Generate Unique ID using UUID package 20:38 - Outro #next #nextjs #tailwindcss #firebase #firestore #reactjs Wed, 08 Apr 2026 10:19:27 GMT https://validator.w3.org/feed/docs/rss2.html PeerTube - https://tube.grossholtz.net https://tube.grossholtz.net/client/assets/images/icons/icon-512x512.png https://tube.grossholtz.net/videos/watch/3d3f98f4-fc75-49d1-b6dc-74864b81d1da All rights reserved, unless otherwise specified in the terms specified at https://tube.grossholtz.net/about and potential licenses granted by each content's rightholder.