Live chat app

Large school project

This app was the final project my app-development class. This app allows users to create an account, add friends, approve friend requests, chat with them and even call them via audio or video call!

Want to build something similar?

Let's get to it!

WHAT THIS PROJECT IS ABOUT

As stated, this app was developed for my app-development class in may 2022. It was a great project since my teammate and I already had experience building apps, therefore this project (and the whole class) allowed us to give structure to our knowledge and fully understand the full development process (not just coding). This app allows users to create accounts or log in, to add friends and approve requests, to chat and video call them and many more great features! The name "Live chat app" comes from the fact that all happens in real time, via gRPC and WebRTC.

Development process

Tools used

Timeline

Team behind the project

Deployment

Github

Firestore

React native

Expo

TypeScript

ClickUp

This is a multi-platform app (works for Android, iOS and the web). It was developed in react native with a workflow managed by Expo, and it was programmed using TypeScript. It has no backend, the app communicates directly with the database with firestore rules as the security layer. We used ClickUp to manage the development process.

Do you have a suggestion to improve this project?

Let me know it!

Principal features

Welcome screen

Welcome to Live chat app! This screen tells user what the app is about and some of its key features.

Log in

If users already have an account, they can log into the app entering their email and password. If not, they will need to sign up.

Sign up

In this screen, new users can create an account entering the required information. The user data is stored in Firestore using Firebase authentication to store it safely.

Add friend

Once users enter the app, they will not have any friends to chat with, so they will come to this screen to add new friends. Sending a friend request is as simpre as pressing a user in the list!

Friend requests

If your friends fided you through the add friends screen, their requests will appear here! Press any of them, and a menu will pop up, asking if you want to aprove it or delete it.

Friends

This creen displays all you friends! If you press in any of them, a menu will pup up asking if you want to delete them from your friends list.

Chats

Once you have friends to chat with, they will apprear in this creen to chat with them. If the conversation has not started yet, the app encourages you to say hi to them!

Chat

This screen allows users to actually chat between them. They are able to send text messages or images. This screen allows users to delete the chat's messages if they press the three dots on the top right corner and select that option.

Video call

The video call screen allows users to communicate with their friends using camera (or not), using voice (or not) and using their front and back cameras. This feature is only available in Android, since we had to pay for the apple's developer program to make it work on iOS (since WebRTC is a native module that is not supported in Expo go).

Settings

In this creen, users can view their photo and username. They can press any of the options presented. They can press the photo or the edit button to change their profile photo, which is shown to other users.

Edit profile

If users press the edit profile option, they will navigate to this screen where they can change their password and name.

WOULD YOU LIKE TO BUILD SOMETHING SIMILAR?

If you made it this far, I assume you are probably interested in this project. I hoped you liked it! If you did, don't doubt in contacting me to build something similar, I would be happy to hear your idea and develop it!

Let's do it!