create-t3-fire 🔥

The best way to start a full-stack, typesafe Next.js app with Firebase authentication and shadcn/ui components.

Get Started

To scaffold a new T3 Fire app, run any of the following commands:

npm

npx create-t3-fire@latest

yarn

yarn create t3-fire

pnpm

pnpm create t3-fire

What's included?

create-t3-fire sets up a Next.js project with:

• ⚡ Next.js 15 - The React Framework with App Router
• 🔷 TypeScript - Type safety from day one
• 🎨 Tailwind CSS - Utility-first CSS framework
• 🔥 Firebase Auth - Complete authentication solution
• 🎯 shadcn/ui - Beautiful, customizable UI components
• 📦 ESLint & Prettier - Code quality tools pre-configured
• 🚀 Turbopack - Lightning-fast builds

Interactive CLI

The CLI will guide you through the setup:

1. Project name - Choose a name for your project
2. Features - Select which features to include
3. Git - Initialize a git repository
4. Dependencies - Install dependencies automatically

Project Structure

my-t3-fire-app/
├── app/                  # Next.js App Router
│   ├── layout.tsx       # Root layout
│   ├── page.tsx         # Home page
│   └── globals.css      # Global styles
├── components/          # React components
├── lib/                 # Utility functions
│   ├── firebase.ts      # Firebase configuration
│   └── utils.ts         # Helper functions
├── public/              # Static assets
├── .env.example         # Environment variables template
├── next.config.mjs      # Next.js configuration
├── tailwind.config.ts   # Tailwind configuration
└── tsconfig.json        # TypeScript configuration

Firebase Setup

After creating your project:

1. Create a Firebase project at Firebase Console
2. Enable Authentication and choose your sign-in methods
3. Copy your Firebase configuration
4. Rename .env.example to .env.local and add your configuration:

NEXT_PUBLIC_FIREBASE_API_KEY=your-api-key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-auth-domain
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project-id
# ... etc

Available Scripts

In your scaffolded project, you can run:

• npm run dev - Start the development server with Turbopack
• npm run build - Build for production
• npm run start - Start the production server
• npm run lint - Run ESLint
• npm run type-check - Run TypeScript compiler check

Why T3 Fire?

• Type Safety - Full-stack type safety with TypeScript
• Authentication Ready - Firebase Auth pre-configured
• Beautiful UI - shadcn/ui components ready to use
• Fast Development - Turbopack for instant HMR
• Best Practices - ESLint, Prettier, and TypeScript configured
• Production Ready - Optimized for performance and SEO

Community

• GitHub Issues
• Discord
• Twitter

License

MIT © 2024 Vibit

Built with ❤️ by the Vibit team