A web-based Matrix client built with React and TailwindCSS.

• Connect to any Matrix homeserver
• Login with username/password
• View and join rooms
• Send and receive messages
• Real-time message updates
• Responsive design with TailwindCSS

├── 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

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

• ✅ Responsive login form with homeserver selection
• ✅ Room list with real-time updates
• ✅ Message history loading
• ✅ Real-time message sync
• ✅ Send text messages
• ✅ Message grouping by date
• ✅ User avatars and display names
• ✅ Optimistic message sending
• ✅ Auto-scrolling to new messages
• ✅ Session persistence
• ✅ Beautiful TailwindCSS styling

• 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

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