Skip to main content
Production Ready
Supabase
Bilingual

Blog Dashboard Starter

A complete, production-ready blog platform with authentication, rich content editing, and full bilingual support. Built with Noor UI components and Supabase.

Features

Authentication

Complete auth system with Supabase

  • Email/password signup & login
  • Protected routes
  • Auto profile creation
  • User menu with logout

Rich Content Editor

TipTap editor with full formatting

  • Bold, italic, underline
  • Headings & lists
  • Text alignment
  • Color picker

Post Management

Full CRUD operations for blog posts

  • Create & edit posts
  • Draft/publish workflow
  • Delete with confirmation
  • Post statistics

Image Uploads

Featured images with Supabase Storage

  • Drag & drop upload
  • Image preview
  • Cloud storage
  • CDN delivery

Search & Filter

Find posts quickly

  • Real-time search
  • Filter by status
  • Sort options
  • Responsive design

Bilingual Content

Full English & Arabic support

  • Separate EN/AR fields
  • RTL layout
  • Language switching
  • Localized dates

Technology Stack

Next.js 14

App Router with Server Components

Supabase

Auth, Database, and Storage

TipTap

Rich text editor

Noor UI

All dashboard components

TypeScript

Fully typed codebase

Tailwind CSS

Styling with RTL support

What's Included

Backend & Database

  • Complete Supabase schema (posts, profiles)
  • Row Level Security policies
  • Storage bucket configuration
  • TypeScript types generation

Pages & Components

  • Login & signup pages
  • Dashboard with statistics
  • Posts list with search/filter
  • Create & edit post pages
  • All using Noor UI components

Quick Setup

1. Copy & Install

Get the starter and install dependencies

2. Database Schema

Run this SQL in your Supabase project

Complete schema available in starters/blog-dashboard/lib/supabase/schema.sql

3. Configure & Run

Add your Supabase credentials and start developing

Update .env.local with your Supabase credentials:

Find these values in your Supabase project settings under API.

Ready to get started?

View the complete documentation with detailed setup instructions, troubleshooting, and customization guide.

Noor UI Components Used

Layout & Navigation

  • • DashboardShell
  • • UserMenu
  • • NotificationCenter

Content & Forms

  • • RichTextEditor
  • • FileUpload
  • • Input, Label, Select

Data Display

  • • Card, Badge
  • • Table
  • • Tabs

Feedback

  • • Toast notifications
  • • Alert
  • • Loading states