Fun Chat is a real-time chat application built with pure TypeScript and WebSocket technology.
It is a Single Page Application (SPA) that enables instant communication while giving users control over their conversation data.
- ⚡ Real-time messaging using WebSocket connections
- 🔑 User authentication with client-side validation
- 🟢 Online/offline user status indicators
- 🕘 Full message history with chronological order
- 🔔 Unread message counters per conversation
- 🔍 User search by name
- 📐 Responsive design (380px – 1440px)
- TypeScript
- WebSocket API
- Webpack
- ESLint (Unicorn style guide)
- Prettier
- Husky
- Login form with validation and error handling
- Keyboard support (Enter key)
- Automatic redirect after successful login
- Header with username and Logout button
- User list:
- all registered users except current user
- online/offline status
- unread message counters
- User search functionality
- Active chat area with message history
- Footer with school logo, author info, GitHub link, creation year
- Message includes:
- timestamp
- sender name
- message text
- Status indicators:
- Delivered
- Read (visible only to sender)
- Empty messages are not allowed
- WebSocket protocol for bidirectional communication
- Modular architecture (API / UI / state separation)
- Full TypeScript typing without
any - Dynamic DOM generation via JavaScript
git clone https://github.com/your-username/fun-chat.gitgit clone https://github.com/rolling-scopes-school/fun-chat-server.git
Run in both repositories:
npm install
In the fun-chat-server repository:
- Create a .env file
- You can use .env.example as a reference
- Configure the following parameters:
SERVER_PORT=4000 LOG=all
npm run startThe server starts on port 4000 and listens for WebSocket connections.
npm run start
