WhatsUp aims to replicate some of the WhatsApp core features but its main purpose is to showcase how easy it is to build real-time applications with Flutter and Firebase.
- Phone Authentication 📲: Users can register their phone number and receive an OTP (One-Time Password) for verification.
- Light / Dark Theme 🌞🌚: You can switch between light and dark theme after you registered.
- Contacts Display 📒: Users can see their contacts who are already using the app.
- Real-time messaging 💬 ⚡: Clients can communicate each other in real time.
- Chat features 💬📷🎙️: Clients can send and receive text , images, videos and voice messages.
- Online / Offline Status 🟢🔴: Clients can see other users online or offline status.
- Read / Unread Messages ☑️👀: Clients can see if other users have read their messages.
- Message Replies ↩️: You can reply to specific messages in a conversation, facilitating threaded discussions.
- Emoji Support 😉: Users can send emojis in their messages using a built-in emoji picker.
- Group Chat 👥: Users can create groups and select the members.
- Status / Stories 📷🪩: Users can post status updates and view the status of other users.
- Video calls 📹🤳: Users can make video calls to their contacts.
- Call History 📞: Users can see their call history, who they called and who called them.
- Real-time updates ⚡: All of the above features are updated in real-time as they happen, and synced across devices.
Here are some screenshots of the app.
| Splash Screen | Phone Authentication | OTP Verification |
|---|---|---|
 |
 |
 |
| Create Profile | Chats | Chats Light Theme |
|---|---|---|
 |
 |
 |
| Chat | Chat Reply | Chat Light Theme |
|---|---|---|
 |
 |
 |
| Create Group | Create Group Light | Status Page |
|---|---|---|
 |
 |
 |
| Status Writer | Status Viewer | Status Updates |
|---|---|---|
 |
 |
 |
| Recent Calls | Recent Calls Light | Receiving Calls |
|---|---|---|
 |
 |
 |
To get started and run the app, you first need to create firebase project to set the required environment variables.
- Create a
.envfile in the root of the project. - Copy the content of
.env.exampleto.envand fill the required fields.
I recommend using both firebase and flutterfire CLI tools to configure firebase: https://firebase.google.com/docs/flutter/setup
After running flutterfire configure, a generated file firebase_options.dart will be created in the lib folder.
This file will contain the required environment variables from your firebase project for the app to work.
Once everything is set up, you can flutter run the app. If you don't get any exception while loading the app, you are good to go.
Before you can use any feature of the app, you need to configure the Firebase project.
- Authentication: Enable Phone Authentication.
- Important: You need to add your (test) phone number and the verification code to the Firebase Console to be able to register and login with your phone number.
- Firestore Database: Create a Firestore database and set the rules to allow read and write access to all users.
- Cloud Store: Create a Cloud Store and set the rules to allow read and write access to all users.