A comprehensive real-time chat application inspired by WhatsApp with the following features:

• Tabs: All, People, Groups, Community
• Individual Messaging: Send messages to contacts
• Group Chat: Create, join, and participate in group conversations
• Contact Management: Add new contacts, manage group members

• Chat Room: Bottom-left icon for posting challenges and seeking help
• Real-time Updates: Live message delivery and notifications
• Customizable Settings: User preferences and app customization

• Custom Icon: Slanted letter "R" as app icon
• User-friendly Interface: Clean, intuitive design
• Responsive Design: Works on all devices

├── backend/
│   ├── index.ts           # Main Hono server
│   ├── database/
│   │   ├── migrations.ts  # Database schema
│   │   └── queries.ts     # Database operations
│   └── routes/
│       ├── auth.ts        # Authentication routes
│       ├── chat.ts        # Chat operations
│       ├── contacts.ts    # Contact management
│       └── groups.ts      # Group management
├── frontend/
│   ├── index.html         # Main HTML template
│   ├── index.tsx          # React app entry point
│   ├── components/
│   │   ├── App.tsx        # Main app component
│   │   ├── ChatTabs.tsx   # Tab navigation
│   │   ├── ChatList.tsx   # Chat list view
│   │   ├── ChatWindow.tsx # Individual chat window
│   │   ├── GroupChat.tsx  # Group chat component
│   │   ├── ChatRoom.tsx   # Challenge chat room
│   │   └── Settings.tsx   # User settings
│   └── style.css          # Custom styles
└── shared/
    └── types.ts           # Shared TypeScript types

• Backend: Hono (TypeScript API framework)
• Frontend: React with TypeScript
• Database: SQLite
• Real-time: WebSocket connections
• Styling: TailwindCSS
• Storage: Val Town Blob storage for media

The app will be available at the HTTP endpoint once deployed. Users can:

1. Register/Login with their credentials
2. Add contacts by username or phone
3. Start individual chats or create groups
4. Access the chat room for community challenges
5. Customize settings according to preferences

• GET / - Serve the main application
• POST /api/auth/login - User authentication
• POST /api/auth/register - User registration
• GET /api/contacts - Get user contacts
• POST /api/contacts - Add new contact
• GET /api/chats - Get user chats
• POST /api/chats/send - Send message
• GET /api/groups - Get user groups
• POST /api/groups - Create new group
• GET /api/chatroom - Get chat room messages
• POST /api/chatroom - Post to chat room
• WS /ws - WebSocket for real-time updates