react-live-chatroom

ChatSphere Frontend

This is the main frontend application for the ChatSphere real-time chat platform. Built with React, TypeScript, and Vite, it provides a modern, responsive user interface for the chat functionality.

Technologies

• React: UI library
• TypeScript: For type safety
• Vite: Build tool and development server
• TailwindCSS: Utility-first CSS framework
• WebSocket: For real-time communication
• Vitest: Testing framework

Project Structure

main/
├── public/              # Static assets
├── src/
│   ├── api/             # API client utilities
│   │   ├── httpApi.ts   # HTTP API client
│   │   └── websocketApi.ts # WebSocket client
│   ├── components/      # React components
│   │   ├── Chat.tsx     # Main chat component
│   │   ├── MessageBubble.tsx # Message display component
│   │   └── ...
│   ├── hooks/           # Custom React hooks
│   │   ├── useChat.ts   # Chat functionality hook
│   │   └── ...
│   ├── types.ts         # TypeScript type definitions
│   ├── App.tsx          # Main application component
│   └── main.tsx         # Application entry point
├── package.json         # Dependencies and scripts
└── tsconfig.json        # TypeScript configuration

Features

• Real-time Messaging: Send and receive messages instantly
• Room Management: Create and join chat rooms
• User Authentication: Secure user authentication
• API Token Management: Generate and manage API tokens
• Responsive Design: Works on desktop and mobile devices

Setup and Installation

1. Install dependencies:

   npm install

2. Configuration: The package is pre-configured to connect to the Railway-hosted API and WebSocket servers.

   API URL: https://react-live-chatroom-api-production.up.railway.app/api
   WS URL: wss://react-live-chatroom-api-production.up.railway.app/ws
   

3. Start the development server:

   npm run dev

Available Scripts

• npm run dev: Start development server
• npm run build: Build for production
• npm run test: Run tests
• npm run lint: Run ESLint
• npm run preview: Preview production build locally

API Integration

The frontend integrates with the ChatSphere API server for:

1. User Authentication: Login and registration
2. Room Management: Creating and joining rooms
3. Message Handling: Sending and receiving messages
4. Token Management: Generating and revoking API tokens

WebSocket Connection

Real-time messaging is implemented using WebSockets. The useChat hook manages the WebSocket connection and provides methods for sending and receiving messages.

Testing

Tests are written using Vitest and React Testing Library. Run tests with:

npm test

Building for Production

To build the application for production:

npm run build

This will create a dist directory with the compiled assets.

License

MIT