Next.js + Supabase Auth starter template with shadcn-UI and Tailwind CSS

⚑Demo:

View Vercel Demo

NOTE: Every resource used in this project are free to use for a certain threshold.

Things to keep in mind while testing 🀯.

  • Supabase restricts user registration. So if, you are unable to Sign up as a new user, don't worry!
  • I've provided the test Login credentials in the .env.local.example file. Use those to test out things!

Star ⭐ this repository if you find this useful πŸ™‚.

πŸš€ Getting Started

  1. Run the following command to create a new project with this starter.
yarn create next-app my-app -e https://github.com/Sahil-Sharma-23/supa-next-shad-auth
# or
npx create-next-app my-app -e https://github.com/Sahil-Sharma-23/supa-next-shad-auth
  1. Initialize a project in Supabase. See it how!

  2. Rename .env.local.example file to .env.local and add the SUPABASE_URL & SUPABASE_ANON_KEY generated after creating project in Supabase.

  3. Once the project is setup and the dependencies are finished installing, you can navigate to that directory and start up the development server with:

yarn dev
# or
npm run dev

Open http://localhost:3000/ with your browser to see your new project!

🀯🧐 What's inside?

This starter includes:

  1. NextJS starter
  2. TypeScript
  3. Supabase (Supabase authentication)
  4. ShadCN-UI
  5. NextJS Server Actions
  6. Tailwind CSS
  7. Zod

πŸ‘Œ Features:

  • Fully responsive to all screen sizes.
  • Built with TypeScript.
  • Fully Type Safe.
  • Secure use of Server actions.
  • User friendly UI with loading states.
  • Fully customizable.

πŸ“š Learn more about NextJS

To learn more about NextJS, take a look at the following resources:

You can checkout the NextJS Github Repository - your feedback and contributions are welcome.

πŸ“š Learn more about Supabase

To learn more about Supabase, take a look at the following resources:

You can checkout the Supabase Github Repository - your feedback and contributions are welcome.

πŸ“š Learn more about ShadCN-UI:

To learn more about ShadCN-UI, take a look at the following resources:

You can checkout the ShadCN-UI Github Repository - your feedback and contributions are welcome.

πŸ“š Learn more about Tailwind CSS:

To learn more about Tailwind CSS, take a look at the following resources:

You can checkout the Tailwind CSS Github Repository - your feedback and contributions are welcome.

Author: Sahil Sharma (India)