/react-realtime-chatapp

Real Time Chat App in React with Appwrite

Primary LanguageJavaScript

React Chat App with Appwrite Integration

Overview

This repository contains a real-time chat application built using React, Vite, and Appwrite. With this app, users can seamlessly sign up, log in, and exchange messages in a chatroom in real-time. The integration with Appwrite provides a secure and scalable backend for user management and message storage, while Vite ensures a fast and efficient development environment.

Features

  • User Authentication: Allow users to sign up and log in securely.
  • Real-time Messaging: Enable users to send and receive messages instantly in a chatroom.
  • Appwrite Integration: Leverage Appwrite as the backend for user management and message storage.
  • Vite Development: Utilize Vite for a blazing-fast development experience with features like hot module replacement.
  • Responsive Design: Ensure a seamless experience across various devices.

Screenshots

Login Page Sign Up Page Chatroom Page

Technologies Used

  • React: A JavaScript library for building user interfaces.
  • Appwrite: An open-source backend server for building web and mobile apps.
  • Vite: A fast development environment for modern web projects.

Getting Started

  1. Clone the repository:
git clone https://github.com/bibekgurung9/react-realtime-chatapp
  1. Navigate to the project directory:
cd react-appwrite-chat
  1. Install dependencies:
npm install

  1. Configure Appwrite: i. Create an account on Appwrite. ii. Create a new project and note down the project ID. iii. Set up the Appwrite server and configure the API endpoint in the project.

  2. Configure the React app: Copy the .env.example file to .env and update the Appwrite-related variables.

  3. Start the development server:

npm run dev
  1. Open the app in your browser: http://localhost:5173

Configuration

In the .env file, you'll find the following variables that need to be configured:

REACT_APP_DATABASE_ID:your-database-id
REACT_APP_APPWRITE_ENDPOINT=https://your-appwrite-endpoint/api/v1
REACT_APP_PROJECT_ID=your-appwrite-project-id
REACT_APP_COLLECTION_MESSAGES_ID=your-appwrite-collection-id

Make sure to replace the placeholder values with your actual Appwrite endpoint, project ID, and collection ID.

Contributing

Contributions are welcome! Feel free to open issues or submit pull requests.

Acknowledgments

Thanks to '' for helping me learn and understand about the workings of this app. This project was inspired by the need for a simple and scalable chat application. Thanks to the creators and contributors of React and Appwrite for their amazing tools.

Happy chatting! 🚀