📸 Locket Dio

Ứng dụng web hiện đại dành cho cộng đồng Locket Widget - Chia sẻ ảnh và video ngay lập tức từ trình duyệt

🌐 Demo Trực Tiếp | 📱 Repo Frontend | 💬 Telegram | 📖 Tài Liệu

📋 Mục Lục

✨ Tính Năng
🚀 Demo
🛠️ Cài Đặt
⚙️ Cấu Hình
🏗️ Công Nghệ
📁 Cấu Trúc Dự Án
🔧 Tham Khảo API
🤝 Đóng Góp
👥 Tác Giả
🙏 Lời Cảm Ơn
📞 Hỗ Trợ

✨ Tính Năng

🔐 Xác Thực & Bảo Mật

🚀 Đăng Nhập Nhanh - Hệ thống xác thực đơn giản và an toàn
🔒 Bảo Mật Dữ Liệu - Không lưu trữ dữ liệu người dùng, ưu tiên quyền riêng tư
🛡️ Phiên Bảo Mật - Xác thực dựa trên JWT token
🔐 Bảo Vệ Route - Bảo mật cấp độ đường dẫn

📸 Camera & Quay Chụp

📷 Truy Cập Camera Trực Tiếp - Chụp ảnh ngay trong trình duyệt
🎥 Quay Video HD - Quay video chất lượng cao
🔄 Chuyển Đổi Camera - Hỗ trợ camera trước/sau trên di động
⚡ Xem Trước Thời Gian Thực - Live camera feed với điều khiển

🖼️ Quản Lý Media

📂 Tải File Lên - Upload từ thư viện thiết bị
👁️ Xem Trước Media - Xem trước nội dung trước khi chia sẻ
✂️ Cắt Thông Minh - Cắt vuông với lựa chọn tùy chỉnh
📝 Caption Tùy Chỉnh - Thêm tin nhắn cá nhân hóa
❤️ Tương Tác - Hệ thống thả cảm xúc tương tác

🎨 Trải Nghiệm Người Dùng

📱 Thiết Kế Responsive - Hoạt động trên mọi thiết bị và kích thước màn hình
🌙 Giao Diện Hiện Đại - Interface sạch sẽ, trực quan
⚡ Hiệu Suất Nhanh - Được tối ưu hóa với Vite bundler
🔮 Animation Mượt Mà - Được hỗ trợ bởi Framer Motion
📊 Lịch Sử Moment - Xem lại các khoảnh khắc đã chia sẻ

🔔 Tính Năng Nâng Cao

🔔 Thông Báo Đẩy - Thông báo thời gian thực qua Firebase
💾 Hỗ Trợ Offline - IndexedDB cho chức năng offline
🌐 PWA Sẵn Sàng - Khả năng Progressive Web App
☁️ Lưu Trữ Đám Mây - Tích hợp Cloudinary cho media
🎯 Theo Dõi Hiệu Suất - Analytics tích hợp sẵn

🚀 Demo

📱 Ảnh Chụp Màn Hình

🖼️ Xem Ảnh Giao Diện

🛠️ Cài Đặt

📋 Yêu Cầu Hệ Thống

Trước khi bắt đầu, hãy đảm bảo bạn đã cài đặt:

Node.js >= 18.0.0
npm >= 8.0.0 hoặc yarn >= 1.22.0
Git để quản lý phiên bản

⬇️ Clone Repository

git clone https://github.com/doi2523/Client-Locket-Dio.git
cd Client-Locket-Dio

📦 Cài Đặt Dependencies

Sử dụng npm:

npm install

Sử dụng yarn:

yarn install

🏃‍♂️ Chạy Development Server

npm run dev
# hoặc
yarn dev

Mở http://localhost:5173 để xem trong trình duyệt.

🏗️ Build cho Production

npm run build
# hoặc
yarn build

👀 Xem Trước Production Build

npm run preview
# hoặc
yarn preview

⚙️ Cấu Hình

🔧 Biến Môi Trường

Tạo file .env trong thư mục gốc:

# =========================
# 🌐 Cấu Hình API
# =========================

# API chính cho logic, moments, users
VITE_BASE_API_URL=https://apilocket-diov2.onrender.com

# API test cơ sở dữ liệu
VITE_DATA_API_URL=https://data.locket-dio.com

#API upload phương tiện lên cloud
VITE_STORAGE_API_URL=https://storage.locket-dio.com

# =========================
# 🔔 Thông Báo Đẩy
# =========================

# VAPID public key cho web push notifications
VITE_VAPID_PUBLIC_KEY=your_vapid_public_key_here

🏗️ Công Nghệ

Frontend	Backend Services	Development

📁 Cấu Trúc Dự Án Tham Khảo

Client-Locket-Dio/
├── 📂 public/                      # Tài nguyên tĩnh, truy cập trực tiếp
│   ├── 📁 images/                  # Ảnh minh họa, biểu tượng
│   ├── 📄 favicon.ico             # Icon website
│   ├── 📄 manifest.json           # Thông tin PWA (Progressive Web App)
│   └── 📄 robots.txt              # Quy tắc crawl cho bot tìm kiếm
│
├── 📂 src/                         # Mã nguồn chính
│   ├── 📁 assets/                 # Ảnh, font, video dùng trong code
│   ├── 📁 components/             # Các thành phần UI tái sử dụng
│   │   ├── 📁 common/            # Các UI nhỏ như Button, Modal, Icon
│   │   ├── 📁 camera/            # Component Camera, Recorder
│   │   ├── 📁 media/             # Preview, Editor, Upload
│   │   └── 📁 auth/              # Đăng nhập, đăng ký, xác thực
│   │
│   ├── 📁 context/                # React Context: Auth, Theme, AppState...
│   ├── 📁 cache/                  # Setting cache với indexDB...
│   ├── 📁 config/                 # Cài đặt kết nối...
│   ├── 📁 hooks/                  # Custom hooks: useAuth, useTheme...
│   ├── 📁 layout/                 # MainLayout, LocketLayout...
│   ├── 📁 pages/                  # Các trang chính: Home, Login, Moment...
│   ├── 📁 routes/                 # Định tuyến React Router
│   ├── 📁 services/               # Gọi API (axios/fetch)
│   ├── 📁 lib/                    # Cấu trúc axios, fetch...
│   ├── 📁 utils/                  # Hàm tiện ích: formatDate, validate...
│   ├── 📁 constants/              # Biến cấu hình, enums, routes...
│   ├── 📁 styles/                 # CSS/tailwind bổ sung (nếu cần)
│   │   └── global.css
│   │
│   ├── ⚙️ App.jsx                 # App chính, chứa Router & Layout
│   ├── ⚙️ main.jsx                # Entry Point chính
│   ├── ⚙️ sw.jsx                  # Service Worker (PWA, push...)
│   └── 📄 index.css               # CSS toàn cục (import Tailwind)
│
├── 📄 .env                        # Biến môi trường thực tế (không commit)
├── 📄 .env.example                # Biến môi trường mẫu
├── 📄 .gitignore                  # Bỏ qua file khi push Git
├── 📄 README.md                  # Mô tả dự án
│
├── 📦 package.json               # Danh sách thư viện và script
├── 📦 package-lock.json          # Khóa phiên bản chính xác
│
├── ⚙️ vite.config.js              # Cấu hình Vite và PWA
├── 🎨 tailwind.config.js          # Cấu hình Tailwind CSS
├── 🔥 firebase.json               # Cấu hình Firebase (hosting, rewrites)

📚 Dependencies Chính

Package	Phiên Bản	Mô Tả
Frontend Framework
`react`	^18.2.0	Thư viện React để xây dựng UI
`react-dom`	^18.2.0	React DOM renderer
`react-router-dom`	^7.2.0	Client-side routing
Styling & Animation
`@tailwindcss/vite`	^4.0.9	Tailwind CSS cho styling
`lucide-react`	^0.476.0	Thư viện icon đẹp
Backend Integration
`firebase`	^11.9.0	Firebase SDK cho backend services
`axios`	^1.8.1	HTTP client cho API calls
`jwt-decode`	^4.0.0	JWT token decoder
Media & Storage
`dexie`	^4.0.11	IndexedDB wrapper cho offline storage
`react-easy-crop`	^5.4.2	Component cắt hình ảnh
UI/UX Enhancement
`react-toastify`	^11.0.5	Hệ thống toast notification

🔧 Tham Khảo API

🔐 Xác Thực

POST /locket/loginV2
Content-Type: application/json

{
  "username": "string",
  "password": "string"
}

📸 Tải Media Lên

POST /locket/postMomentV2
Authorization: Bearer {token}
Content-Type: application/json

{
  "model": "Version-UploadmediaV3.1",
  "mediaInfo": {
    "url": "https://cdn.example.com/path/to/file.jpg",
    "path": "user_uploads/abc123.jpg",
    "name": "abc123.jpg",
    "size": 194203,
    "contentType": "image/jpeg",
    "timeCreated": "2025-07-24T14:30:00Z",
    "type": "image"
  },
  "options": {
    "caption": "Caption tuỳ chọn",
    "overlay_id": "abc123",
    "type": "caption_theme",
    "icon": "❤️",
    "text_color": "#FFFFFF",
    "color_top": "#000000",
    "color_bottom": "#FF0000",
    "audience": "selected",
    "recipients": ["uid1", "uid2"],
    "music": "https://cdn.example.com/music.mp3"
  }
}

🤝 Đóng Góp

Chúng tôi yêu thích những đóng góp! Vui lòng đọc Hướng Dẫn Đóng Góp để tìm hiểu về quy trình phát triển, cách đề xuất sửa lỗi và cải tiến.

🚀 Bắt Đầu Nhanh cho Contributors

Fork repository này
Clone fork của bạn: git clone https://github.com/doi2523/Client-Locket-Dio.git
Cài đặt dependencies: npm install
Tạo branch: git checkout -b feature/new-feature-babi
Thực hiện thay đổi của bạn
Test thay đổi: npm run test
Commit thay đổi: git commit -m 'Thêm tính năng tuyệt vời'
Push lên branch: git push origin feature/tinh-nang-tuyet-voi
Mở Pull Request

📋 Hướng Dẫn Phát Triển

Tuân theo style code hiện có
Viết commit message rõ ràng
Thêm test cho tính năng mới
Cập nhật tài liệu khi cần
Đảm bảo tất cả test pass trước khi submit PR

🐛 Báo Cáo Lỗi

Khi báo cáo lỗi, vui lòng bao gồm:

Mô tả vấn đề
Các bước tái hiện vấn đề
Hành vi mong đợi
Screenshots (nếu có)
Chi tiết môi trường (OS, trình duyệt, phiên bản)

🗺️ Lộ Trình

🎨 Chỉnh Sửa Hình Ảnh Nâng Cao - Bộ lọc và hiệu ứng cho ảnh/video
🌙 Hệ Thống Theme - Chế độ Dark/Light với nhiều theme
🔔 Thông Báo Nâng Cao - Hệ thống push notification tiên tiến
📱 Progressive Web App - Triển khai PWA đầy đủ
🔍 Tìm Kiếm & Khám Phá - Tìm và khám phá moments
👥 Tính Năng Xã Hội - Bạn bè, nhóm và chia sẻ

📊 Thống Kê Dự Án

👥 Tác Giả

🚀 Được tạo với ❤️ bởi

Dio (@doi2523)
Full Stack Developer

🙏 Lời Cảm Ơn

🎨 Cảm Hứng Thiết Kế - Xu hướng thiết kế web hiện đại và mẫu trải nghiệm người dùng
📚 Cộng Đồng Open Source - Cho những thư viện và công cụ tuyệt vời
🔥 Đội Ngũ Firebase - Vì đã cung cấp dịch vụ fontend xuất sắc
☁️ Clouflare - Cho giải pháp quản lý media đáng tin cậy
💡 Cộng Đồng Locket Widget - Vì cảm hứng và phản hồi
🌟 Contributors - Mọi người đã đóng góp cho dự án này

📞 Hỗ Trợ

💬 Nhận Trợ Giúp

☕ Ủng Hộ Dự Án

📧 Thông Tin Liên Hệ

Email: doibncm2003@gmail.com
Website: https://locket-dio.com
Telegram: @ddevdio
GitHub: @doi2523

⚠️ Lưu Ý Quan Trọng

🔒 Ưu Tiên Quyền Riêng Tư: Ứng dụng này tuân theo phương pháp ưu tiên quyền riêng tư. Chúng tôi không lưu trữ dữ liệu người dùng không cần thiết.

🔧 Trạng Thái Backend: Dịch vụ backend hiện đang ở chế độ riêng tư và chứa các thành phần nội bộ chưa sẵn sàng để phát hành công khai.

🌟 Phát Triển Tích Cực: Dự án này được duy trì và cập nhật thường xuyên.

Name		Name	Last commit message	Last commit date
Latest commit History 398 Commits
public-gembgmono		public-gembgmono
public-goldonblack		public-goldonblack
public-pastel3dpink		public-pastel3dpink
public		public
src		src
.env.example		.env.example
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
eslint.config.js		eslint.config.js
firebase.json		firebase.json
index.html		index.html
jsconfig.json		jsconfig.json
package-lock.json		package-lock.json
package.json		package.json
tailwind.config.js		tailwind.config.js
tailwind.css		tailwind.css
vercel.json		vercel.json
vite.config.js		vite.config.js

License

doi2523/Client-Locket-Dio

Folders and files

Latest commit

History

Repository files navigation