This is a Next.js 14 project bootstrapped with create-next-app.

Purpose

The purpose of this project is to demonstrate how to create a ToDo App using Firebase Authentication, Firebase Firestore, and Google Cloud Functions while leveraging features offered by NextJS 14 such as the new App Router routing convention, parallel routing, server actions, and more.

YouTube

The development of this app was recorded and published via Code Hackery YouTube Channel.

• Full Video Tutorial
  • 1. Project Intro & Basic UI Dev
  • 2. Setup Firebase
  • 3. Configure Firebase Authentication
  • 4. Configure Firestore Database
  • 5. Finalize Firestore CRUD Operations
  • 6. Implement NextJS Server Actions
  • 7. Basic Tailwind CSS
  • 8. Deploy App to Vercel
  • 9. Initial Firebase Deployment
  • 10. Build Firebase/Google Cloud Functions
  • 11. Implement Firebase/Google Cloud Functions & Redeploy to Firebase
• Firebase Cloud Functions Tutorial - this was a solution to server actions issues with Firebase Hosting as of February 14, 2024.

Things to know before you get started

• The main app folder is final using server actions. As of February 14, 2024, server actions does not work via Firebase Hosting. However, it does work when hosted on Vercel, which is demonstrated in the YouTube video.
• The app-firebase-hosting folder contains code that leverages Cloud Functions so that the app can work when hosted on Firebase. Unfortunately, that means it's not using server actions. This was a great opportunity to demonstrate the use of Google Cloud functions as an alternative solution. You can access the Cloud Functions code here.
  • Here is the link to the issue on GitHub.
• If you want to use the app-firebase-hosting folder, simply rename the current app folder to something different (e.g. app-main) and then rename the app-firebase-hosting folder to just app.
• The final code may look a little different from the videos, specifically when methods are being used on click or submit events and when importing components. I wanted to demonstrated code-splitting. Here is NextJS' Documentation.
  • HOWEVER, be mindful that there are some issues with code-splitting.
• Finally, I kept mentioning serverless functions as if NextJS is not serverless in this scenario when using server actions. They're both serverless scenarios, just different solutions. 🤦🏽‍♂️

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.