React/Ionic Chat App Build (whatsapp clone)

Замовник: AI | Опубліковано: 17.01.2026

I’m building a cross-platform messenger that should feel as seamless as WhatsApp while remaining fully open for future feature expansion. The frontend must run on React with Ionic so a single codebase reaches iOS, Android and the web. On the server side I’ve chosen FastAPI backed by PostgreSQL. Authentication & Roles • All access is gated by JWT bearer tokens. • Three roles drive permissions: Admin, Moderator and Regular user. Core User Features Every regular user needs real-time chat, profile editing and an in-app notification system. A clean, responsive UI is essential and I’d like the project structured so components can later be reused for group chat and media sharing. Admin Panel Requirements Admins must be able to manage user roles, block or unblock accounts and browse detailed activity logs. A streamlined moderator view (subset of the admin tools) will help keep day-to-day policing efficient. Technical Expectations • FastAPI endpoints documented with OpenAPI. • PostgreSQL schema migrations handled via Alembic. • WebSocket implementation for live messaging. • Clear separation between services, models and controllers. • Unit tests for critical business logic and auth. Deliverables 1. Source code for frontend (React + Ionic) and backend (FastAPI). 2. Admin panel integrated into the same repo or cleanly separated in a monorepo. 3. Docker-compose file that spins up the full stack (API, database, optional Nginx). 4. Setup instructions and a short walkthrough video or screenshot set showing the chat flow, role management, blocking/unblocking and log viewing. If you’ve shipped similar chat products or have strong WebSocket and JWT experience, you’ll ramp up quickly. Let me know about any relevant repos or demos and your estimated timeline for an MVP we can iterate on. 1. Authentication & User Management Login & Signup Login using mobile number or email OTP-based verification (SMS / Email) Optional password setup JWT-based authentication Refresh token support Logout from all devices User Profile Profile photo Name About / status message Last seen & online indicator Privacy settings (last seen, profile pic, status) 2. Multi-Tenant / Company Architecture (Important) System supports multiple companies Each company is identified by a mother_id All users belong to exactly one mother_id Users under the same mother_id can: Chat with each other Be part of the same groups Users from different mother_id cannot see or interact with each other Roles & Permissions Custom role system (not hardcoded) Examples: super_admin company_admin manager employee Roles are configurable per mother_id Role-based access using JWT claims Backend enforcement via FastAPI dependencies 3. Chat Features (Core WhatsApp Functionality) One-to-One Chat Real-time messaging (WebSockets) Text messages Emoji support Message timestamps Online / typing indicator Read receipts (single tick, double tick, blue tick) Message delivery status Delete message: Delete for me Delete for everyone Reply to message Forward message Group Chat Create group Group icon & description Add / remove members Group admin roles Only admins can: Add/remove users Change group info Group info screen: Member list Media shared in group Exit group Mute group notifications 4. Media & File Sharing Supported Media Images (preview & full view) Videos (inline preview) Audio files Voice messages (record & send) Documents (PDF, DOC, XLS, etc.) Media Handling Media categorized automatically: Images Videos Documents Links File size limits Secure file URLs Message → Media mapping in DB 5. Chat Info & Media Aggregation Screens (WhatsApp-like) User Chat Info Screen When clicking on a user or group header: Profile image Name Status Mute / Block options Media, Links & Docs section All shared files grouped by type Click to open/download Group Info Screen Group image Group description Members list Admin badge Media aggregation Leave group button 6. Contacts & Search Contact list (same mother_id) Search users by name / number Search inside chat Recent chats ordering Unread message count badge 7. Notifications Push notifications (OneSignal-ready) Notification for: New message Group messages Mute per chat / group Silent notifications option 8. Admin / Management Features Admin Capabilities Create company (mother_id) Create users Assign roles Activate / deactivate users View user list per company Basic analytics (users, groups count) 9. Backend Architecture (Mandatory) Tech Stack Backend: FastAPI (Python) Database: PostgreSQL ORM: SQLAlchemy / SQLModel Auth: JWT (Access + Refresh) Real-time: FastAPI WebSockets File storage: Local / S3-ready API Docs: Swagger (auto) Backend Rules All APIs protected via JWT mother_id enforced in every query Role-based authorization Clean REST APIs + WebSocket events Scalable schema (messages, groups, media, receipts) 10. Frontend Architecture Framework: Ionic React (or React with Ionic UI) Mobile-first responsive design WhatsApp Web–style layout: Chat list (left) Chat window (right) Android-compatible UI sizing Clean, reusable components Later deployable as: Web App Android App (via Capacitor) 11. Non-Functional Requirements Clean code & folder structure Environment-based config Error handling Basic security best practices Ready for future: Video/voice calls End-to-end encryption Status / stories 12. Final Clarification (Important) This is a FULL WhatsApp-style system, not a partial chat demo. All standard WhatsApp features are expected to be included by default, even if not individually listed above.