SaaS UI

Personal Project · 2025

Next.js
React
TypeScript
Tailwind CSS
Prisma
PostgreSQL
Better Auth
TanStack Query
TanStack Table
Zustand
Framer Motion
Radix UI
shadcn/ui
Zod
Recharts
Upstash Redis
Nodemailer
Google APIs
dnd kit
https://saas-ui.gyanranjanpriyam.tech
SaaS UI Desktop View

Desktop view · SaaS UI

Overview

A feature-rich SaaS application UI built with Next.js 16 and React 19, combining a robust backend stack (Prisma + PostgreSQL + Upstash Redis) with a polished, production-ready frontend experience.

Authentication is handled via Better Auth, with full form validation through Zod and server-side email support via Nodemailer. Google APIs integration enables calendar and productivity features including iCal event generation.

The UI layer is powered by shadcn/ui, Radix UI, Framer Motion, and Recharts for data visualization, with drag-and-drop functionality via dnd kit, activity calendars, toast notifications via Sonner, and a drawer component via Vaul.

Key Highlights

(7)
01

Full-stack SaaS with Prisma ORM and PostgreSQL via pg adapter

02

Authentication powered by Better Auth

03

Redis caching with Upstash for high performance

04

Drag-and-drop support via dnd kit (core, sortable, modifiers)

05

Data tables with TanStack Table and charts with Recharts

06

Google Calendar integration with iCal event generation

07

77.9% TypeScript — fully type-safe codebase

Features Included

(15)
</>

Authentication & session management with Better Auth

</>

Database ORM with Prisma and PostgreSQL

</>

Redis-backed caching with Upstash

</>

Drag-and-drop kanban/sortable UI with dnd kit

</>

Advanced data tables using TanStack Table

</>

Charts and analytics dashboard with Recharts

</>

Activity calendar with react-activity-calendar

</>

Google APIs integration with iCal event support

</>

Toast notifications via Sonner

</>

Drawer UI component via Vaul

</>

Confetti celebrations with canvas-confetti

</>

Dark/light theme with next-themes

</>

Server-side email delivery via Nodemailer

</>

Form validation with Zod

</>

Global state management with Zustand

Tech Stack

(19)
Next.js
React
TypeScript
Tailwind CSS
Prisma
PostgreSQL
Better Auth
TanStack Query
TanStack Table
Zustand
Framer Motion
Radix UI
shadcn/ui
Zod
Recharts
Upstash Redis
Nodemailer
Google APIs
dnd kit