Welcome to talkr!

Description

talkr is a react native project that aims to connect friends and family. It provides a way for the users to interact each other in real time all while providing an excellent and stunning UI/UX.

Features

• Users can register and log in using their email and can upload a profile picture.
• Users can add a friend to their contacts.
• Users can favourite and block a friend. If blocked, they cannot message each other until unblocked.
• Users can chat with their friends in real time. They can see if they have sent new messages in the home page and they can also see when a friend has been last active.
• Users can see all their contacts including their status and their profile picture. They can also see which friend has been favourited and/or blocked.
• Users can delete a chat from their view.
• Users can set their status, change their profile picture, and set their own theme (5 different colour theme for the app) in the settings page.

The App

Get Started Page

Register and Log-In Page

Users can register and set their profile picture from the camera roll. They can also log in with their existing account.

Home Page

Shows all your chats with your friends.

Chat Screen

You can message your friend in real time!

Add a friend

You can add a new friend using their email address.

Search

You can search your friend by their name and chat with them by clicking on their avatar.

Contacts Page

You can see all your friends in one page, it will list useful information such as your favourites and blocked users

Friend Screen

You can view your friend's profile, you can also favourite a user.

Block

You can block a user. Once you do this, you will not be able to send or receive messages from them.

Delete a chat

You can delete a chat from the home screen. However, this is not permanent and all the messages will still be there.

Settings Page

In settings page, you can view your own profile and make changes such as your profile picture, status and theme.

Theme Setting

You can customize the theme of your application. There are 6 options you can choose from.

Look at the orange theme!

Status Setting

You can set your status so that your friends can see them.

Getting Started

1. Fork this repository, then clone your fork of this repository.
2. Install dependencies using the npm install command.
3. Download the Expo App on your device.
4. Start the application using the expo start command.
5. Scan the QR code on your device, this will start the application.

Stack Choices

Front-End

• React Native (Expo)
• Tailwind CSS

Back-End

• Firebase