WeChat - Chat Application

Demo

Check out the live demo: https://we-chat-sinisterdaddys-projects.vercel.app/

Getting Started

Prerequisites

- Node.js and npm installed

- Stream API Key

- Twilio Account SID and Auth Token

- Vercel Account (for deployment)

Installation

1. Clone the repository

git clone https://github.com/your-username/wechat-chat-app.git
    cd wechat-chat-app

2. Install dependencies

cd frontend
    npm install
    cd ../backend
    npm install

3. Configure environment variables

<!-- Create a .env file in the backend directory and set the following variables -->
    STREAM_API_KEY=your_stream_api_key
    TWILIO_ACCOUNT_SID=your_twilio_account_sid
    TWILIO_AUTH_TOKEN=your_twilio_auth_token

Features

- User Authentication (Sign Up, Login, Logout)

- Real-time Chat Functionality

- WeChat-Inspired UI

- Customizable Channel Creation and Editing

- SMS Notifications using Twilio

- Channel Searching and Filtering

- Context API for State Management

- Responsive Design

Project Structure

- frontend: React application for the user interface.

- backend: Express.js server for handling authentication, chat functionality, and Twilio integration.

- docs: Documentation files, including this README.

Frontend

User Interface

The application provides a WeChat-inspired user interface with components for authentication, chat channels, and user interactions.

Authentication

The authentication form includes fields for username, phone number, avatar URL, password, and confirm password. The user's full name is retrieved from the database to ensure accuracy.

Chat Components

- Chat Feed: Displays messages in real-time.

- Sidebar and Header: Navigation components for easy channel and user switching.

- Channel Creation and Editing: Components for creating new channels and editing existing ones.

Backend

Express Server

The backend server is built with Express.js and includes routes for user authentication, chat functionality, and Twilio webhook integration.

User Authentication

The server handles user sign-up and login requests, connecting to a database to query existing users, decrypt and compare passwords, and create authentication tokens.

Chat Functionality

- Channel Management: Create, edit, and switch between channels.

- User Search: Implement search functionality to find users within channels.

- Context API: Utilize the Context API for better prop management.

Twilio Integration

A webhook is set up to receive new messages and send SMS notifications to offline users via Twilio. Twilio credentials are securely stored in environment variables.

Deployment

Backend Deployment

The backend is deployed to Heroku using the Heroku CLI. The deployed backend URL is connected to both the Stream and frontend code.

Frontend Deployment

The frontend is deployed to Vercel. Update the API endpoints in the code to reflect the deployed backend URL.

Connect Backend and Frontend

Ensure that the backend URL is added to the Stream chat settings for webhook integration and included in the frontend code for authentication.

Contributing

Contributions are welcome! Fork the repository, create a new branch, make your enhancements, and submit a pull request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

sinisterdaddy/WeChat