Next.js, Tailwind & Firebase Tutorial #2 - Layout Part 3 | Finance Tracker
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 2, we start building the app layout, add styling and create reusable components.
Project demo: https://youtube-finance-tracker.verce...
Source code: https://github.com/leonvanzyl/next13-...
Next.js docs: https://nextjs.org
React Icons: https://react-icons.github.io/react-i...
Chart.js docs: https://react-chartjs-2.js.org
Chapters
00:00 - Start
00:07 - Create Chart section
01:05 - Chartjs Documentation
01:18 - Setup Chartjs
02:51 - "Use Client"
04:12 - Doughnut Component
06:54 - Resize Chart
07:28 - Rename Amount to Total
08:43 - Lyout Wrapup
#next #nextjs #tailwindcss #firebase #firestore #reactjs