Skip to content

React Frontend

RushChat's frontend is built with React 18.

React Frontend Overview

Technology Stack

  • React 18 - UI framework
  • Socket.io Client - WebSocket communication
  • CSS Variables - Theme system
  • React Context - State management
  • Wagmi - Ethereum wallet connection
  • Viem - Ethereum utilities

Project Structure

client/
├── src/
│   ├── App.js               # Main application component
│   ├── index.js             # Entry point
│   ├── components/          # React components
│   │   ├── ChatRoom.js
│   │   ├── ChannelManager.js
│   │   ├── MessageList.js
│   │   └── ...
│   ├── utils/               # Utility functions
│   │   ├── websocket.js
│   │   ├── wallet.js
│   │   └── ...
│   ├── i18n/                # Internationalization
│   │   ├── index.js
│   │   └── locales/
│   │       ├── zh.js
│   │       └── en.js
│   └── config/              # Configuration files
│       └── wagmi.js
├── public/                  # Static files
└── package.json

Core Components

ChatRoom

Main chat room component, includes:

  • Message list
  • Message input
  • User list
  • Emoji selector

ChannelManager

Channel management component, includes:

  • Channel list
  • Channel creation
  • Channel switching

WalletConnect

Wallet connection component, supports:

  • MetaMask
  • OKX Wallet
  • Phantom
  • Coinbase Wallet
  • Other EVM and Solana wallets

Features

Real-time Communication

  • WebSocket connection
  • Auto reconnect
  • Real-time message updates

Theme System

  • Day/night mode
  • CSS Variables
  • Smooth transition animations

Internationalization

  • Supports Chinese and English
  • Uses i18next
  • Dynamic language switching

Responsive Design

  • Mobile adaptation
  • Desktop optimization
  • Adaptive layout

Development

Install Dependencies

cd client
npm install

Start Development Server

npm start

Build Production Version

npm run build