Skip to content

VincentMukuna/vchat

Repository files navigation

VChat Messenger

This is a feature-rich chat application built with React, Appwrite, Chakra UI and other modern technologies. The app allows users to engage in real-time messaging, create and manage group chats, update their profiles, and more.

Preview

VChat.preview.mp4

Screenshots

Screenshot 2023-11-14 001613

Screenshot 2023-11-14 001742

Features

  • Real-Time Messaging: Instant messaging with support for text, images, and voice messages.
  • Group Chats: Create and manage group conversations with multiple participants.
  • User Authentication: Secure registration and login functionality for user accounts (OAuth and Email)
  • Profile Customization: Personalize your profile with avatars, and more.
  • Multimedia Sharing: Share files, documents, and locations within the chat.

Getting Started

Prerequisites

  • Node.js and npm installed on your machine.

Running VChat

  1. Clone the repository:

    git clone https://github.com/VincentMukuna/vchat.git
    
  2. Change to the project directory:

    cd vchat
  3. Install dependencies:

    npm install
  4. Copy the .env.example file to .env:

    cp .env.example .env
  5. Install appwrite CLI:

    npm install -g appwrite-cli

Appwrite Setup

  1. Open the Appwrite Console and make a new project.

  2. Add a new web app platform you can name it anything e.g Web, enter your local IP address (or localhost) in the hostname field.

  3. Copy the API endpoint and project ID from the Appwrite project settings and replace them in the .env file.

  4. Replace projectId and projectName in appwrite.json with your project's

  5. Create a database and copy its name and id and replace it in appwrite.json.

  6. Login to appwrite from the cli

       appwrite login
  7. Deploy [UPDATE] You need to push the collections one by one in the following order: channels, group-messages, chat-messages, user-details, groups

       appwrite push collections
  8. Deploy buckets. Edit- Due to appwrite pricing changes you may have to deploy only one bucket then set all bucket config in src\lib\config.ts to your bucketId.

    If you are using the free plan you can delete the other buckets and deploy only one. Copy the bucketId and replace it in src\lib\config.ts for all buckets.

       appwrite push buckets
  9. Start the development server:

   npm run dev

License

This project is licensed under the MIT License.

Contact

For any questions or feedback, feel free to reach out at mukunavincent28@gmail.com.

About

A real-time chat application built using React and Appwrite

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •  

Languages