Flutter Real-time Chat App

Project roadmap

1. 01

   Set up Firebase sign-in

   ~2h

   Create a Firebase project, add it to the Flutter app with the FlutterFire CLI, and enable email and password sign-in. Build sign-up, sign-in and sign-out screens with clear error messages (weak password, email in use, wrong password). Use a Riverpod provider on authStateChanges to show the right screen. Done when: users can sign up, sign in and stay signed in after restarting the app.

2. 02

   Build the WebSocket server

   ~2.5h

   Write a WebSocket server (for example in Dart with shelf_web_socket, or Node.js with ws). On connect, the client sends its Firebase ID token, which the server verifies with the Firebase Admin SDK before accepting any message. Define JSON messages (join room, leave room, message, typing and presence), keep the last 50 messages per room, and broadcast messages to room members. Done when: two authenticated test clients can exchange messages, and a client without a valid token is disconnected.

3. 03

   Build the chat screens

   ~2.5h

   Create a ChatService that exposes incoming messages as a Stream, and Riverpod providers on top of it. Build a room list and a room screen that shows messages with a StreamBuilder (your messages on the right, others on the left, with names and times), loads the recent history on joining, and has a message composer. Done when: two phones or emulators can chat in the same room.

4. 04

   Show presence and typing

   ~1.5h

   The server tracks who is connected to each room and broadcasts presence changes. Show online users in the room header. Send a typing event while the user types (at most every few seconds) and show Name is typing… for a few seconds after receiving one. Done when: presence and typing indicators update on the other device.

5. 05

   Reconnect and queue offline messages

   ~2.5h

   Detect dropped connections (errors, closes and missed pings), reconnect with increasing waits, rejoin rooms and fetch messages missed while disconnected. Messages sent while offline are shown as pending, stored locally, and sent in order after reconnecting, with a client id so the server ignores duplicates. Show the connection state in the app bar. Done when: messages written in airplane mode are delivered once after reconnecting.

6. 06

   Add push notifications

   ~2h

   Add firebase_messaging: ask for notification permission, save each device's FCM token (sent to your server after sign-in), and have the server send a notification through the Firebase Admin SDK to room members who aren't connected when a message arrives. Tapping the notification opens the right room. Done when: a message sent while the other app is closed shows a notification that opens the room.

7. 07

   Test it

   ~2h

   Write tests for the ChatService with a fake WebSocket: message parsing, reconnect waits, the offline queue sending in order, and duplicates ignored. Add server tests for token checks, room broadcasts and history. Add a widget test for the room screen with a fake stream. Done when: all tests pass.

Resources

• DocsFirebase Authentication for Flutter
• DocsFirebase: verify ID tokens (Admin SDK)
• DocsFlutter cookbook: communicate with WebSockets
• DocsFirebase Cloud Messaging for Flutter
• DocsRiverpod documentation