A production-ready, real-time chat frontend built with Next.js. Powers SwiftChat — a modern messaging platform with friends, rooms, file sharing and live presence.
SwiftChat Frontend is the web client of SwiftChat, built with Next.js 14 (App Router), TypeScript and Tailwind CSS. It talks to the SwiftChat Backend over REST and Socket.IO for real-time messaging, friend requests and presence.
- Real-time messaging powered by Socket.IO
- Google OAuth sign-in and email/password sign-up
- Friends system — send, accept and reject requests, block users
- Chat rooms with persisted history and live updates
- File uploads for profile photos and attachments
- Responsive UI built with Tailwind CSS and Radix primitives
- Dark mode via
next-themes - State management with Redux Toolkit
| Layer | Technology |
|---|---|
| Framework | Next.js 14 (App Router) |
| Language | TypeScript 5 |
| UI | Tailwind CSS, Radix UI, shadcn/ui |
| State | Redux Toolkit, React Redux |
| Forms | React Hook Form + Zod |
| Auth | NextAuth (v5 beta), JWT |
| Real-time | socket.io-client |
| Animations | Framer Motion |
| HTTP | Axios |
- Node.js 18+ and npm / pnpm / yarn / bun
- A running instance of the SwiftChat Backend
git clone https://github.com/kwa0x2/SwiftChat-Frontend.git
cd SwiftChat-Frontendnpm installCreate a .env.local file in the project root:
# Backend API
BASE_URL=http://localhost:9000/api/v1
SOCKET_IO_URL=http://localhost:9000/chat
# NextAuth — generate with: npx auth secret
AUTH_SECRET=your_auth_secret
# Uncomment in production / behind a proxy
# AUTH_TRUST_HOST=truenpm run devOpen http://localhost:3000 in your browser.
npm run dev # start the dev server
npm run build # production build
npm run start # run the production build
npm run lint # run ESLintSwiftChat-Frontend/
├── app/ # Next.js App Router pages, layouts & API routes
│ ├── (pages)/ # Route groups
│ ├── api/ # Route handlers
│ └── redux/ # Redux store setup
├── actions/ # Server actions
├── components/ # Reusable UI components
│ ├── dialogs/ # Modal dialogs
│ └── ui/ # shadcn/ui primitives
├── hooks/ # Custom React hooks
├── lib/ # Utilities & helpers
├── models/ # Shared types & data models
├── schemas/ # Zod validation schemas
├── public/ # Static assets
├── auth.ts # NextAuth configuration
├── middleware.ts # Route protection middleware
└── routes.ts # Route definitions
- SwiftChat Backend — Go + Gin + Socket.IO
Distributed under the MIT License. See LICENSE for more information.