February, 2024

Chat App

This is a simple chat application designed as a learning project to implement real-time interaction features between logged-in users.

See Demo

See Repository

Short Explanation

This application is designed to make it easy for users to communicate in real-time. Every logged-in user can send messages directly to each other without needing to refresh the page.

Main features available:

User registration and login
Real-time chat between logged-in users
Instant message notifications
List of online users
Responsive and user-friendly UI

Project Goals

Implement real-time communication concepts using SocketIO.
Understand integration between backend (Express, Sequelize) and frontend (React).
Enhance user experience with interactive notifications and UI.
Learn to manage global state using Context in React.

Tech Stack

Server: Express, SocketIO, Sequelize
Client: React, Context, SocketIO Client, Sweetalert2, Tailwind

Screenshots

Chat Room

Lesson Learned

In developing this project, I learned the importance of state management in React applications, especially when handling user authentication and real-time data. Using SocketIO was very helpful in implementing direct two-way communication.

Additionally, I gained experience in designing responsive and user-friendly UIs, as well as efficient integration between backend and frontend.