Hugging Face's logo

Spaces:
abdullahalioo
/
final_clone
Sleeping

App Files Community
final_clone / replit.md
abdullahalioo's picture
abdullahalioo
Upload 18 files
2f7626f verified
preview code
|
raw
history blame contribute delete
4.69 kB

WhatsApp Clone

Overview

This is a Flask-based WhatsApp clone application that provides real-time messaging functionality with features like group chats, file sharing, voice message recording, and online/offline status tracking. The application uses a traditional server-side architecture with SQLAlchemy for database operations and real-time updates through client-side polling.

User Preferences

Preferred communication style: Simple, everyday language.

System Architecture

The application follows a traditional web application architecture with:

  • Frontend: Server-side rendered HTML templates with vanilla JavaScript for interactivity
  • Backend: Flask web framework with SQLAlchemy ORM for database operations
  • Database: SQLite (default) with PostgreSQL support through environment configuration
  • File Storage: Local filesystem storage for uploaded files
  • Real-time Updates: Client-side polling mechanism for message updates

Key Components

Backend Components

  1. Flask Application (app.py)

    • Main application configuration and setup
    • Database initialization with SQLAlchemy
    • File upload configuration (100MB max, multiple file types supported)
    • Session management with secret key configuration

  2. Database Models (models.py)

    • User model with unique ID generation system
    • Conversation model supporting both private and group chats
    • ConversationParticipant model for managing chat memberships
    • Message model for storing chat messages (incomplete in current codebase)
    • MessageSeen model for tracking message read status (referenced but not fully implemented)

  3. Routes (routes.py)

    • RESTful API endpoints for user registration, messaging, and file operations
    • File upload/download handling with MIME type detection
    • Authentication and session management
    • Conversation and message management endpoints

Frontend Components

  1. Templates (templates/)

    • Landing page for user onboarding
    • Registration form for new user signup
    • Main chat interface with sidebar and message area
    • Settings page for user account management

  2. Static Assets (static/)

    • CSS styling with responsive design and mobile support
    • JavaScript modules for chat functionality, file handling, and audio recording
    • Modular architecture with separate files for different features

Data Flow

  1. User Registration: Users register with name and email, receiving an auto-generated 8-character unique ID
  2. Authentication: Session-based authentication using Flask sessions
  3. Conversation Creation: Users can create private or group conversations (3-10 members)
  4. Message Exchange: Real-time messaging through client-side polling mechanism
  5. File Sharing: Upload and download files with automatic MIME type detection and icon assignment
  6. Voice Messages: Web Audio API integration for recording and playback (in development)

External Dependencies

Backend Dependencies

  • Flask: Web framework for application structure
  • SQLAlchemy: ORM for database operations with declarative base
  • Werkzeug: WSGI utilities and security features
  • ProxyFix: Middleware for handling proxy headers

Frontend Dependencies

  • Bootstrap 5.3.0: CSS framework for responsive UI design
  • Font Awesome 6.0.0: Icon library for UI elements
  • Web Audio API: Browser API for voice recording functionality

Database Support

  • SQLite: Default database for development and simple deployments
  • PostgreSQL: Production database support through DATABASE_URL environment variable

Deployment Strategy

The application is designed for flexible deployment with:

  1. Environment Configuration: Database and session secrets configurable via environment variables
  2. Proxy Support: ProxyFix middleware for deployment behind reverse proxies
  3. File Storage: Local filesystem storage with configurable upload directory
  4. Database Migration: Automatic table creation on application startup
  5. Debug Mode: Configurable debug mode for development vs. production

Key Configuration Options

  • DATABASE_URL: Database connection string (defaults to SQLite)
  • SESSION_SECRET: Secret key for session management
  • UPLOAD_FOLDER: Directory for file uploads
  • MAX_CONTENT_LENGTH: Maximum file upload size (100MB default)

The architecture supports both development environments (with SQLite and debug mode) and production deployments (with PostgreSQL and proxy configuration). The modular JavaScript architecture and responsive CSS design ensure compatibility across different devices and screen sizes.