WhatsApp Web Clone

Overview

This project is a clone of the WhatsApp Web application. It features a chat interface where users can send and receive messages in real-time. The app leverages InstantDB for real-time message storage and retrieval, providing offline capabilities using local storage.

Features

• Fully responsive design
• Real-time messaging with InstantDB
• Offline capabilities with IndexedDB
• Persistent chat history
• User-friendly interface
• Real-time contact synchronization

Technologies Used

• React: For the user interface
• Context API: For state management
• InstantDB: Real-time database for data synchronization
• IndexedDB: Browser database for offline capabilities
• CSS Modules: For styling individual components.

Prerequisites

Ensure you have the following installed:

• Node.js
• npm (Node Package Manager)

Installation

1. Clone the repository and install the dependencies:

   • git clone https://github.com/your-username/whatsapp-web-clone.git

2. Navigate to the project directory

   • cd whatsapp-web-clone

3. Install dependencies

   • npm install

4. Start the development server

   • npm start

5. Open the app in your browser at http://localhost:3000.

Folder Structure

The project follows the following folder structure:

├── public
│   └── index.html
│
└── src
    ├── components/
    │   ├── ChatWindow.js
    │   ├── ChatWindow.css
    │   ├── ContactList.js
    │   ├── ContactList.css
    │   ├── Message.js
    │   ├── Message.css
    │   ├── MessageInput.js
    │   └── MessageInput.css
    |
    ├── context/
    │   ├── ChatContext.js
    │   └── ChatReducer.js
    |
    ├── hooks/
    │   ├── useInstantDB.js
    │   ├── useInstantDB.js
    │   └── useOfflineSync.css
    |
    ├── App.css
    ├── App.js
    ├── index.css
    └── index.js

• The public folder contains the HTML template file and other static assets.
• The src folder contains the application source code.
• The Components folder includes reusable components used in the application.
• The Pages folder contains the main page components.
• The App.js file is the entry point of the application.
• The index.js file is the root JavaScript file that renders the application.

Key Components

ChatWindow

• Displays the chat messages and the message input field. It fetches and displays messages for the selected contact.

ContactList

• Shows a list of contacts. Allows the user to select a contact to start chatting.

Message

• Displays individual chat messages. Differentiates between sent and received messages.

MessageInput

• Provides an input field for sending new messages.

useChat

• Custom hook for managing chat state using the Context API.

useIndexedDB

• Custom hook for storing and retrieving data from IndexedDB for offline capabilities.

useInstantDB

• Custom hook for real-time data synchronization with InstantDB.

ChatContext

• Manages the state of contacts and messages. Provides actions to add messages and set the selected contact.

How to Use

1. Opening the Application:
   • Once the development server is running, open your browser and navigate to http://localhost:3000. You should see the main interface of the WhatsApp Web Clone.
2. Selecting a Contact:
   • On the left side, you will see a list of contacts. Click on any contact to start a chat.
   • If no contacts are displayed, you can add new contacts (this functionality might need to be implemented based on your needs).
3. Chatting:
   • Once a contact is selected, the chat window for that contact will be displayed on the right.
   • You can type your message in the message input box at the bottom and click the send button to send the message.
   • Messages are saved in real-time using InstantDB and synchronized across multiple tabs.
4. Real-Time Updates:
   • Messages sent and received are updated in real-time. You can open another tab with the same application and see the messages synchronized instantly.
   • The application supports offline capabilities. If you go offline, messages will be stored in IndexedDB and sent once you are back online.

Dependencies

• React: ^18.x
• moment-timezone: ^0.5.x
• dotenv: ^16.x
• react-dom: ^19.x

Thank You