https://github.com/keshavjha06/realtime-chat

A realtime chat app which uses Appwrite on the backend.
https://github.com/keshavjha06/realtime-chat

appwrite appwrite-auth react-feather react-router react-router-dom reactjs

Last synced: 8 days ago
JSON representation

A realtime chat app which uses Appwrite on the backend.

• Host: GitHub
• URL: https://github.com/keshavjha06/realtime-chat
• Owner: keshavjha06
• Created: 2023-12-23T14:29:47.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2023-12-23T15:58:00.000Z (11 months ago)
• Last Synced: 2024-11-11T19:16:04.829Z (8 days ago)
• Topics: appwrite, appwrite-auth, react-feather, react-router, react-router-dom, reactjs
• Language: JavaScript
• Homepage: https://realtime-chatting-app.vercel.app
• Size: 126 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Real Time Chat App With React JS and Appwrite

A chat app with real-time capabilities that utilizes Appwrite on the backend. 



### Getting Started

After cloning the repo ensure you complete the necessary installations

```

$ npm install

$ npm run dev

```

Create a new `.env` file and create the necessary variables based on the `src/appwriteConfig.js` file. Appwrite setup will be covered in the next step.

```js

//appwrite.Config.js

...

export const API_ENDPOINT = import.meta.env.VITE_API_ENDPOINT

export const PROJECT_ID = import.meta.env.VITE_PROJECT_ID

export const DATABASE_ID = import.meta.env.VITE_DATABASE_ID

export const COLLECTION_ID_MESSAGES = import.meta.env.VITE_COLLECTION_ID_MESSAGES

const client = new Client()

    .setEndpoint(API_ENDPOINT) 

    .setProject(PROJECT_ID);              

...

```

**Setting Up Appwrite Account**

Set up a local instance of Appwrite or create an account with Appwrite Cloud.

In your appwrite console create a project and database.

1. Create a collection called "messages" and add the following attributes:

    - user_id

    - username

    - body

2. From your `messages` collection, go to the "settings" --> "Update Permissions" --> "+ Add Role" and select "Any". Give this user type "Create", "Read", "Update" and "Delete" permissions.

Once you've set up your project you should be able to update all necessary env variables. 

Run your development server to view the output.