Whatsapp Clone React

Short Description

In this project, I have developed a chat application that mimics the WhatsApp Web workflow, featuring real-time messaging and a membership system.

Problem

In real-time chat applications, components such as login, user list, message stream, and profile editing can easily become scattered. This project focuses on consolidating this core communication flow into a single structure.

Solution

I have built the application using React, TypeScript, Firebase, and Redux Toolkit. Message and user states are managed within messageSlice and userSlice respectively, and the interface is divided into left and right panel structures. The membership system, message sending, listing all users, and updating name, avatar, and status information are all integrated within the same application.

Outcome

The result is a chat application with a clear workflow that imitates the desktop messaging experience. The project showcases real-time data flow, authentication, centralized state management, and a TypeScript-based React architecture in unison.

Technologies

React, TypeScript, Firebase, Firestore, Redux Toolkit, React Redux, Tailwind CSS, Vite, React Toastify, Reactstrap, React Icons, Validator

Setup