From a14b0572f86a09ee4f74f9c3d5c73a78b85c350d Mon Sep 17 00:00:00 2001 From: gbuomprisco Date: Thu, 19 Dec 2024 20:12:36 +0800 Subject: [PATCH] README updates. --- README.md | 108 +++++++++++++++++++++------ apps/web/public/images/makerkit.webp | Bin 0 -> 11260 bytes 2 files changed, 87 insertions(+), 21 deletions(-) create mode 100644 apps/web/public/images/makerkit.webp diff --git a/README.md b/README.md index 30f8078..3fbc391 100644 --- a/README.md +++ b/README.md @@ -1,33 +1,31 @@ -# Makerkit - Next.js Supabase SaaS Starter Kit \[Lite version\] +![Makerkit - Next.js Supabase SaaS Starter Kit \[Lite version\]](apps/web/public/images/makerkit.webp) -This is the a SaaS Starter Kit for building SaaS applications using Supabase, Next.js, and Tailwind CSS \[Lite version\]. +# Next.js Supabase SaaS Starter Kit (Lite) -Looking for the full version of this SaaS Starter Kit? [Check out the complete version of this SaaS Starter Kit](https://makerkit.dev). +Start building your SaaS faster with our Next.js 15 + Supabase starter kit. This lite version lets you evaluate our architecture and code quality. -## Boilerplate Features +👉 **Looking for a full-featured SaaS Starter Kit?** [Check out the complete version](https://makerkit.dev) -✨ This starter kit includes the following features: +## What's Included -1. A Turborepo monorepo including a Next.js application, and a Playwright test suite. -2. Shadcn UI components exported from the UI package -3. Prettier, Eslint, TailwindCSS and Typescript configurations. -4. A Supabase project with a Postgres database. -5. The authentication features of Supabase already configured -6. Translations using i18next (in both client and server components) -7. User profile and settings +### Core Architecture +- 🏗️ Next.js 15 + Turborepo monorepo setup +- 🎨 Shadcn UI components with TailwindCSS +- 🔐 Supabase authentication & basic DB +- 🌐 i18n translations (client + server) +- ✨ Full TypeScript + ESLint + Prettier + +### Key Features +- 👤 User authentication flow +- ⚙️ User profile & settings +- 📱 Responsive marketing pages +- 🔒 Protected routes +- 🎯 Basic test setup with Playwright ### Technologies This starter kit provides core foundations: -✨ **Core Infrastructure** -- Next.js 15 application in a Turborepo monorepo -- Supabase authentication and basic database setup -- Essential Shadcn UI components -- i18next translations (client + server) -- TypeScript, TailwindCSS, and ESLint configs -- Basic test setup with Playwright - 🛠️ **Technology Stack**: - [Next.js 15](https://nextjs.org/): A React-based framework for server-side rendering and static site generation. - [Tailwind CSS](https://tailwindcss.com/): A utility-first CSS framework for rapidly building custom designs. @@ -121,6 +119,21 @@ To reset the Supabase server, run the following command: pnpm run supabase:web:reset ``` +##### More Supabase Commands + +For more Supabase commands, see the [Supabase CLI documentation](https://supabase.com/docs/guides/cli). + +``` +# Create new migration +pnpm --filter web supabase migration new + +# Link to Supabase project +pnpm --filter web supabase db link + +# Push migrations +pnpm --filter web supabase db push +``` + #### 4. Start the Next.js application ```bash @@ -151,6 +164,29 @@ pnpm run typecheck Turborepo will cache the results of these commands, so you can run them as many times as you want without any performance impact. +## Project Structure + +The project is organized into the following folders: + +``` +apps/ +├── web/ # Next.js application +│ ├── app/ # App Router pages +│ │ ├── (marketing)/ # Public marketing pages +│ │ ├── auth/ # Authentication pages +│ │ └── home/ # Protected app pages +│ ├── supabase/ # Database & migrations +│ └── config/ # App configuration +│ +packages/ +├── ui/ # Shared UI components +└── features/ # Core feature packages + ├── auth/ # Authentication logic + └── ... +``` + +For more information about this project structure, see the article [Next.js App Router: Project Structure](https://makerkit.dev/blog/tutorials/nextjs-app-router-project-structure). + ### Environment Variables You can configure the application by setting environment variables in the `.env.local` file. @@ -238,7 +274,23 @@ pnpm --filter web supabase db push This command will push the migration to the Supabase project. You can now apply the migration to the Supabase database. -#### Supabase Auth URL +## Going to Production + +#### 1. Create a Supabase project + +To deploy your application to production, you will need to create a Supabase project. + +#### 2. Push the migration to the Supabase project + +After you have made changes to the migration, you can push the migration to the Supabase project by running the following command: + +```bash +pnpm --filter web supabase db push +``` + +This command will push the migration to the Supabase project. + +#### 3. Set the Supabase Callback URL When working with a remote Supabase project, you will need to set the Supabase Callback URL. @@ -248,6 +300,20 @@ Please set the callback URL in the Supabase project settings to the following UR Where `` is the URL of your application. +#### 4. Deploy to Vercel or any other hosting provider + +You can deploy your application to any hosting provider that supports Next.js. + +#### 5. Deploy to Cloudflare + +The configuration should work as is, but you need to set the runtime to `edge` in the root layout file (`apps/web/app/layout.tsx`). + +```tsx +export const runtime = 'edge'; +``` + +Remember to enable Node.js compatibility in the Cloudflare dashboard. + ## Contributing Contributions are welcome! However, please open an issue first to discuss your ideas before making a pull request. diff --git a/apps/web/public/images/makerkit.webp b/apps/web/public/images/makerkit.webp new file mode 100644 index 0000000000000000000000000000000000000000..b35af6129aaaee5a667c6fa1d8662b9b8470599e GIT binary patch literal 11260 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 literal 0 HcmV?d00001