create-next-supabase-starter

# 🚀 create-next-supabase-starter A powerful CLI tool to **instantly scaffold a modern, production-ready Next.js 15 + Supabase project** with a single command! 🎉 --- ## 🤔 Why Use This Starter Instead of Starting from Scratch? Setting up a **Next.js 15 + Supabase project** from scratch can be **time-consuming and repetitive**. Developers often spend **hours configuring** authentication, database setup, styling, and component libraries before even writing business logic. This starter **eliminates the setup hassle** and provides a **pre-configured, production-ready environment with stable versions**, allowing you to focus **on building features** instead of boilerplate code. 🚀 **Why waste hours configuring when you can start coding in minutes?** --- ## 📌 Features ✅ **Next.js 15 with App Router** – Leverage the power of modern, server-driven architecture. ✅ **React 19 Ready** – Optimized with the latest React features. ✅ **TypeScript by Default** – Write safer, more maintainable code. ✅ **Supabase Integration** – Pre-configured authentication, database, and storage. ✅ **Tailwind CSS** – Fully styled with a scalable utility-based design system. ✅ **shadcn/ui** – Beautiful pre-built UI components. ✅ **React Hook Form** – Efficient and flexible form handling. ✅ **Git Initialization (Optional)** – Quickly set up version control. ✅ **Automated Dependency Installation** – No need to manually install packages. ✅ **Environment Variables Included** – `.env.example` setup for easy configuration. ✅ **Scalable & Production-Ready** – Best practices implemented out of the box. --- ## 📥 Installation & Usage ### **1️⃣ Quick Start (Recommended)** You **don’t need to install anything!** Simply run: ```sh npx create-next-supabase-starter@latest my-project ``` --- ### **2️⃣ Running Without a Project Name** If you don’t provide a name, the CLI will prompt you: ```sh npx create-next-supabase-starter@latest my-project ``` 👉 If you press **Enter** without a name, it will use **"next-supabase-starter"** by default. --- ## 📦 What’s Inside This Starter? This starter is not just a simple Next.js setup—it comes **fully loaded** with essential features to kickstart any serious project. ### **🚀 Technology Stack** | Technology | Purpose | | --------------------------- | ------------------------------------------------------------------------------------------------------------ | | **Next.js 15 (App Router)** | Optimized for **performance** and **scalability** with modern **server components** and **dynamic routing**. | | **React 19** | Utilizes the **latest features** for efficient rendering and state management. | | **React Query** | Utilizes the **best practices** for efficient fetching, mutating and client side state management. | | **TypeScript** | Provides **strong typing** for better maintainability and developer experience. | | **Supabase** | Includes **authentication, database, and storage** setup using `supabase`. | | **Tailwind CSS** | A **utility-first** CSS framework for quick and **scalable styling**. | | **shadcn/ui** | Pre-built, **accessible UI components** styled with Tailwind. | | **React Hook Form** | Lightweight and **powerful form handling** with built-in validation. | | **pnpm** | **Efficient package manager** with workspaces support. | | **ESLint & Prettier** | Code formatting and linting pre-configured. | | **Environment Variables** | Pre-configured `.env.example` for easy API setup. | --- ## 🛠️ How It Works 1️⃣ **Clones the Next.js + Supabase starter template.** 2️⃣ **Installs all dependencies automatically** (`pnpm install`). 3️⃣ **Asks if you want to initialize Git** (`git init`). 4️⃣ **Sets up a pre-configured project** with: - Supabase authentication - Tailwind CSS & shadcn/ui - React Hook Form for forms - Next.js 15 (App Router) - TypeScript for type safety 5️⃣ **Displays a success message with your next steps.** --- ## 🛠️ Options & Features | Feature | Description | | --------------------------- | ---------------------------------------------------------------------------------------------------- | | **Project Name** | If not provided, CLI will prompt for one. Default: `"next-supabase-starter"`. | | **Git Setup** | Asks if you want to initialize a Git repository. | | **Automatic Installs** | Installs all dependencies using `pnpm install`. | | **Pre-configured Supabase** | Ready to use with `supabase-js` for auth, database, and storage. | | **React Query** | Pre-configured React Query providers with custom hooks (fetch, mutate). | | **Auth Query Wrapper** | Auth Context mixed between supabase functions with react query providers ensures fresh user session. | | **Tailwind & shadcn/ui** | Built-in styling and UI components, ready to use. | | **React Hook Form** | Form handling setup with built-in validation. | --- ## 🔥 Why Use This Starter? ✅ **No More Boilerplate Setup** – Everything is pre-configured for you. ✅ **Focus on Building, Not Configuring** – Get started instantly with Next.js 15, Supabase, and Tailwind. ✅ **Best Practices Included** – The latest web development trends and best practices are built-in. ✅ **Save Time & Effort** – Stop wasting hours setting up the same things repeatedly. ✅ **Built-Ins** – Built-in auth system and thats always was a little hard for beginners with react query and supabase. 💡 **With this starter, you can start writing actual business logic from Day 1!** --- ## 🛠️ Example Output ``` 🚀 Create Next.js + Supabase Project Enter your project name (or press enter to use default): my-app 📦 Setting up my-app... ✅ Starter project cloned successfully! 📦 Installing dependencies... 🔗 Do you want to initialize Git? (Y/n) 🚀 Setup complete! Run the following to start your project: cd my-app pnpm dev ---------------------------------------- 🎉 Created by Mohamed 4rarh 🚀 💻 GitHub: https://github.com/Mohamed-4rarh ---------------------------------------- ``` --- ## 🙌 Support & Feedback 📢 Have feedback or found an issue? Open an issue on GitHub! 💻 **GitHub:** [@Mohamed-4rarh](https://github.com/Mohamed-4rarh)