💬 Stream Chat

Chat that feels alive.

Stream Chat is a playful realtime chat app with a squishy, cartoonish "clay" design — puffy 3D bubbles, bouncy motion, and light & dark themes. Under the hood it's a modern Next.js app with instant messaging, threads, reactions, voice notes and presence.

📸 Screenshots

Sign in	New chat

Chat — light clay	Chat — dark clay

Threads	Share sheet

Mobile — chats	Mobile — conversation

✨ Features

• Realtime messaging — messages land instantly over live connections, with presence dots and typing indicators
• Threads & reactions — branch any message into a thread, pile on the emoji
• Voice notes — hold to record, release to send
• Group channels — create a crew with a name and photo, invite anyone
• Auth made easy — sign in with Google, Apple or email via Clerk
• Light & dark clay themes — two hand-molded looks, one toggle
• Mobile friendly — single-column flow on small screens with a slide-in conversation view

🧱 Stack

Layer	Tech
Framework	Next.js 14 (App Router)
Realtime chat	Stream Chat (stream-chat-react)
Auth	Clerk
Chat Messaging	GetStream
Styling	Tailwind CSS + shadcn/ui
Fonts	Fredoka (display) · Nunito (body)
Forms	React Hook Form + Zod
Extras	next-themes, emoji-mart, Sonner

🚀 Getting started

1. Clone & install

git clone <your-repo-url>
cd stream-chat-app
pnpm install

2. Set up environment variables

Copy the example file and fill in your keys:

cp .env.example .env.local

Variable	Where to get it
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY	Clerk dashboard → API keys
CLERK_SECRET_KEY	Clerk dashboard → API keys
NEXT_PUBLIC_CLERK_SIGN_IN_URL	/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL	/sign-up
NEXT_PUBLIC_STREAM_API_KEY	Stream dashboard → your app
STREAM_API_SECRET	Stream dashboard → your app

3. Run it

pnpm dev

Open http://localhost:3000, sign in, and start chatting.

📁 Project structure

app/
  (auth)/          # sign-in & sign-up (immersive clay scene)
  chat/            # the chat workspace
  landing/         # hero + features
  globals.css      # design tokens (light + dark clay)
  stream-theme.css # clay skin for the Stream Chat SDK
components/
  clay/            # logo, avatars, floating bubbles
  ui/              # shadcn/ui primitives
  stream-chat.tsx  # chat shell: rail · list · conversation
lib/
  actions.ts       # server actions (tokens, channel creation)
  clerk-appearance.ts

📜 Scripts

Command	What it does
pnpm dev	Start the dev server
pnpm build	Production build
pnpm start	Serve the production build
pnpm lint	Lint the codebase