ZAMO Chat App

Description

Zamo is a cutting-edge application crafted for today's dynamic individuals and teams. Designed with modernity in mind, Zamo offers a comprehensive solution for real-time communication and collaboration. Whether it's chat or video calls, our platform ensures seamless interaction among users. Share information, exchange resources, and spark discussions with ease. Zamo is more than just an app. It's a partner in fostering meaningful connections and collaborative success.

Creators

• Andrey Raychev - @Andrey-Raychev
• Martin Andreev - @Martin-Andreev-288
• Zvezda Neycheva - @DreamersJS
• Special thanks to testers who helped surface UX gaps and connectivity issues.

Technologies used

Installation

npm install

Run the application

# Development
npm start

# Production build
npm run build
npm run preview

Usage

• Public Interface: Where Engagement Begins
  Users enjoy a visually appealing welcome page that guides them smoothly. Each user could choose 'Login' or 'Create an account' to get started its way. The simple and efficient Login page ensures users securely access their accounts and new users navigate an intuitive registration process.

• Profile Panels: Personalizing Communication for Users
  Users have a profile panel which enables them to edit their Name, Email and Location. Users can also change their avatar and status.

• Chat Interface: Where Conversations Flourish
  Zamo's chat interface provides users with a dynamic space for direct messaging with friends. Users can easily search for contacts, start one-on-one conversations, and utilize audio and video features. Adding reactions to messages adds expressiveness, while the ability to edit or delete messages gives users control over their communication.

• Groups: Cultivating Collaborative Communities
  Zamo enables users to build stronger connections by creating and managing their own groups. During setup, users can add participants exclusively from their friend list, tailoring groups to specific interests or topics. Users have full control over their groups, with the ability to delete or leave them as needed, ensuring participation aligns with preferences and needs, creating a dynamic community environment.

• Channels: Enriching Group Conversations
  Upon the creation of a group in Zamo, a default #General channel is automatically established, serving as the foundational space for group discussions. However, the platform goes beyond this by empowering users with the capability to create additional channels within each group.
  The channels operate similarly to direct chats but are distinct in their facilitation of group conversations, allowing multiple users to engage with each other simultaneously. This feature is ideal for organizing discussions around specific topics, projects, or interests within the larger group context. Users who create channels retain the authority to delete them.

• Contacts: Your Hub for Connections
  The Contacts page in Zamo acts as a central hub for managing and expanding your friend network. It features a comprehensive list of current friends with an easy-to-use search function. Adding friends directly from this page streamlines the process, making your network easily accessible. Incoming friend requests are prominently displayed, simplifying the process of welcoming new connections into your circle.

• Video calls: Real-Time Conversations Beyond Text
  For moments when typing just isn’t enough, Zamo empowers users with instant video calling powered by WebRTC and Firebase signaling. When initiating a call, the recipient is immediately notified—ensuring real-time, face-to-face communication without delays.

Known Issues & Lessons Learned

1. Routing on Vercel

   • Issue: Initial deployment returned NOT_FOUND when refreshing routes.
   • Fix: Added vercel.json rewrite to serve index.html for all paths.
   • Lesson: Single Page Applications require explicit route handling in production.

2. Message Notifications

   • Issue: Testers noted that incoming messages were easy to miss (no visual indicators).
   • Next Step: Plan to add unread counters and “new message” badges for better UX.
   • Lesson: Functionality ≠ usability. Testing with real people reveals hidden UX gaps.

3. Mobile WebRTC Alerts

   • Issue: Rare alerts appeared on mobile after granting camera/mic access, before the stream rendered.
   • Status: Intermittent, not consistently reproducible.
   • Lesson: Mobile browsers handle permissions and track negotiation differently. Needs further investigation.

4. WebRTC and varying NAT/firewall restrictions

   • Issue: Video calls didn't work for one of the testers.
   • Cause: The reason it fails is network-dependent.
   • Next Step: Gather more testers on different networks.
   • Lesson: Big apps like Viber, WhatsApp, Messenger run massive TURN server infrastructure all over the world. When a P2P connection fails (which happens often due to NAT/firewall), the call automatically falls back to a relay server. These servers are optimized for performance and reliability, often with multiple transport protocols (UDP, TCP, TLS) to traverse restrictive networks. They don’t just try one ICE candidate — they try all possible paths (local IP, STUN-derived public IP, TURN relay) in parallel. While DIY average Firebase + WebRTC setup can fail on some networks — relying on standard STUN/TURN, not aggressive network fallback.

Test Accounts:

• User 1:
  • email: andrei.27@abv.bg
  • pass: 123456
• User 2:
  • email: Alex95@abv.bg
  • pass: 123456
• User 3:
  • email: Ivo22@abv.bg
  • pass: 123456