Skip to content

An interactive chat application, like Discord, using ReactJs and various features provided by Google Cloud Platform: Authentication, Firestore, Cloud Storage, and Hosting🐱‍👤🐲

Notifications You must be signed in to change notification settings

kresnofatih/discordclone

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

45 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Discord Clone

Access the deployed the web app. View the demo of the app from a video.

About the Project

It is a web application that clones the chatting mechanism the well-known application called 'Discord'. It has a lot of social messenger apps features.

User Authentication by Google Email

You can create an account and login instantly if you have a google account. For this web, it is still only accessible by Gmail logins. A preview of the login screen is displayed below.

Login Page

Navigation Drawer

Press the discord logo on the top left of the screen to open the navigate drawer.

navigate

Update Profile!

If it's your first time logging in, you will have your gmail username and photo set to your discordclone profile. You can change your profile photo and displayname in the profile page.

Seacrhing for friends by Email

After logging in you will be redirected to the home screen.

home screen

You will see the friends you have on your home page. If you want to add more friends, you look them up using their gmails on the 'Add New Friends' button.

Add new Friends

Friend Requests

After you press add friend, you will send a friend request to that user. You will be given a pending sign when you see that user's friendObject.

pending

The user will be given a friend request notification on the home screen.

friendreq notif

When the friend request logo is pressed, you will see a friend requests dialog. It contains all users that have sent you a friend request.

friendreqdialog

After you have accepted the request, you can start chatting or get them invited into a group chat. If you decline, you will reset your friendStatus to the request sender back as a nonFriend.

Private Chatting

You can only private chat with friends, users that have accepted your request or requests you have accepted.

Group Chatting

You can create a new group and invite users to join the chat. Here, it is possible you can chat with those you have not yet added as friend. Other members are also automatically granted access to invite their friends.

addmemberstogroup

Send a Gif or File!

You may already know that you can send messages in the chatroom. But you can actually also send files and gifs in the chatroom. An example of sending a gif:

sendgifs

An example of sending files:

sendfiles