Skip to content

charull44/REACT-Chat-UI

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

💬 Chat SPA (Single Page Chat Application)

A modern Chat UI built using React, HTML, CSS, and JSX with a sleek messaging interface inspired by apps like WhatsApp & Telegram.


🚀 Live Demo

👉 4-sem-charul-mdm-ta-1.vercel.app


📌 Features

✔ Real-time style chat UI ✔ Left sidebar with chat list ✔ Right chat screen with messages ✔ Auto-scroll (unlimited messages) ✔ Emoji support 😊 ✔ Auto-reply bot 🤖 ✔ Clean responsive design ✔ Works on mobile + desktop


🛠 Tech Stack

  • React (Vite)
  • HTML5
  • CSS3
  • JavaScript (ES6)

📂 Project Structure

chat-spa/
│── src/
│   │── components/
│   │   ├── ChatList.jsx
│   │   ├── ChatWindow.jsx
│   │   ├── Message.jsx
│   │   ├── EmojiPicker.jsx
│   │
│   │── App.jsx
│   │── main.jsx
│   │── styles.css
│
│── index.html
│── package.json
│── vite.config.js
│── README.md

🌐 Deployment

This project is deployed using Vercel.

To deploy:

  1. Upload project to GitHub
  2. Connect GitHub to Vercel
  3. Click Deploy

✨ Future Improvements

  • 🔥 Firebase real-time chat
  • 🔐 Google Authentication
  • 📷 Image sending
  • 🟢 Online/Offline status
  • ✍ Typing indicator
  • 📱 Convert to Android APK

Author

Charul Bhanarkar


⭐ Support

If you like this project, give it a ⭐ on GitHub!


About

React Chat SPA – A modern single-page chat application built using React JS featuring responsive UI components, real-time style messaging interface, reusable components, and smooth user interaction design.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors