{"id":31574003,"url":"https://github.com/peter-sour/clavox.ui","last_synced_at":"2025-10-29T15:17:51.482Z","repository":{"id":314623120,"uuid":"1056189499","full_name":"Peter-sour/Clavox.UI","owner":"Peter-sour","description":"Modern real-time chat application frontend built with React, Vite, and Tailwind CSS. Mobile-ready with Ionic and Capacitor integration.","archived":false,"fork":false,"pushed_at":"2025-09-28T10:51:33.000Z","size":2910,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-28T12:37:40.181Z","etag":null,"topics":["capasitor","chat-app","ionic","react","real-time","responsive-design","socket-io","tailwindcss"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Peter-sour.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-13T15:18:57.000Z","updated_at":"2025-09-28T10:51:37.000Z","dependencies_parsed_at":"2025-09-13T17:50:35.945Z","dependency_job_id":"7b575466-c659-456b-b303-d42bad65d67e","html_url":"https://github.com/Peter-sour/Clavox.UI","commit_stats":null,"previous_names":["peter-sour/clavox.ui"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Peter-sour/Clavox.UI","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Peter-sour%2FClavox.UI","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Peter-sour%2FClavox.UI/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Peter-sour%2FClavox.UI/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Peter-sour%2FClavox.UI/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Peter-sour","download_url":"https://codeload.github.com/Peter-sour/Clavox.UI/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Peter-sour%2FClavox.UI/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278477819,"owners_count":25993540,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-05T02:00:06.059Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["capasitor","chat-app","ionic","react","real-time","responsive-design","socket-io","tailwindcss"],"created_at":"2025-10-05T15:39:52.053Z","updated_at":"2025-10-05T15:39:53.442Z","avatar_url":"https://github.com/Peter-sour.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Clavox Frontend 💬🎨\n\n![React](https://img.shields.io/badge/React-20232A?style=for-the-badge\u0026logo=react\u0026logoColor=61DAFB)\n![Vite](https://img.shields.io/badge/Vite-646CFF?style=for-the-badge\u0026logo=vite\u0026logoColor=white)\n![TailwindCSS](https://img.shields.io/badge/TailwindCSS-38B2AC?style=for-the-badge\u0026logo=tailwind-css\u0026logoColor=white)\n![Ionic](https://img.shields.io/badge/Ionic-3880FF?style=for-the-badge\u0026logo=ionic\u0026logoColor=white)\n![Capacitor](https://img.shields.io/badge/Capacitor-119EFF?style=for-the-badge\u0026logo=capacitor\u0026logoColor=white)\n\nFrontend aplikasi chat real-time **Clavox** yang dibangun dengan **React + Vite + Tailwind CSS**. Terintegrasi dengan **Ionic + Capacitor** untuk deployment ke **mobile app (Android/iOS)**.\n\n\u003e **Note**: Ini adalah repository frontend. Backend API tersedia di [Clavox Backend](link-ke-backend-repo)\n\n---\n\n## ✨ Fitur Frontend\n\n- 🎨 **Modern UI/UX** dengan Tailwind CSS\n- 📱 **Responsive Design** - Mobile First\n- ⚡ **Fast Development** dengan Vite Hot Reload\n- 🔐 **Phone Authentication** dengan OTP Input\n- 💬 **Real-time Chat Interface** \n- 📱 **Mobile App Ready** - Ionic + Capacitor\n- 🌙 **Dark Mode Support** (Coming Soon)\n- 🔄 **Socket.IO Integration** untuk real-time messaging\n\n---\n\n## 📂 Struktur Frontend\n\n```\nclavox-frontend/\n├── public/\n│   ├── index.html\n│   └── assets/\n├── src/\n│   ├── components/           # Komponen UI\n│   │   ├── Auth/\n│   │   ├── Chat/\n│   │   └── Common/\n│   ├── pages/               # Halaman utama\n│   │   ├── Login.jsx\n│   │   ├── Chat.jsx\n│   │   └── Profile.jsx\n│   ├── hooks/               # Custom hooks\n│   ├── services/            # API \u0026 Socket services\n│   ├── utils/               # Helper functions\n│   ├── styles/              # Global styles\n│   ├── App.jsx\n│   └── main.jsx\n├── capacitor.config.ts      # Konfigurasi Capacitor\n├── ionic.config.json        # Konfigurasi Ionic\n├── tailwind.config.js       # Konfigurasi Tailwind\n├── vite.config.js          # Konfigurasi Vite\n└── package.json\n```\n\n---\n\n## 🚀 Quick Start\n\n### Prerequisites\n\n- Node.js (v16+)\n- npm atau yarn\n- Android Studio (untuk Android build)\n- Xcode (untuk iOS build - Mac only)\n\n### 1. Clone Repository\n\n```bash\ngit clone https://github.com/Peter-sour/clavox-frontend.git\ncd clavox-frontend\n```\n\n### 2. Install Dependencies\n\n```bash\n# Core dependencies\nnpm install\n\n# React Router\nnpm install react-router-dom\n\n# Phone number input\nnpm install react-phone-number-input libphonenumber-js --legacy-peer-deps\n\n# OTP input\nnpm install react-otp-input\n\n# Ionic \u0026 Capacitor\nnpm install @ionic/react @ionic/react-router ionicons\nnpm install @capacitor/core\nnpm install --save-dev @capacitor/cli\n\n# Socket.IO client\nnpm install socket.io-client\n```\n\n### 3. Environment Setup\n\nBuat file `.env` di root project:\n\n```env\nVITE_API_BASE_URL=http://localhost:5000\nVITE_SOCKET_URL=http://localhost:5000\n```\n\n### 4. Development Server\n\n```bash\nnpm run dev\n```\n\nAplikasi akan berjalan di `http://localhost:5173`\n\n---\n\n## 📱 Mobile Development\n\n### Setup Capacitor\n\n```bash\n# Inisialisasi Capacitor\nnpx cap init\n\n# Build web assets\nnpm run build\n\n# Sync dengan native platforms\nnpx cap sync\n```\n\n### Add Mobile Platforms\n\n```bash\n# Add Android\nnpx cap add android\n\n# Add iOS (Mac only)\nnpx cap add ios\n```\n\n### Build \u0026 Run Mobile App\n\n```bash\n# Build untuk production\nnpm run build\n\n# Sync assets ke native\nnpx cap sync\n\n# Open di Android Studio\nnpx cap open android\n\n# Open di Xcode (Mac only)  \nnpx cap open ios\n```\n\n---\n\n## 🧑‍💻 Available Scripts\n\n```bash\nnpm run dev          # Development server\nnpm run build        # Production build\nnpm run preview      # Preview production build\nnpm run lint         # ESLint check\nnpm run lint:fix     # Fix ESLint issues\n```\n\n---\n\n## 🔧 Konfigurasi\n\n### Tailwind Config\n\n```javascript\n// tailwind.config.js\nmodule.exports = {\n  content: [\n    \"./index.html\",\n    \"./src/**/*.{js,ts,jsx,tsx}\",\n  ],\n  theme: {\n    extend: {\n      colors: {\n        primary: {\n          50: '#eff6ff',\n          500: '#3b82f6',\n          600: '#2563eb',\n        }\n      }\n    },\n  },\n  plugins: [],\n}\n```\n\n### Vite Config\n\n```javascript\n// vite.config.js\nimport { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\n\nexport default defineConfig({\n  plugins: [react()],\n  server: {\n    port: 5173,\n    host: true\n  }\n})\n```\n\n---\n\n## 🌐 API Integration\n\n### Socket.IO Setup\n\n```javascript\n// src/services/socket.js\nimport io from 'socket.io-client';\n\nconst socket = io(import.meta.env.VITE_SOCKET_URL);\n\nexport default socket;\n```\n\n### API Service\n\n```javascript\n// src/services/api.js\nconst API_BASE_URL = import.meta.env.VITE_API_BASE_URL;\n\nexport const apiService = {\n  async sendOTP(phoneNumber) {\n    // API call logic\n  },\n  \n  async verifyOTP(phoneNumber, otp) {\n    // API verification logic  \n  }\n};\n```\n\n---\n\n## 📱 Mobile Features\n\n### Push Notifications\n\n```bash\nnpm install @capacitor/push-notifications\n```\n\n### Native Device Access\n\n```bash\nnpm install @capacitor/camera\nnpm install @capacitor/filesystem\nnpm install @capacitor/haptics\n```\n\n---\n\n## 🎨 UI Components\n\n### Reusable Components\n\n- `Button` - Custom button dengan variants\n- `Input` - Input field dengan validation\n- `Modal` - Modal component\n- `ChatBubble` - Chat message bubble\n- `PhoneInput` - Phone number input\n- `OTPInput` - OTP verification input\n\n---\n\n## 📌 Roadmap Frontend\n\n- [ ] Dark Mode Implementation\n- [ ] Push Notification UI\n- [ ] Chat Encryption Indicator\n- [ ] File Upload Interface\n- [ ] Voice Message Recording\n- [ ] Chat Export Feature\n- [ ] Multiple Theme Support\n- [ ] PWA Implementation\n\n---\n\n## 🐛 Troubleshooting\n\n### Common Issues\n\n1. **Build Error**: Pastikan semua dependencies terinstall dengan benar\n2. **Socket Connection**: Periksa VITE_SOCKET_URL di file .env\n3. **Mobile Build**: Pastikan Android Studio/Xcode sudah terinstall\n4. **Phone Input**: Gunakan flag `--legacy-peer-deps` jika ada conflict\n\n### Debug Mode\n\n```bash\n# Enable debug untuk Socket.IO\nlocalStorage.debug = 'socket.io-client:socket';\n```\n\n---\n\n## 🤝 Contributing\n\n1. Fork repository ini\n2. Buat feature branch (`git checkout -b feature/AmazingFeature`)\n3. Commit changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push ke branch (`git push origin feature/AmazingFeature`)\n5. Buka Pull Request\n\n---\n\n## 📜 License\n\nDistributed under the MIT License. See `LICENSE` for more information.\n\n---\n\n## 🙏 Acknowledgments\n\n- [React](https://reactjs.org/) - UI Library\n- [Vite](https://vitejs.dev/) - Build Tool  \n- [Tailwind CSS](https://tailwindcss.com/) - CSS Framework\n- [Ionic](https://ionicframework.com/) - Mobile UI Components\n- [Capacitor](https://capacitorjs.com/) - Native Mobile Runtime\n\n---\n\n## 💡 Support\n\nJika project ini membantu, jangan lupa beri ⭐ di repo ini!\n\n**Link Repository:**\n- Frontend: [Clavox Frontend](https://github.com/Peter-sour/clavox-frontend)\n- Backend: [Clavox Backend](https://github.com/Peter-sour/clavox-backend)\n\n---\n\n**Made with ❤️ by [Peter-sour](https://github.com/Peter-sour)**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeter-sour%2Fclavox.ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpeter-sour%2Fclavox.ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeter-sour%2Fclavox.ui/lists"}