Log inSign up
Remna
RemnaR
Remix of Remna/Remnachat
Public
Like
R
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Sign up now
Code
/
Search
README.md

RChat - Real-Time Chat Application

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

Features

Core Chat Functionality

  • 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

Special Features

  • 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

UI/UX

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

Project Structure

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

Technology Stack

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

Getting Started

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

API Endpoints

  • 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
Code