CAPP - Realtime Chat App

ajatdarojat45

Ajat Darojat

Posted on April 25, 2022

CAPP - Realtime Chat App

Overview of My Submission

CAPP App is a web based realtime chat application. It has some features like realtime chat, add friend, search people, search chat, protected route, and login using google account.

This application is built using React.js for the frontend library, Boostrap for the CSS framework, Appwrite for data storage, authentication and realtime features and express.js for custom servers as needed.

The inspiration behind the making of this application is whatsapp so that it looks similar to whatsapp.

Submission Category:

Wacky Wildcards

Link to Code

CAPP - Realtime Chat App

CAPP App is a web based realtime chat application. It has some features like realtime chat, add friend, search people, search chat, protected route, and login using google account.

This application is built using React.js for the frontend, Boostrap for the CSS framework, Appwrite for data storage and realtime features and express.js for custom servers as needed.

The inspiration behind the making of this application is whatsapp so that it looks similar to whatsapp.

Installation and Setup

Appwrite

  1. Install & running AppWrite on your machine. You can follow this instruction

  2. Create Appwrite Project

  3. Create API keys

  4. Create Database collection chats and friends with following attributes

friends:
  userId: String,
  friendId: String,
  createdAt: String


chats:
  userIds: [String]
  userId: String,
  text: String,
  createdAt: String
  1. Create indexes for chats and friends collections
friends
  Index Key: userId
  type: fulltext
  attributes: userId (ASC)

chats:
  Index Key: userIds
  type: fulltext
  attributes: userIds
…

Additional Resources / Info

Screenshots

Login Page
Login Page

Home Page
Home Page

Find People
Find People

Chat Room
Chat Room

Project Contributor

Ajat Darojat: https://github.com/ajatdarojat45

πŸ’– πŸ’ͺ πŸ™… 🚩
ajatdarojat45
Ajat Darojat

Posted on April 25, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related