Raibu - Random Video Chat

A modern WebRTC-based random video chat application built with React, TypeScript, and WebSocket STOMP.

Features

Core Features

• Random Video Chat - Connect with random people from around the world via WebRTC
• Match Modes - Choose from different chat modes: Random, English Practice, Gaming, Co-working, Travel, Music, Movies & Series, Food, Study
• Text Chat - Send messages during video calls with real-time delivery
• Icebreakers - Get conversation starters to help break the ice

Social Features

• Friends System - Add people you like to your friends list (mutual likes)
• Direct Messaging - Chat with friends anytime
• Friend Video Calls - Call your friends directly (coming soon)

User Preferences

• Country Selection - Set your location for better matching
• Language Preferences - Choose languages you want to chat in
• Interest Tags - Select topics you're interested in
• Gender Preferences - Choose preferred genders to chat with
• Same Country Preference - Prioritize matches from your country

Notifications & History

• Real-time Notifications - Get notified about new friends, messages, and updates
• Chat History - View your past sessions and feedback
• Session Feedback - Like or dislike chats to improve matching

Safety & Moderation

• Reporting System - Report inappropriate behavior with reasons
• User Banning - Automatic ban handling for violations
• Safe Environment - Community guidelines enforcement

Tech Stack

• Frontend: React 18 + TypeScript + Vite
• Styling: Tailwind CSS + shadcn/ui
• State Management: Zustand
• Authentication: Google OAuth 2.0
• Real-time Communication: WebSocket STOMP
• Video/Audio: WebRTC (RTCPeerConnection)
• HTTP Client: Axios
• Date Formatting: date-fns

Project Structure

src/
├── components/          # UI components
│   ├── ui/             # shadcn/ui components
│   └── Layout.tsx      # Main layout with navigation
├── pages/              # Page components
│   ├── Login.tsx       # Google OAuth login
│   ├── Home.tsx        # Match mode selector
│   ├── Chat.tsx        # Video chat interface
│   ├── Friends.tsx     # Friends list
│   ├── DirectMessage.tsx # DM with friend
│   ├── Preferences.tsx # User preferences
│   ├── Notifications.tsx # Notification center
│   ├── History.tsx     # Chat history
│   └── Banned.tsx      # Ban page
├── hooks/              # Custom React hooks
│   ├── useAuth.ts      # Authentication hook
│   ├── useMedia.ts     # Camera/microphone hook
│   └── useWebRTC.ts    # WebRTC hook
├── services/           # API services
│   ├── api.ts          # Axios instance
│   ├── authService.ts  # Auth API
│   ├── friendsService.ts # Friends API
│   ├── notificationService.ts # Notifications API
│   ├── reportService.ts # Reporting API
│   └── stompService.ts # WebSocket STOMP service
├── stores/             # Zustand stores
│   ├── authStore.ts    # Auth state
│   ├── chatStore.ts    # Chat state
│   ├── friendsStore.ts # Friends state
│   ├── notificationStore.ts # Notifications state
│   ├── preferencesStore.ts # Preferences state
│   └── callStore.ts    # Call state
├── types/              # TypeScript types
│   └── index.ts        # All type definitions
└── lib/                # Utilities
    └── utils.ts        # Helper functions

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn
• Backend API running (see api.yml)

Installation

1. Clone the repository:

git clone <repo-url>
cd raibu-frontend

2. Install dependencies:

npm install

3. Create environment file:

cp .env.example .env

4. Update .env with your configuration:

VITE_API_URL=http://localhost:8080
VITE_WS_URL=ws://localhost:8080/ws
VITE_GOOGLE_CLIENT_ID=your_google_client_id

5. Start the development server:

npm run dev

6. Open http://localhost:5173 in your browser

Building for Production

npm run build

The built files will be in the dist/ directory.

API Integration

The frontend integrates with the Raibu backend API as defined in api.yml:

Authentication

• GET /me - Get current user
• PUT /me/country - Update country
• GET /me/preferences - Get preferences
• PUT /me/preferences - Update preferences

Sessions

• GET /sessions/me - Get user's sessions
• GET /sessions/{id}/messages - Get session messages
• POST /sessions/{id}/feedback - Submit feedback

Friends

• GET /friends - List friends
• GET /friends/{id}/messages - Get DM history
• POST /friends/{id}/messages - Send DM

Notifications

• GET /notifications - List notifications
• PUT /notifications/{id}/read - Mark as read

Reports

• POST /reports - Create report

WebSocket STOMP

• Connect to /ws
• Subscribe to /user/queue/match - Match notifications
• Subscribe to /user/queue/signal - WebRTC signaling
• Subscribe to /user/queue/chat - Chat messages
• Subscribe to /user/queue/notifications - Real-time notifications
• Subscribe to /user/queue/dm - Direct messages
• Send to /app/search - Start matchmaking
• Send to /app/signal - WebRTC signaling
• Send to /app/chat - Send chat message
• Send to /app/dm - Send direct message

WebRTC Flow

1. User clicks "Start Chatting"
2. Browser requests camera/microphone permissions
3. Frontend sends /app/search via WebSocket
4. Backend matches users and sends MATCH_FOUND
5. Users exchange WebRTC offers/answers via /app/signal
6. ICE candidates are exchanged
7. Peer-to-peer connection established
8. Video/audio streams flow directly between peers

Environment Variables

Variable	Description	Default
VITE_API_URL	Backend API URL	http://localhost:8080
VITE_WS_URL	WebSocket URL	ws://localhost:8080/ws
VITE_GOOGLE_CLIENT_ID	Google OAuth Client ID	-

Browser Support

• Chrome 80+
• Firefox 75+
• Safari 14+
• Edge 80+

Requires WebRTC support and camera/microphone permissions.

Contributing

1. Fork the repository
2. Create a feature branch
3. Commit your changes
4. Push to the branch
5. Create a Pull Request

License

MIT License - see LICENSE file for details

Support

For support, email support@raibu.app or join our Discord server.

---

Built with ❤️ using React, TypeScript, and WebRTC