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.
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!
🖥️ Frontend | ⚙️ Build Tool | 🎨 Styling | 🌍 Environment | 🧹 Code Quality |
---|---|---|---|---|
React 18.3.1 | Vite 6.0.5 | CSS3 + Animations | Node.js | ESLint 9.17.0 |
✅ 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.
- Node.js (v14 or higher recommended)
- npm or yarn package manager
# 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
# 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.
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.
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.
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
🚀 Contributions are welcome! Follow these steps to contribute:
- Fork the repository
- Create a feature branch:
git checkout -b feature/AmazingFeature
- Commit your changes:
git commit -m 'Add some AmazingFeature'
- Push to the branch:
git push origin feature/AmazingFeature
- Open a Pull Request and let's collaborate! 🙌
This project is licensed under the MIT License – see the LICENSE file for details.
💙 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 ✨