DEV Community

Ajat Darojat
Ajat Darojat

Posted on

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

Top comments (1)

Collapse
 
haimantika profile image
haimantika mitra • Edited

This looks amazing! 🤩

P.S: We have a lot of interesting things happening in our Appwrite discord, we would love to see you there!

discord.gg/KKZprAnX