A modern Slack clone built with Next.js 15, React 19, and TypeScript. This project replicates Slack's core features with a focus on real-time communication, workspace management, and user interactions.
e2e.mp4
update.message.mp4
- Framework: Next.js 15 with App Router
- UI: React 19 + Tailwind CSS + shadcn/ui
- Authentication: Better Auth
- Database: Prisma with PostgreSQL
- State Management: TanStack Query (React Query)
- API Layer: tRPC
- Styling: Tailwind CSS with modern animations
- Form Handling: React Hook Form with Zod validation
- UI Components: shadcn/ui (built on Radix UI primitives)
- Real-time Features: Electric SQL
- HTTP/2 Development Server: Caddy (reverse proxy for local development)
- Modern, responsive UI with dark/light mode support
- Real-time messaging and presence
- Server and channel management
- User authentication and authorization
- Type-safe API with tRPC
- Form validation and error handling
- Optimized performance with Next.js 15
- Full TypeScript support
- Optimistic create message
# setup .env
# remember to setup BETTER_AUTH_SECRET, hint: try `npx nanoid` or something
cp .env.example .env
# Install dependencies
bun install
# Setup DB
# Ideally prisma migrate dev, but for speed we use prisma db push
bun prisma db pushscripts/dev.sh# Run Caddy reverse proxy to enable HTTP/2 to fix electric sql performance issue
# https://electric-sql.com/docs/guides/troubleshooting#slow-shapes-mdash-why-are-my-shapes-slow-in-the-browser-in-local-development
caddy run
# Start Docker containers (PostgreSQL and Electric SQL)
docker compose up
# Run development server
bun devStep 3: Visit https://localhost:4001
MIT License - feel free to use this project for learning and development purposes.
This is a T3 Stack project bootstrapped with create-t3-app.
We try to keep this project as simple as possible, so you can start with just the scaffolding we set up for you, and add additional things later when they become necessary.
If you are not familiar with the different technologies used in this project, please refer to the respective docs. If you still are in the wind, please join our Discord and ask for help.
To learn more about the T3 Stack, take a look at the following resources:
- Documentation
- Learn the T3 Stack — Check out these awesome tutorials
You can check out the create-t3-app GitHub repository — your feedback and contributions are welcome!
Follow our deployment guides for Vercel, Netlify and Docker for more information.