talk.rn

A modern, real-time peer-to-peer chat application built with React, TypeScript, WebRTC, and Socket.io.

Features

• Real-time P2P Communication: Direct peer-to-peer messaging using WebRTC
• Smart Pairing System: Automatic user matching with skip functionality
• Modern UI: Glassmorphic design with smooth animations
• Responsive Design: Works seamlessly on desktop and mobile devices
• Type-Safe: Built with TypeScript for better developer experience

Architecture

Client Side

• React with TypeScript for UI components
• Socket.io Client for signaling and user pairing
• SimplePeer for WebRTC peer-to-peer connections
• Tailwind CSS for modern styling
• Vite for fast development and optimized builds

Server Side

• Node.js with TypeScript
• Express for serving static files
• Socket.io for real-time signaling
• Modular Architecture with separated concerns

Development

Prerequisites

• Node.js
• npm or yarn

Getting Started

1. Install Dependencies

   # Install client dependencies
   cd client && npm install
   
   # Install server dependencies
   cd ../server && npm install

2. Development Mode

   # Start client (from client directory)
   npm run dev
   
   # Start server (from server directory)
   npm run dev

3. Production Build

   # Build client (from client directory)
   npm run build
   
   # Build server (from server directory)
   npm run build && npm start

Code Quality

Architecture Principles

• Single Responsibility: Each component handles one concern
• Separation of Concerns: Clear boundaries between UI, state, and network logic
• Performance Optimized: Memoized components and optimized re-renders
• Type Safety: Comprehensive TypeScript coverage

Code Organization

├── client/
│   ├── src/
│   │   ├── Components/    # React components
│   │   ├── index.css      # Global styles and animations
│   │   └── main.tsx       # Application entry point
│   └── public/            # Static assets
├── server/
│   └── index.ts           # Socket.io signaling server
│   └── eventHandlers.ts   # Event handlers for the signaling server
│   └── interfaces.ts      # Signaling server interfaces
└── README.md              # Project documentation

Key Design Decisions

• WebRTC for P2P: Direct communication without server intermediary
• Socket.io for Signaling: Reliable connection establishment
• Component Composition: Reusable, testable components
• State Colocation: State managed close to where it's used
• Performance First: Memoization and optimized rendering

Deployment

The application is designed for easy deployment with Docker support and can be hosted on any Node.js platform.

Contributing

1. Follow existing code patterns and architecture
2. Maintain type safety with TypeScript
3. Keep components focused and single-purpose
4. Add proper error handling and validation
5. Test thoroughly on both desktop and mobile