{"id":35169264,"url":"https://github.com/mtrong100/bro-coffee","last_synced_at":"2026-04-13T04:01:57.110Z","repository":{"id":330267923,"uuid":"1121772225","full_name":"mtrong100/bro-coffee","owner":"mtrong100","description":"Bro Coffee giúp bạn theo dõi lịch sử uống cà phê, chi tiêu, địa điểm và thói quen cá nhân. Dữ liệu đồng bộ trực tiếp từ Google Sheets.","archived":false,"fork":false,"pushed_at":"2025-12-25T02:49:26.000Z","size":2737,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-12-25T22:09:31.934Z","etag":null,"topics":["chatgpt","coffee-shop-website","deepseek","google-sheets","javascript","lucide-react","pwa-app","reactjs","recharts","tailwindcss","vibe-coder","vibe-coding","vite"],"latest_commit_sha":null,"homepage":"https://bro-coffee.vercel.app","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/mtrong100.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-12-23T14:27:22.000Z","updated_at":"2025-12-25T11:33:00.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/mtrong100/bro-coffee","commit_stats":null,"previous_names":["mtrong100/bro-coffee"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/mtrong100/bro-coffee","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mtrong100%2Fbro-coffee","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mtrong100%2Fbro-coffee/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mtrong100%2Fbro-coffee/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mtrong100%2Fbro-coffee/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mtrong100","download_url":"https://codeload.github.com/mtrong100/bro-coffee/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mtrong100%2Fbro-coffee/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28103398,"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-12-28T02:00:05.685Z","response_time":62,"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":["chatgpt","coffee-shop-website","deepseek","google-sheets","javascript","lucide-react","pwa-app","reactjs","recharts","tailwindcss","vibe-coder","vibe-coding","vite"],"created_at":"2025-12-28T20:02:31.847Z","updated_at":"2026-04-13T04:01:57.104Z","avatar_url":"https://github.com/mtrong100.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ☕ Bro Coffee\n\n**Bro Coffee** là ứng dụng web hiện đại giúp bạn **theo dõi lịch sử uống cà phê, chi tiêu, đánh giá quán cafe và phân tích thói quen cá nhân**. Dữ liệu được **đồng bộ trực tiếp từ Google Sheets**, hiển thị dưới dạng giao diện đẹp mắt với thống kê chi tiết và hỗ trợ PWA.\n\n---\n\n## 📸 Screenshot\n\n![Screenshot](./Screenshot.png)\n\n## ✨ Tính năng nổi bật\n\n### 📊 Trang chủ (Home)\n\n- **Thống kê tổng quan**: Tổng số bản ghi, tổng tiền đã chi, thời điểm cập nhật\n- **Hiển thị card hiện đại**: Mỗi lần uống cà phê được hiển thị với hình ảnh, thông tin chi tiết\n- **Bộ lọc thông minh**: Tìm kiếm theo quán, đồ uống, buổi (sáng/trưa/tối), tháng\n- **Phân trang mượt mà**: Dễ dàng điều hướng qua nhiều bản ghi\n- **Sắp xếp tự động**: Hiển thị các bản ghi mới nhất trước\n\n### 📈 Thống kê (Stats)\n\n- **Biểu đồ chi tiêu theo quý**: Phân tích xu hướng chi tiêu\n- **Thống kê theo tháng**: Xem chi tiết từng tháng\n- **Phân bổ theo buổi**: Sáng, trưa, hay tối uống nhiều nhất?\n- **Top quán cafe**: Những quán bạn ghé thăm nhiều nhất\n- **Top đồ uống**: Đồ uống yêu thích của bạn\n- **Phân tích theo khu vực**: Quán cafe ở đâu?\n- **Đánh giá quán**: Xem rating và phân loại quán cafe\n\n### 🗺️ Quán Cafe (Coffee Location)\n\n- **Danh sách quán cafe**: Tất cả quán đã ghé thăm\n- **Thông tin chi tiết**: Địa chỉ, khu vực, loại quán, rating\n- **Bộ lọc đa dạng**: Lọc theo khu vực, loại quán, rating\n- **Giao diện card đẹp mắt**: Hiển thị hình ảnh và thông tin rõ ràng\n\n### 🎨 Giao diện \u0026 Trải nghiệm\n\n- **Dark/Light mode**: Chuyển đổi theme mượt mà\n- **Responsive design**: Hoạt động tốt trên mọi thiết bị\n- **Mobile sidebar**: Menu sidebar hiện đại cho mobile\n- **PWA support**: Cài đặt như ứng dụng native\n- **Animations mượt**: Hover effects, transitions đẹp mắt\n- **Amber theme**: Màu chủ đạo ấm áp, phù hợp với cà phê\n\n---\n\n## 🚀 Tech Stack\n\n- **React 19** - UI Framework\n- **Vite** - Build tool \u0026 dev server\n- **Tailwind CSS 4** - Styling\n- **Lucide Icons** - Icon library\n- **React Router** - Navigation\n- **Recharts** - Data visualization\n- **Google Sheets** - Data source (CSV export)\n- **Vite PWA** - Progressive Web App\n\n---\n\n## 📁 Cấu trúc dự án\n\n```\nsrc/\n├── components/\n│   ├── CoffeeCard.jsx           # Card hiển thị coffee record\n│   ├── CoffeeLocationCard.jsx   # Card hiển thị quán cafe\n│   ├── DataTable.jsx            # Bảng dữ liệu với filter \u0026 pagination\n│   ├── Filters.jsx              # Bộ lọc tìm kiếm\n│   ├── Footer.jsx               # Footer component\n│   ├── Header.jsx               # Header với navigation \u0026 sidebar\n│   ├── Pagination.jsx           # Phân trang\n│   ├── StatCard.jsx             # Card thống kê\n│   ├── ThemeToggle.jsx          # Chuyển đổi dark/light mode\n│   ├── charts/                  # Các biểu đồ\n│   │   ├── AreaDistributionChart.jsx\n│   │   ├── CategoryChart.jsx\n│   │   ├── RatingDistributionChart.jsx\n│   │   └── TopRatedCoffeeChart.jsx\n│   └── stats/                   # Biểu đồ thống kê\n│       ├── MonthlySpendingChart.jsx\n│       ├── QuarterSpendingChart.jsx\n│       ├── SessionPieChart.jsx\n│       └── TopDrinkChart.jsx\n│\n├── pages/\n│   ├── Home.jsx                 # Trang chủ\n│   ├── Stats.jsx                # Trang thống kê\n│   ├── CoffeeLocation.jsx       # Trang quán cafe\n│   └── NotFound.jsx             # 404 page\n│\n├── hooks/\n│   ├── useCoffeeData.js         # Hook lấy dữ liệu coffee\n│   └── useCoffeeLocationData.js # Hook lấy dữ liệu quán cafe\n│\n├── utils/\n│   ├── format.js                # Format tiền, ngày tháng\n│   └── constants.js             # Hằng số\n│\n├── layouts/\n│   └── MainLayout.jsx           # Layout chính\n│\n├── context/\n│   └── ThemeContext.jsx         # Context quản lý theme\n│\n├── App.jsx                      # Main app component\n├── main.jsx                     # Entry point\n└── index.css                    # Global styles\n```\n\n---\n\n## 📊 Google Sheets Schema\n\n### Sheet 1: Coffee Records (Lịch sử uống cà phê)\n\n| Cột      | Mô tả                          | Ví dụ            |\n| -------- | ------------------------------ | ---------------- |\n| date     | Ngày uống (DD/MM/YYYY)         | 22/01/2026       |\n| time     | Thời gian (HH:MM)              | 14:30            |\n| session  | Buổi (Sáng/Trưa/Tối)           | Trưa             |\n| place    | Tên quán                       | The Coffee House |\n| drink    | Tên đồ uống (phân cách bằng ,) | Bạc xỉu, Bánh mì |\n| price    | Giá tiền                       | 45000            |\n| imageUrl | URL hình ảnh (optional)        | https://...      |\n\n### Sheet 2: Coffee Locations (Danh sách quán cafe)\n\n| Cột      | Mô tả                   | Ví dụ              |\n| -------- | ----------------------- | ------------------ |\n| name     | Tên quán                | The Coffee House   |\n| address  | Địa chỉ                 | 123 Nguyễn Huệ, Q1 |\n| area     | Khu vực                 | Quận 1             |\n| category | Loại quán               | Chain              |\n| rating   | Đánh giá (1-5)          | 4.5                |\n| imageUrl | URL hình ảnh (optional) | https://...        |\n\n📌 **Lưu ý**:\n\n- Sheet cần được **Publish to the web** (File → Share → Publish to web)\n- Chọn định dạng **CSV** khi publish\n- Đảm bảo tên cột chính xác như trên\n\n---\n\n## 🛠️ Cài đặt \u0026 Chạy\n\n### 1️⃣ Clone repository\n\n```bash\ngit clone https://github.com/mtrong100/bro-coffee.git\ncd bro-coffee\n```\n\n### 2️⃣ Cài đặt dependencies\n\n```bash\nnpm install\n```\n\n### 3️⃣ Cấu hình Google Sheets\n\nMở file `src/hooks/useCoffeeData.js` và `src/hooks/useCoffeeLocationData.js`, thay đổi:\n\n```javascript\nconst SHEET_ID = \"YOUR_SHEET_ID_HERE\";\nconst SHEET_NAME = \"Sheet1\"; // Tên sheet của bạn\n```\n\n**Cách lấy SHEET_ID:**\n\n- URL Google Sheets: `https://docs.google.com/spreadsheets/d/SHEET_ID_HERE/edit`\n- Copy phần `SHEET_ID_HERE`\n\n### 4️⃣ Chạy development server\n\n```bash\nnpm run dev\n```\n\nMở trình duyệt tại: `http://localhost:5173`\n\n### 5️⃣ Build production\n\n```bash\nnpm run build\n```\n\n### 6️⃣ Preview production build\n\n```bash\nnpm run preview\n```\n\n---\n\n## 🎨 Customization\n\n### Thay đổi màu chủ đạo\n\nMở `src/index.css` và chỉnh sửa các biến màu:\n\n```css\n/* Thay amber bằng màu khác */\nscrollbar-color: rgba(245, 158, 11, 0.45) transparent;\n```\n\n### Thay đổi số lượng items mỗi trang\n\nMở `src/components/DataTable.jsx`:\n\n```javascript\nconst perPage = 12; // Thay đổi số này\n```\n\n---\n\n## 📱 PWA Features\n\n- ✅ Offline support\n- ✅ Install as app\n- ✅ Cache Google Sheets data\n- ✅ Cache images\n- ✅ Auto update\n- ✅ Custom app icon (amber coffee cup)\n\n---\n\n## 🌟 Tính năng nổi bật\n\n### 🎯 Sắp xếp thông minh\n\nDữ liệu tự động sắp xếp theo ngày mới nhất, giúp bạn luôn thấy các bản ghi gần đây nhất.\n\n### 🎨 UI/UX hiện đại\n\n- Gradient backgrounds\n- Smooth animations\n- Hover effects\n- Loading skeletons\n- Responsive design\n\n### 📊 Thống kê chi tiết\n\n- Biểu đồ đa dạng (Line, Bar, Pie, Area)\n- Phân tích theo nhiều tiêu chí\n- Dữ liệu trực quan, dễ hiểu\n\n### 🔍 Tìm kiếm \u0026 Lọc mạnh mẽ\n\n- Tìm kiếm full-text\n- Lọc theo nhiều tiêu chí\n- Kết hợp nhiều filter\n- Clear filters nhanh chóng\n\n---\n\n## 🤝 Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n---\n\n## 📄 License\n\nMIT License - feel free to use this project for personal or commercial purposes.\n\n---\n\n## 🙏 Credits\n\n- Icons: [Lucide Icons](https://lucide.dev/)\n- Charts: [Recharts](https://recharts.org/)\n- Framework: [React](https://react.dev/)\n- Build Tool: [Vite](https://vitejs.dev/)\n- Styling: [Tailwind CSS](https://tailwindcss.com/)\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n**Made with ☕ \u0026 ❤️**\n\n[⭐ Star this repo](https://github.com/mtrong100/bro-coffee) if you find it useful!\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmtrong100%2Fbro-coffee","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmtrong100%2Fbro-coffee","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmtrong100%2Fbro-coffee/lists"}