chatoChatApp

chatoChatApp is a WhatsApp-inspired full-stack chat application built with Node.js, React, MongoDB, and Socket.IO.

Features

• Signup and login with JWT authentication.
• User-selected unique usernames for starting chats.
• Live one-to-one messaging over Socket.IO.
• Typing indicators for better chat UX.
• Emoji picker and quick GIF sending.
• Message info showing delivered/read counters.
• Edit and delete your own messages.
• Keyboard behavior requested for chat composition: Ctrl+Enter sends, while Enter creates a new line.

Tech stack

• Client: React, Vite, Socket.IO client, Axios, emoji-picker-react.
• Server: Node.js, Express, Socket.IO, Mongoose, JWT, bcrypt.
• Database: MongoDB.

Getting started

1. Install dependencies

npm install

2. Configure environment variables

Copy both example files and adjust values if needed:

cp server/.env.example server/.env
cp client/.env.example client/.env

Make sure MongoDB is running locally or set MONGO_URI to your MongoDB connection string.

3. Run in development

npm run dev

The API runs on http://localhost:5000 and the React app runs on http://localhost:5173 by default.

Useful scripts

• npm run dev - run client and server together.
• npm run build - build the React client.
• npm run start - start the Node.js server.
• npm run lint - run JavaScript syntax checks on the server and ESLint on the client.

API overview

• POST /api/auth/signup - create a user with name, username, email, and password.
• POST /api/auth/login - login with identifier and password.
• GET /api/auth/me - return the authenticated user.
• GET /api/chat/conversations - list conversations.
• POST /api/chat/conversations - start a conversation by username.
• GET /api/chat/conversations/:conversationId/messages - list messages in a conversation.