Enterprise SaaS Analytics Dashboard

Next.js Recharts Supabase RBAC

The Elevator Pitch

A high-fidelity, dark-mode Enterprise SaaS dashboard showcasing complex state management, data visualization, and database-driven Role-Based Access Control (RBAC). Built with a "Senior Architect" mindset to demonstrate how backend permissions dynamically alter frontend UI. 🧠 Why I Built It

Most frontend portfolios show pretty charts. I wanted to build a system that proves I understand the invisible layer of SaaS apps: Permissions. In a real startup (like Stripe or Vercel), the frontend doesn't decide what you see—the database does. This app queries a Postgres database for the user's role, and conditionally renders sensitive components (like the Admin Panel) based strictly on that database response. 🛠️ The Architecture

Frontend: Next.js 16 (App Router), Tailwind CSS, Lucide Icons.
State: React useState and useEffect for seamless role-switching without page reloads.
Database: Supabase (Postgres). Uses a relational app_users table with an enum CHECK constraint for roles (admin, editor, viewer).
Visualization: Recharts for responsive, server-side rendered analytics graphs.
Security: Mock-Auth Toggle to simulate Clerk/Auth0 JWT verification passing a clerk_id to the backend.

🎥 The "Magic Trick" Demo

The app defaults to a "Viewer" role. The analytics charts are visible.
The "Manage Users" panel is completely absent from the DOM.
Click "Login as Admin". The app re-queries Supabase, verifies the admin role, and the restricted panel renders instantly.

🚀 Local Setup

Requires Node.js and a Supabase project.

git clone https://github.com/Aman-776/saas-dashboard.gitcd saas-dashboardnpm installnpm run dev

Create a .env.local file: NEXT_PUBLIC_SUPABASE_URL=your_url NEXT_PUBLIC_SUPABASE_ANON_KEY=your_key (Note: You will also need to set up the app_users table schema in Supabase to see the RBAC in action). 📫 Contact

Built by Aron | Full-Stack Vibe Coder & Web3 Security Researcher