🎧 Real-Time Customer Support Platform (Frontend)
📖 Overview
A modern, responsive frontend application for a real-time customer support platform that enables customers to connect with support experts through secure live messaging.
The application provides intuitive dashboards for both customers and support experts, allowing users to create support requests, communicate in real time, and track the status of ongoing conversations.
This project is built with Next.js 16, React 19, and Socket.io Client, and integrates seamlessly with the backend API to deliver a fast and interactive support experience.
Website: https://chatroom-xi-lac.vercel.app/
Live Demo
✨ Features
🔐 Secure Authentication
👤 Customer Dashboard
👨💼 Expert Dashboard
💬 Real-Time Chat
📡 Live Socket.io Communication
📄 Support Request Management
⚡ Responsive User Interface
🎨 Modern Animations using Framer Motion
🌙 Clean and Professional UI
🔗 REST API Integration
🛠 Tech Stack
Frontend
Next.js 16
React 19
TypeScript
Tailwind CSS
Axios
Socket.io Client
Framer Motion
Lucide React
📂 Project Structure
app/ ├── dashboard/ ├── components/ ├── background/ ├── features/ ├── faq/ └── layout.tsx
The project follows the Next.js App Router architecture with reusable components and modular routing.
🚀 Getting Started
git clone https://github.com/Tembogs/chatroom-frontend.git
npm install
npm run dev
🔗 Backend API
This frontend communicates with a dedicated backend built using:
Node.js
Express.js
PostgreSQL
Prisma ORM
Socket.io
JWT Authentication
🌟 Key Highlights
Built with the latest React and Next.js versions.
Real-time messaging powered by Socket.io.
Responsive dashboards for customers and experts.
Smooth UI animations using Framer Motion.
Clean component-based architecture.
📸 Screenshots
Include screenshots of:
Landing Page
Login
Customer Dashboard
Expert Dashboard
Active Chat
🚀 Future Improvements
Push notifications
File sharing
Voice & video support
Typing indicators
Read receipts
Multi-language support
👨💻 Author
Temmy (Tembogs)
Full-Stack Software Engineer
GitHub: https://github.com/Tembogs