Skip to content

This is a web application built with React, Vite, and CSS. It simulates two phones, each containing multiple user profiles. Users can send real-time messages to any other profile of their choice. Everything runs locally, ensuring a fast and private experience.

Notifications You must be signed in to change notification settings

michel-DC/chat-app

Repository files navigation

💬 React Chat Application 💬

A sleek, modern, and real-time chat application built with React and Vite. Experience instant messaging between multiple users with an immersive dual-phone simulator interface.

Chat Application Screenshot


🚀 Overview

The React Chat Application simulates real-time conversations with up to 5 users simultaneously. Built with React 18.3.1 and Vite 6.0.5, it offers a responsive, mobile-first UI, smooth animations, and user-specific color themes for easy identification.

✨ Experience seamless chats with dual-phone views and instant message updates!


🛠️ Technical Stack

🖥️ Frontend ⚙️ Build Tool 🎨 Styling 🌍 Environment 🧹 Code Quality
React 18.3.1 Vite 6.0.5 CSS3 + Animations Node.js ESLint 9.17.0

✨ Features

Multi-User Support: Chat with up to 5 unique users, each with personalized colors.
Dual Interface: Simultaneously test conversations with two phone simulators.
Real-Time Updates: Messages appear instantly between users.
Responsive Design: Optimized for all devices with a mobile-first approach.
Dynamic User Switching: Select different senders and recipients easily.
Custom Animations: Smooth message bubble transitions and hover effects.
Cross-Browser Compatibility: Works seamlessly across modern browsers.


🚀 Getting Started

🧩 Prerequisites

  • Node.js (v14 or higher recommended)
  • npm or yarn package manager

📥 Installation

# Clone the repository
git clone https://github.com/michel-dc/chat-app-main-v2.git

# Navigate into the project directory
cd chat-app-main-v2

# Install dependencies
npm install

🔥 Running the Application

# Start the development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Run ESLint for code quality checks
npm run lint

🚀 Your app will be running at: http://localhost:5173
🛡️ Tip: Use the preview build to test production optimizations.


🎨 Styling

The application uses modern CSS techniques for a polished look:

  • 🎨 CSS Custom Properties: Easily manage theme colors.
  • 📐 Flexbox Layout: Ensures fluid and responsive designs.
  • Custom Animations: Engaging message transitions and hover effects.
  • 📱 Mobile-First Design: Perfect usability on phones and tablets.
  • 🖱️ Custom Scrollbars: Enhanced scrolling experience.
  • 🕶️ Shadow Effects: Adds depth and visual appeal.

📂 Project Structure

chat-app-main-v2/
├── public/
├── src/
│   ├── components/
│   │   ├── ChatWindow/
│   │   ├── PhoneSimulator/
│   │   └── MessageBubble/
│   ├── context/
│   ├── styles/
│   ├── App.jsx
│   └── main.jsx
├── package.json
└── .eslintrc.json

📢 Modular structure ensures clean, maintainable code and easy scalability.


🧹 Code Quality & Linting

This project uses ESLint with custom rules:

✅ React and React Hooks best practices
✅ Enforces clean code standards
✅ Warns against common pitfalls and errors

# Run lint checks
npm run lint

🤝 Contributing

🚀 Contributions are welcome! Follow these steps to contribute:

  1. Fork the repository
  2. Create a feature branch:
    git checkout -b feature/AmazingFeature
  3. Commit your changes:
    git commit -m 'Add some AmazingFeature'
  4. Push to the branch:
    git push origin feature/AmazingFeature
  5. Open a Pull Request and let's collaborate! 🙌

📝 License

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


🙏 Acknowledgments

💙 Thanks to the amazing open-source community and the following tools:

  • React – Frontend framework
  • Vite – Fast build tool
  • ESLint – Code quality enforcer
  • CSS Tricks – For styling inspiration

✨ Made with ❤️ by Michel ✨

About

This is a web application built with React, Vite, and CSS. It simulates two phones, each containing multiple user profiles. Users can send real-time messages to any other profile of their choice. Everything runs locally, ensuring a fast and private experience.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published