React + TypeScript + Vite + Tanstack Router + Firebase + Shadcn/ui

A minimal template to help get an app started with Tanstack Router + Firebase + Shadcn/ui with TypeScript, featuring real-time data synchronization, authentication, and a beautiful UI right out of the box.

Features

• 🔥 Firebase Integration - Built-in authentication and real-time database functionality
• 🛣️ TanStack Router - Type-safe routing with built-in loading states and data handling
• 🌓 Dark Mode - Automatic dark mode support with theme persistence
• 🎨 Tailwind CSS - Utility-first CSS framework for rapid UI development
• 📝 TypeScript - Full type safety and improved developer experience
• ⚡ Vite - Lightning fast development server and build tool
• 🎯 Shadcn/ui - Beautiful, accessible UI components

Getting Started

1. Clone the repository:

   git clone https://github.com/connorp987/vite-firebase-tanstack-router-template.git
   cd vite-firebase-tanstack-router-template

2. Install dependencies:

   npm install

3. Set up your Firebase configuration:

   • Copy .env.example to .env
   • Fill in your Firebase credentials in .env

4. Start the development server:

   npm run dev

Environment Variables

Create a .env file in the root directory with the following variables:

VITE_PUBLIC_FIREBASE_API_KEY=
VITE_PUBLIC_FIREBASE_AUTH_DOMAIN=
VITE_PUBLIC_FIREBASE_PROJECT_ID=
VITE_PUBLIC_FIREBASE_STORAGE_BUCKET=
VITE_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
VITE_PUBLIC_FIREBASE_APP_ID=
VITE_PUBLIC_FIREBASE_MEASUREMENT_ID=

Adding UI Components

This template uses shadcn/ui for UI components. To add a new component:

npx shadcn@latest add <component-name>

Components can be customized in ./src/components/ui.

Helpful Links

• Shadcn/ui Documentation
• TanStack Router Documentation
• Firebase Documentation
• Tailwind CSS Documentation

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.