Next.js, Tailwind & Firebase Tutorial #2 - Layout Part 1 | 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
Tailwind docs: https://tailwindcss.com
React Icons: https://react-icons.github.io/react-i...
https://react-chartjs-2.js.org
Chapters:
00:00 - Intro
00:42 - Source Code
00:48 - Logo
00:54 - Start Dev Server
01:28 - Adding base styles
02:32 - Creating the Navigation
04:30 - Profile imagine and styling
08:25 - React Icons
10:50 - Buttons, animations and styles
16:12 - Create Header Component
18:08 - Next13 Layout.js File
19:30 - Outro
#next #nextjs #tailwindcss #firebase #firestore #reactjs