A minimalist real-time chatroom app built with Next.js, Socket.IO, and Supabase. Users can join a chat by entering a room ID—no authentication required.
- Real-time messaging with Socket.IO
- Room-based chat (only users in same room can chat)
- Persistent chat history stored in Supabase
- Auto-deletes messages older than 5 days
- Styled with Tailwind CSS + ShadCN components
- Light/Dark mode with toggle
| Tech | Purpose |
|---|---|
| Next.js | Frontend framework |
| Socket.IO | Real-time messaging |
| Supabase | Backend-as-a-Service (Postgres) |
| Node.js | Express backend server |
| TailwindCSS | Styling |
git clone https://github.com/yourusername/textre-chat.git
cd textre-chat- Navigate to
chatroom-backend/ - Create a
.envfile:
SUPABASE_URL=https://your-project.supabase.co
SUPABASE_ANON_KEY=your-anon-key
PORT=5000- Install backend dependencies:
npm install- Start the backend:
npm run start- Navigate to
textre-chat/(your Next.js frontend) - Install frontend dependencies:
npm install- Start the frontend:
npm run dev- User joins a room by ID
- Sends a message → sent to backend via Socket.IO
- Backend stores message in Supabase DB
- All users in that room receive message in real-time
- On reload, latest 25 messages are fetched via REST
- Messages older than 5 days are deleted using:
- Run manually in Supabase SQL Editor or schedule with a CRON job
textre-chat/
├── chatroom-backend/ # Node.js + Socket.IO backend
├── chatroom-frontend/ # Next.js frontend
└── .env # Env file for Supabase keys