Z Chat

A real time chat app

Phone Number Authentication — Authenticate users via phone number using Firebase
Realtime Verification Code — Send and verify realtime verification codes to ensure the phone number belongs to the user.
Unique User Profile Creation — Create a unique, unskippable user profile page after phone verification where users set a username and avatar (optional email).
User Search — Allow users to search for other users by username to initiate direct messages.
Real-time Chat — Enabled real-time, one-on-one chat functionality.
Contact Suggestion Tool
— Uses AI to make suggestions about other ZChat users the current user might know. It uses the other person's username and avatar as input for the tool.
Color
Primary color: HSL(210, 67%, 46%) / RGB(35, 134, 230) for a calm and trustworthy feel. Background color: HSL(210, 13%, 96%) / RGB(242, 245, 249) for a clean, light backdrop. Accent color: HSL(180, 53%, 41%) / RGB(44, 175, 167) to highlight key actions and elements.
Layout
Employ a clear, intuitive layout focused on chat content, easy navigation, and user search functionality.
Typography
Body font: 'PT Sans', a humanist sans-serif to maintain a modern and readable design. Headline font: 'Space Grotesk' a proportional sans-serif to convey a techy, scientific feel
Iconography
Use clean, minimalist icons for chat functions, user profiles, and settings.
Animation
Use subtle animations for new messages and user interactions to provide smooth transitions and feedback.