Skip to content

This is a dashboard starter template for the NextJS 14 app router using supabase based on shadcn-ui.

License

Notifications You must be signed in to change notification settings

w3labkr/nextjs-supabase-dashboard

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

NextJS Supabase Dashboard

This is a dashboard starter template for the NextJS 14 app router using supabase based on shadcn-ui.

Denpendency

  • NextJS 14 + Typescript + Tailwind
  • Shadcn UI (Radix UI) + TimePicker + TagInput
  • react-hook-form + zod
  • react-i18next + zod-i18n-map
  • Redux Toolkit + Redux Persist
  • Supabase OAuth with PKCE flow (@supabase/ssr)
  • Supabase Email Auth with PKCE flow (@supabase/ssr)
  • Supabase Role-based Access Control (RBAC)
  • CKEditor 5 + Supabase Upload Adapter
  • PWA (Progressive Web Apps)

Table of Contents

Screenshots

screenshot

Folder and file Structure

The folder and file structure is based on nextjs app router next.js project structure.

.
├── app/                        # App Router
│   └── api/
│       ├── auth/               # Public API for authentication
│       └── v1/                 # APIs that require authentication
├── components/                 # React components
├── config/                     # Configuration for site
├── context/
│   └── app-provider.ts         # Register context provider
├── hooks/
├── docs/                       # Documents
├── lib/                        # Utility functions
├── public/                     # Static assets to be served
│   └── [locales]/              # Internationalization
├── queries/                    # SWR for API
├── screenshots/                # Screenshots
├── store/                      # Redux reducers
├── supabase/                   # Supabase CLI
├── types/
├── components.json             # Shadcn UI
├── i18next.config.ts           # Internationalization
└── package.json                # Project dependencies and scripts

Getting Started

Find and replace the following text in supabase/seed.sql and run sql.

  • YOUR_BUCKET_ID
  • username@example.com

Cloning a repository.

git clone https://github.com/w3labkr/nextjs-supabase-dashboard.git

Install all modules listed as dependencies.

npm install

Start the development server.

npm run dev

Generate Favicon

Add favicon.ico file to /app directory.

Generate manifest and splash screen.

vim public/manifest.json

Docs

Define App URL

  • Environment: NEXT_PUBLIC_APP_URL=
  • Supabase Auth: Authentication > URL Configuration > Redirect URLs
  • Google cloud console: API > Credentials
  • Google cloud console: API > OAuth

Troubleshooting

  • For eslint, check the latest version of @typescript-eslint/eslint-plugin and upgrade.
  • For ckeditor5, check the downloadable version in the online builder and upgrade.
  • If an error occurs in the pre-rendered sitemap.xml, access the page in development mode and run a rebuild.

License

This software license under the MIT License.

Reference