https://github.com/josephcagle/Chatwrite

A simple React-based chat app demo for Appwrite
https://github.com/josephcagle/Chatwrite

appwrite chat-application hacktoberfest

Last synced: 2 months ago
JSON representation

A simple React-based chat app demo for Appwrite

• Host: GitHub
• URL: https://github.com/josephcagle/Chatwrite
• Owner: josephcagle
• Created: 2021-10-17T22:07:07.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T22:07:23.000Z (about 2 years ago)
• Last Synced: 2024-08-11T16:09:06.860Z (5 months ago)
• Topics: appwrite, chat-application, hacktoberfest
• Language: TypeScript
• Homepage:
• Size: 1.2 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 6
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-appwrite - Source Code

README

        

# Chatwrite

A simple React-based chat app demo for Appwrite

This is a simple instant message chat app with persistent message storage. Users

are able to send messages without having to make accounts. Just pick a name and

join a room.

## Screenshots

![Menu screenshot](screenshot1.png)

![Chat room screenshot](screenshot2.png)

## Running Chatwrite

1. Install Appwrite (https://appwrite.io/docs/installation)

2. Open the Appwrite console and make a new project.

3. Scroll to the bottom of the dashboard and add a new web app platform, typing

   in your local IP address (not `localhost`).

4. Click on "Database" and make a new collection called "chatMessages" (or

   something similar).

5. Go to the collection's settings and add these rules (with data types):

     - roomName (text)

     - sender (text)

     - messageData (text)

     - timestamp (numeric)

   For each rule, put "`*`" (wildcard) in both the read and write permissions

   list.

6. Clone this repo, `cd` into it, and run `npm i` to install dependencies

7. Edit `config.js` to include the relevant project's API endpoint and ID and

   the messages collection's ID.

8. Run `npm start` to build the web app and start the web server (on port 80 --

   be sure to check your computer's firewall if it doesn't work).

### Troubleshooting

 - (As mentioned before) Your computer's firewall may block incoming connections

   to some or all network ports. Check your firewall settings if necessary.

 - To work around a CORS issue, make sure you are accessing the web app on the

   same host name as the one entered as the `apiEndpoint` in `config.js`.

 - If something is still broken, make an issue on this GitHub repo and I'll see

   if I can fix it.

## How it works

 - A user picks a name, types in a room name, joins the room and starts sending

   messages.

 - In the database, each message is stored as a document in a collection. All

   messages, across all rooms, are stored in the same collection.  

 - When the user sends a message, the client app sends a request to the server,

   which creates a document that has these fields:

   - `roomName` - the room name the user typed in

   - `sender` - the name the user typed in

   - `messageData` - the message the user sent

   - `timestamp` - unix ms timestamp

 - When a user joins a room, the client queries the server for all messages with

   the matching `roomName` field. Additionally, the client subscribes to updates

   to get other such messages.

## To do

 - When the user leaves a room, the username and room name they previously typed

   in should be kept in the input form.

 - Trigger the CORS dialog as soon as CORS errors are detected, instead of only

   when "Start Chatting" is clicked