Matrix Client

A beautiful web-based Matrix client built with React and TailwindCSS featuring dark mode support.

Features

Connect to any Matrix homeserver
Login with username/password
View and join rooms
Send and receive messages
Real-time message updates
Beautiful dark/light mode toggle
Responsive design with improved UI
Enhanced message display with better grouping
Smooth animations and transitions

Project Structure

├── backend/
│   └── index.ts             # Proxy server for Matrix API (CORS handling)
├── frontend/
│   ├── components/
│   │   ├── App.tsx          # Main application component
│   │   ├── Login.tsx        # Login form
│   │   ├── RoomList.tsx     # List of joined rooms
│   │   ├── ChatView.tsx     # Chat interface
│   │   ├── MessageList.tsx  # Message display
│   │   └── MessageInput.tsx # Message composition
│   ├── index.html           # Main HTML template
│   └── index.tsx            # Frontend entry point
├── shared/
│   └── types.ts             # Shared TypeScript types
└── README.md

Usage

Open the application
Enter your Matrix homeserver URL (e.g., https://matrix.org)
Login with your Matrix credentials
Browse rooms and start chatting!

Features Implemented

✅ Dark/Light Mode: Beautiful theme toggle with persistent preference
✅ Responsive Design: Works perfectly on desktop and mobile
✅ Enhanced Login: Gradient background with improved form styling
✅ Better Room List: Improved avatars, spacing, and hover effects
✅ Advanced Chat View: Enhanced message bubbles with better grouping
✅ Smart Message Display: Date separators and time grouping
✅ Improved Message Input: Auto-resize with character count
✅ Real-time Sync: Live message updates with polling
✅ Session Persistence: Automatic login restoration
✅ Error Handling: Comprehensive error states with retry options
✅ Debug Support: Console logging for troubleshooting
✅ Smooth Animations: CSS transitions and message animations
✅ Custom Scrollbars: Styled for both light and dark modes

Technical Details

Backend: Hono-based proxy server to handle CORS issues with Matrix homeservers
Frontend: React SPA with TailwindCSS for styling
Real-time: Polling-based sync for new messages
Storage: LocalStorage for session persistence
API: Matrix Client-Server API v1.0

Development

The backend serves as a proxy to handle CORS issues with Matrix homeservers. All Matrix API calls are proxied through /api/matrix/* endpoints.

loading