I developed this project to strengthen my Next.js knowledge and recall key points of working with WebSockets. Discord was taken as design & features reference.
Main used technologies:
- Next.js 14 (Page router: chosen due to lack of Socket.io App Router support at the time of dev)
- NextAuth (Credentials authorization)
- Prisma (MySQL)
- Socket.io (WebSockets)
- Zustand (State management library)
- shadcn/ui (UI components)
- TailwindCSS (Styling)
- SignUp & SignIn with email & password
- Server creation and its customization
- Create text, audio and video call channels
- Member management (kick, change role)
- Invite users to server with generated link
- Real-time messaging with sending images & emojis
- Delete & Edit messages in real time
- Message pagination & fetching on scroll
- Websocket fallback: Polling every 1s
- Fully responsive UI
- Light / Dark mode switcher
- Error handling on client and server
You can check my demo here.
Note: I use free PlanetScale plan for my DB which causes database sleep after period of inactivity. So if you get a server error notification probably it's all about DB access.
But here is demonstrative gif with my interactions with app if you wanna get a quick look. (speeded up)
- Step 1: Install all dependencies
npm i - Step 2: Create .env file and add necessary variables (follow
env.examplefile) - Step 3: Add DB and generate prisma schema
npx prisma generate&npx prisma db push - Start the app
npm run dev(next-env.d.ts should be generated automatically during build)
- Chat update optimization: Now messages are sent using POST request. This function is implemented this way to provide socket fallback but it causes a little delay for message appearing in the chat area. So I'm planning to provide sending messages using WebSocket primarily.
- User avatar: I wanna add possibility to upload user profile photo during registration for better app appearance.