CChat is a modern, real-time chatroom web application designed for seamless group communication. Built using React, TypeScript, Express, and Socket.IO, it provides a fast, interactive, and user-friendly experience. CChat is ideal for teams, friends, or communities who want to chat instantly in a shared space.
- Real-Time Messaging: Instantly send and receive messages using Socket.IO.
- User Presence: See who is online and get notified when users join or leave the chatroom.
- Typing Indicators: Know when someone is typing a message.
- Light/Dark Mode: Toggle between light and dark themes for comfortable viewing.
- Responsive Design: Works smoothly on desktops, tablets, and mobile devices.
- Username Entry: Users must enter a unique username before joining the chat.
- Message Timestamps: Every message displays the time it was sent.
- Online User Count: View the number of active users in the chatroom.
- Modern UI: Clean and intuitive interface built with Tailwind CSS.
- Input Validation: Prevents empty or duplicate usernames.
- Frontend: React, TypeScript, Tailwind CSS, Vite
- Backend: Node.js, Express, Socket.IO
-
Clone the repository:
git clone https://github.com/thanavreddy/CChat.git cd CChat -
Install dependencies:
npm install
-
Start both the client and server in development mode:
npm run dev
- The React client runs at http://localhost:5173
- The Express/Socket.IO server runs at http://localhost:3000
-
Open your browser and go to:
http://localhost:5173 -
Enter a username to join the chatroom.
- You will see the chat interface and can start sending messages.
- Other users joining will appear in the online user list.
npm run dev– Start both client and server in development modenpm run client– Start only the React clientnpm run server– Start only the backend servernpm run build– Build the client for productionnpm run preview– Preview the production buildnpm run lint– Run code linting