A modern, responsive chat application with real-time messaging, user authentication, and persistent data storage.
This project is a full-featured chat application built with a modern tech stack, enabling users to communicate in real-time through a clean, intuitive interface. The application uses a monorepo structure managed by Turborepo for efficient code organization and development workflow.
- User Authentication: Secure signup and login with JWT
- Real-time Messaging: Instant message delivery using WebSockets
- Room Management: Create and join chat rooms with unique codes
- Message History: Persistent storage of messages using Prisma
- Responsive Design: Optimized for both desktop and mobile devices
- User Presence: See who's online in a chat room
- Room Sharing: Share room codes to invite others
- Next.js: React framework for building the user interface
- TypeScript: Type-safe JavaScript
- Tailwind CSS: Utility-first CSS framework
- Framer Motion: Animation library for smooth transitions
- Express: HTTP server for REST API endpoints
- WebSocket: Real-time bidirectional communication
- JWT: Secure authentication tokens
- Prisma: Type-safe database ORM
- PostgreSQL: Relational database for data persistence
- Turborepo: Monorepo management
- pnpm: Fast, disk space efficient package manager
Chat-App/ ├── apps/ │ ├── project/ # Next.js frontend application │ ├── http-backend/ # Express API server │ └── websocket-backend/ # WebSocket server for real-time communication ├── packages/ │ ├── ui/ # Shared UI components │ ├── common/ # Shared utilities and types │ ├── common-backend/ # Backend utilities and config │ ├── database/ # Prisma schema and database config │ ├── eslint-config/ # ESLint configurations │ └── typescript-config/ # TypeScript configurations └── ...
- Node.js (v14 or later)
- pnpm
- PostgreSQL database
Create the following .env files:
NEXT_PUBLIC_HTTP_BACKEND="http://localhost:3002" NEXT_PUBLIC_WS_BACKEND="ws://localhost:8080"
DATABASE_URL="postgresql://username:password@localhost:5432/chatapp"
JWT_SECRET="your-secret-key"
bash
git clone https://github.com/yourusername/realtime-chatapp.git cd realtime-chatapp/Chat-App
pnpm install
pnpm db:push
pnpm dev
- Navigate to the signup page to create a new account
- Fill in your details (name, email, password)
- After registration, you'll be automatically logged in
- For returning users, navigate to the signin page
- From the dashboard, click "Generate Code" to create a unique room code
- Enter a name for your room
- Click "Create & Enter Room"
- Share the 5-digit room code with others to let them join
- From the dashboard, enter the 5-digit room code in the "Join a Room" section
- Click "Join Room" to enter the chat
- Type your message in the input field at the bottom of the chat
- Press Enter or click the send button to send your message
- Messages are delivered in real-time to all users in the room
- POST /api/auth/signup: Register a new user
- POST /api/auth/signin: Authenticate and receive JWT token
- POST /api/room/create: Create a new chat room
- POST /api/room/join: Join an existing chat room
- GET /api/room/all: Get all rooms for the current user
- connect: Initialize WebSocket connection
- joinRoom: Join a specific chat room
- leaveRoom: Leave a chat room
- message: Send a message to a room
The application can be deployed on various platforms:
- Frontend: Vercel, Netlify, or any static hosting service
- Backend: Render, Heroku, Railway, or any Node.js hosting service
- Database: Supabase, Railway, or any PostgreSQL provider
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (git checkout -b feature/amazing-feature)
- Commit your changes (git commit -m 'Add some amazing feature')
- Push to the branch (git push origin feature/amazing-feature)
- Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.