This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

A modern, responsive Progressive Web Application (PWA) built with React, TypeScript, and Vite. BitChat provides a clean, intuitive chat interface with PWA capabilities for offline usage and mobile installation.

• 🚀 PWA Support: Install as a native app on mobile and desktop
• 💬 Real-time Chat Interface: Modern chat UI with message timestamps
• 👤 User Profile Management: Customizable username with avatar
• 📱 Responsive Design: Works seamlessly on all devices
• ⚡ Fast Performance: Built with Vite for optimal development and production performance
• 🎨 Modern UI: Clean, gradient-based design with smooth animations
• 🔄 Auto-update: Service worker automatically updates the app

• React 18 - Modern React with hooks
• TypeScript - Type-safe development
• Vite - Fast build tool and development server
• PWA Plugin - Progressive Web App capabilities
• CSS3 - Modern styling with gradients and animations

• Node.js (version 16 or higher)
• npm or yarn

1. Clone the repository:

git clone <repository-url>
cd bitchatWeb

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser and navigate to http://localhost:5173

npm run build

The built files will be in the dist directory.

npm run preview

src/
├── components/
│   ├── ChatWindow.tsx      # Main chat interface
│   ├── ChatWindow.css      # Chat styles
│   ├── UserProfile.tsx     # User profile component
│   └── UserProfile.css     # Profile styles
├── App.tsx                 # Main application component
├── App.css                 # Application styles
├── index.css               # Global styles
└── main.tsx               # Application entry point

• Send and receive messages
• Message timestamps
• Responsive design for mobile and desktop
• Smooth animations and transitions

• Editable username
• Avatar generation based on username
• Local storage persistence

• Offline functionality
• App-like experience
• Mobile installation support
• Automatic updates

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

BitChat supports all modern browsers that support ES6+ and Service Workers:

• Chrome 60+
• Firefox 60+
• Safari 12+
• Edge 79+

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

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

• WebSocket integration for real-time messaging
• User authentication
• Message encryption
• File sharing capabilities
• Group chat support
• Push notifications

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])