# 🚀 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)