Next + Firebase starter

ℹ️ About

This is a full-stack web-app boilerplate starter.

This is a Next.js web-app using the app directory, Tailwind CSS, TypeScript, Google's Firebase SDK and Zustand for state management.

🔔 Features

🔐 Auth

• Fully functional Sign Up (email, password, and username), Login and Forgot Password pages

👤 Profile

• A protected user Profile Page where profile details and created posts are displayed, has links to other pages and a Log Out button
• A Profile Settings Page where details (email, password, username and profile image) can be managed

📝 Posts

• A Create Post Page for authenticated users that includes fields for Title, Description, Images, Location, Tags, and Price
• A dynamic Edit Post Page (based on post ID) where all post attributes can be managed by the author
• A public Posts Page where all user generated posts are fetched and displayed
• A dynamic Post Page for individual posts

🐻 State Management

• The Zustand store syncs the frontend to the backend databases and provides a cookie 🍪 to maintain auth state

🏃‍➡️ Getting Started

• Create & Register a Firebase App

  • From Firebase Console, "Add project" and follow setup steps
  • From "Project Settings", register the web-app to get credentials

• Rename .env.example to .env.local

• Add project environment variables

• Create Firestore Database:

  • Create Firestore Collection posts

    • Define data structure:

      title: string
      description: string
      tags: array of strings
      images: array of strings (URLs to the uploaded images)
      userId: string (reference to the user who created the post)
      createdAt: timestamp
      location: string
      geoPoint: geopoint
      price: string
      

    • Update Firestore Database Rules:

        rules_version = '2';
        service cloud.firestore {
        match /databases/{database}/documents {
            match /users/{userId} {
            allow read: if true;
            allow write: if request.auth != null && request.auth.uid == userId;
            }
            match /posts/{postId} {
            allow read: if true;
            allow write: if request.auth != null && request.auth.uid == request.resource.data.userId;
            allow delete: if request.auth != null && request.auth.uid == resource.data.userId;
            }
        }
        }
      

• Create Firebase Storage (Images)

  • Update Storage Rules:

    service firebase.storage {
        match /b/{bucket}/o {
            match /{allPaths=**} {
            allow read: if true;
            allow write: if request.auth != null;
            }
        }
    }
  

💻 Local Development

• Install dependencies

npm i

• Start Node.js local development server

npm run dev