https://github.com/ysskrishna/nextjs-supabase-starter

A modern Library Management System built with Next.js 15 and Supabase, featuring a beautiful UI powered by Radix UI components and Tailwind CSS.
https://github.com/ysskrishna/nextjs-supabase-starter

authentication jwt nextjs radix-ui react-hook-form starter-template supabase supabase-auth tailwindcss ysskrishna zod

Last synced: 3 months ago
JSON representation

A modern Library Management System built with Next.js 15 and Supabase, featuring a beautiful UI powered by Radix UI components and Tailwind CSS.

• Host: GitHub
• URL: https://github.com/ysskrishna/nextjs-supabase-starter
• Owner: ysskrishna
• License: mit
• Created: 2025-05-31T11:19:42.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-06-03T13:40:01.000Z (about 1 year ago)
• Last Synced: 2025-06-03T19:30:51.669Z (about 1 year ago)
• Topics: authentication, jwt, nextjs, radix-ui, react-hook-form, starter-template, supabase, supabase-auth, tailwindcss, ysskrishna, zod
• Language: TypeScript
• Homepage: https://ysskrishna-nextjs-supabase-starter.vercel.app/
• Size: 2.62 MB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
[![Next.js](https://img.shields.io/badge/Next.js-15.2.4-black.svg)](https://nextjs.org/)

[![React](https://img.shields.io/badge/React-19-blue.svg)](https://reactjs.org/)

[![TypeScript](https://img.shields.io/badge/TypeScript-5-blue.svg)](https://www.typescriptlang.org/)

[![Supabase](https://img.shields.io/badge/Supabase-latest-green.svg)](https://supabase.com/)

[![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-3.4.17-38B2AC.svg)](https://tailwindcss.com/)

[![Radix UI](https://img.shields.io/badge/Radix_UI-1.0.0-black.svg)](https://www.radix-ui.com/)

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

# NextJS Supabase Starter

A modern Next.js starter template with Supabase integration, featuring a beautiful UI powered by Radix UI components and Tailwind CSS.

## Demo

- **URL:** [https://ysskrishna-nextjs-supabase-starter.vercel.app/](https://ysskrishna-nextjs-supabase-starter.vercel.app/)

- **Email:** `demo@gmail.com`

- **Password:** `demopassword`

## Features

- 🔐 Authentication system with Supabase

- 📱 Responsive design with Tailwind CSS

- 🎨 Modern UI components from Radix UI

- 📊 Dashboard interface

- 🎯 TypeScript support

- 🌓 Light/Dark theme support with system preference detection

- 🔄 Automatic route protection and redirections

## Authentication Flow

The application implements a complete authentication flow with the following features:

- Protected routes with automatic redirections

- Session management using Supabase Auth

- Google OAuth integration

- Persistent authentication state

- Secure token handling

For detailed setup instructions, please refer to the [Authentication Guide](./docs/AUTHENTICATION.md) which includes:

- Supabase project setup

- Google OAuth configuration

- Environment variables setup

- Authentication middleware configuration

## Screenshots

### Landing Page



  


    
Light Theme

    

  

  


    
Dark Theme

    

  



### SignUp Page



  


    
Light Theme

    

  

  


    
Dark Theme

    

  



### SignIn Page



  


    
Light Theme

    

  

  


    
Dark Theme

    

  



### Dashboard Page



  


    
Light Theme

    

  

  


    
Dark Theme

    

  



## Tech Stack

- **Framework:** Next.js 15

- **Database & Auth:** Supabase

- **Styling:** Tailwind CSS

- **UI Components:** Radix UI

- **Form Handling:** React Hook Form

- **Validation:** Zod

- **Charts:** Recharts

- **Icons:** Lucide React

- **Date Handling:** date-fns

## Getting Started

1. Clone the repository

2. Install dependencies:

   ```bash

   npm install

   # or

   pnpm install

   ```

3. Set up your Supabase project and add the environment variables

4. Run the development server:

   ```bash

   npm run dev

   # or

   pnpm dev

   ```

## Available Scripts

- `npm run dev` - Start development server

- `npm run build` - Build for production

- `npm run start` - Start production server

- `npm run lint` - Run ESLint

## Project Structure

```

├── app/              # Next.js app directory

│   ├── auth/        # Authentication routes

│   ├── dashboard/   # Dashboard pages

│   ├── signin/      # Sign in page

│   └── signup/      # Sign up page

├── components/      # Reusable UI components

├── lib/            # Utility functions and configurations

├── public/         # Static assets

└── styles/         # Global styles

└── docs/           # Documentation

    └── AUTHENTICATION.md  # Authentication setup guide

```

## Dependencies

The project uses a comprehensive set of modern dependencies including:

- Radix UI components for accessible UI elements

- React Hook Form for form handling

- Zod for schema validation

## Contributing

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

## License

This template is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.