SyncHub Frontend is a sleek, modern, and responsive chat application built with React and real-time communication capabilities. It provides an intuitive user interface for instant messaging with beautiful animations and a seamless user experience.
- 💬 Real-time Messaging - Instant message delivery with Socket.io
- 🎨 Modern UI/UX - Beautiful interface built with Tailwind CSS
- 🔐 Secure Authentication - JWT-based user authentication
- 👥 Online Status - See who's online in real-time
- ✍️ Typing Indicators - Know when someone is typing
- 💅 Responsive Design - Works perfectly on all devices
- ⚡ Fast Performance - Built with Vite for lightning-fast development
- 🎭 Smooth Animations - Engaging user experience with animations
- 📱 Mobile Friendly - Optimized for mobile devices
| Technology | Purpose |
|---|---|
| React 19 | UI library for building user interfaces |
| Vite | Next-generation frontend tooling |
| Tailwind CSS 4 | Utility-first CSS framework |
| Socket.io Client | Real-time bidirectional communication |
| Axios | HTTP client for API requests |
| React Router DOM | Client-side routing |
| ESLint | Code linting and quality |
- Node.js (v14 or higher)
- npm or yarn package manager
- Backend server running (see backend repo)
-
Clone the repository
git clone https://github.com/Shriii19/synchub-frontend.git cd synchub-frontend -
Install dependencies
npm install
-
Configure API endpoint
Update the backend URL in the Socket.io connection and axios requests if needed:
- Default:
http://localhost:5000
- Default:
-
Start the development server
npm run dev
-
Build for production
npm run build
-
Preview production build
npm run preview
The application will be available at http://localhost:5173
frontend/
├── public/
│ └── vite.svg # Vite logo
├── src/
│ ├── assets/ # Static assets
│ │ └── react.svg
│ ├── pages/
│ │ ├── Login.jsx # Login/Register page
│ │ └── Chat.jsx # Main chat interface
│ ├── App.jsx # Main app component with routing
│ ├── App.css # App-specific styles
│ ├── index.css # Global styles with Tailwind
│ └── main.jsx # Application entry point
├── index.html # HTML template
├── vite.config.js # Vite configuration
├── eslint.config.js # ESLint configuration
├── package.json # Dependencies and scripts
└── .gitignore # Git ignore rules
- User registration with email validation
- Secure login with JWT tokens
- Persistent sessions with localStorage
- Token-based API authentication
- Real-time message sending and receiving
- Message history loading
- Auto-scrolling to latest messages
- Typing indicators
- Online user count
- Message timestamps
- User identification
- Smooth scrolling animations
- Loading states
- Error handling
- Responsive layout
- Clean and intuitive design
- Emoji and text support
| Command | Description |
|---|---|
npm run dev |
Start development server with hot reload |
npm run build |
Build for production |
npm run preview |
Preview production build locally |
npm run lint |
Run ESLint for code quality |
The project uses Vite for fast development and optimized builds. Configuration can be modified in vite.config.js.
Tailwind is configured with the @tailwindcss/vite plugin for instant updates and modern CSS features.
Code quality is maintained with ESLint and React-specific rules.
- 🎨 Themes - Dark/Light mode toggle
- 🎵 Sound Effects - Notification sounds for new messages
- 😊 Emoji Picker - Built-in emoji selector
- 📝 Message Formatting - Markdown support for rich text
- 🖼️ User Avatars - Profile picture uploads and display
- 📎 File Sharing - Drag-and-drop file uploads with preview
- 🔍 Message Search - Search through chat history
- 📌 Pin Messages - Pin important messages at the top
- ✏️ Edit Messages - Edit sent messages
- 🗑️ Delete Messages - Delete own messages
- ↩️ Reply to Messages - Thread-like message replies
- 🎭 Reactions - React to messages with emojis
- 🚪 Multiple Rooms - Create and join different chat rooms
- 🔒 Private Rooms - Password-protected rooms
- 👥 Direct Messages - One-on-one conversations
- 📊 Room Info - View room members and settings
- 🎯 Mentions - @mention specific users
- 📹 Video Calls - WebRTC video/audio calling
- 🎤 Voice Messages - Record and send voice clips
- 📺 Screen Sharing - Share screen in calls
- 🔔 Push Notifications - Browser notifications for messages
- 📍 Location Sharing - Share location in chat
- 👤 User Profiles - Detailed user profile pages
- 🌐 Status Updates - Custom status messages
- 🔔 Notification Center - Centralized notification panel
- 🏆 User Badges - Achievement badges
- 📈 Activity Tracking - User activity insights
- ♿ Accessibility - WCAG compliance for all users
- 🌍 Internationalization - Multi-language support
- 💾 Offline Support - PWA capabilities with service workers
- 🔄 Message Sync - Cross-device message synchronization
- 🎮 Keyboard Shortcuts - Power user keyboard navigation
- 📱 Mobile App - React Native mobile version
- 👔 Admin Dashboard - Comprehensive admin controls
- 📊 Analytics - User engagement analytics
- 🔐 SSO Integration - Single sign-on support
- 📝 Audit Logs - Activity logging and monitoring
- 🔗 API Documentation - Interactive API explorer
- 🤖 Chatbot Integration - Automated chat assistance
- ⚡ Lightning-fast build times with Vite
- 📦 Code splitting for optimal bundle size
- 🔄 Lazy loading of components
- 🗜️ Asset optimization and compression
- 🚀 React 19 performance improvements
- 💨 TailwindCSS JIT for minimal CSS
The application is fully responsive and optimized for:
- 📱 Mobile devices (320px and up)
- 📱 Tablets (768px and up)
- 💻 Laptops (1024px and up)
- 🖥️ Desktops (1280px and up)
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the project
- Create your 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
This project is licensed under the MIT License.
Project Link: https://github.com/Shriii19/synchub-frontend
Backend Repository: https://github.com/Shriii19/synchub-backend
Made with ❤️ by the SyncHub Team
⭐ Star us on GitHub — it motivates us a lot!