Overview

Minimal studio portal built with Next.js 16 (React 19), Tailwind CSS, and shadcn UI. It provides:

• Business registration that creates a Firebase Auth user and stores metadata in the Firebase Realtime Database
• Customer registration experience with real-time, prefix-based search over businesses (command palette autocomplete backed by Realtime Database queries)
• Polished dark UI to mirror the provided design references

Demo

Business Registration

Customer Registration & Search

This screen demonstrates the real-time prefix filtering used by the search palette.

Database Snapshot

Firebase Configuration

Create a Firebase project, enable Email/Password authentication, and create a Realtime Database (Database → Realtime Database → Create Database). Add the following variables to .env.local (never commit this file):

NEXT_PUBLIC_FIREBASE_API_KEY=your-api-key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project-id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your-project.appspot.com
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your-sender-id
NEXT_PUBLIC_FIREBASE_APP_ID=your-app-id
# Optional if you need the RTDB
NEXT_PUBLIC_FIREBASE_DATABASE_URL=https://your-project.firebaseio.com

Use permissive Realtime Database rules while testing, then tighten them. Example:

{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}

The registration flow writes to businesses/{uid} with the structure:

{
  "businessId": "firebase-auth-uid",
  "name": "Your Business Name",
  "searchName": "your business name",
  "email": "owner@studio.com",
  "createdAt": 17123456789
}

The registration flow creates this record automatically.

Local Development

npm install
npm run dev
# optional: seed demo businesses
npm run seed:businesses

Visit http://localhost:3000 to access the landing screen, then try the /register (business) and /login (customer registration) flows.

Tech Stack

• Next.js 16 App Router with React server components
• Tailwind CSS v4 + shadcn UI primitives
• Firebase Auth + Realtime Database
• Lucide icons and Radix primitives for accessible UI

Next Steps

• Wire up the forgot-password route to Firebase password reset emails.
• Add role-based routing after login (e.g., redirect to dashboards).
• Harden Realtime Database rules for multi-tenant data segregation.