💬 Bạn có góp ý gì cho dự án không? Để lại feedback →

Dự án cá nhân

Mindset
Mastery

Được xây dựng bởi Trương Thành Đạt

Ứng dụng web giúp bạn xây dựng tư duy bền vững — từ việc đặt mục tiêu, theo dõi tiến độ đến giữ vững ngọn lửa động lực mỗi ngày.

✦ Dùng thử ngay
🎯 Quản lý mục tiêu ⚡ Deep Focus Mode 📚 Thư viện cảm hứng 📔 Nhật ký cảm xúc 🏆 Gương sáng
scroll

Vibecoding Workflow

Toàn bộ dự án được xây dựng theo workflow AI-first — không viết code tay từng dòng.

01
/ck:brainstorm

Phác thảo ý tưởng

Khám phá giải pháp, đánh giá ưu nhược điểm từng hướng tiếp cận trước khi commit.

02
/ck:plan

Lập kế hoạch chi tiết

Chia nhỏ tasks theo phase, thiết kế kiến trúc, xác định dependencies rõ ràng.

03
/ck:plan validate

Kiểm tra & phản biện

Phỏng vấn phản biện, phát hiện rủi ro tiềm ẩn trước khi bắt đầu code.

04
/ck:cook

Thực thi

AI viết code theo từng phase của kế hoạch, đúng kiến trúc đã định.

05
/ck:fix

Sửa lỗi tự động

Debug, phân tích root cause, fix bug theo vòng lặp cho đến khi pass.

06
/ck:docs init

Tài liệu hóa

Sinh docs, cập nhật README và changelog tự động sau mỗi feature.


Cấu trúc dự án

Tổ chức code theo từng domain rõ ràng, dễ mở rộng và maintain.

strong_mindset_web / src
src/
├── pages/
│   ├── Home.tsx           # Trang đăng nhập / chào mừng
│   ├── Goals.tsx          # Quản lý mục tiêu & task
│   ├── Library.tsx        # Thư viện quotes, video, kẻ thù
│   ├── Profile.tsx        # Hồ sơ người dùng, streak
│   ├── Settings.tsx       # Cài đặt ứng dụng
│   ├── DeepMode.tsx       # Chế độ tập trung sâu (Pomodoro)
│   ├── journal/           # Nhật ký cảm xúc hàng ngày
│   └── heroes/            # Gương sáng truyền cảm hứng
├── components/        # 15+ UI components tái sử dụng
├── contexts/          # React Context (Auth, Music, DeepMode...)
├── lib/               # Firebase, services, badge logic
└── types.ts           # TypeScript interfaces

Con số dự án

Được xây dựng hoàn toàn bằng AI-assisted development trong thời gian ngắn.

~3
Tuần phát triển
3K+
Dòng code TypeScript
70+
Files source code
8
Màn hình chính

Đội ngũ AI

Mỗi model AI có vai trò riêng — phối hợp để tối ưu chất lượng và chi phí.

Gemini 2.0 Flash

Thực hiện & fix bug giao diện — nhanh, rẻ, hiệu quả cho mọi UI task

🪶

Claude Haiku

Fix bug đơn giản, refactor nhỏ — tối ưu chi phí token tối đa

🧠

Claude Sonnet 4.5

Fix bug phức tạp, planning, thiết kế kiến trúc hệ thống

💼

GitHub Copilot

Backup & chỉnh sửa trực tiếp trong IDE, autocomplete thông minh

💬

ChatGPT & Gemini

Cố vấn chiến lược, tư vấn hướng đi, brainstorm ý tưởng sản phẩm


Công nghệ chính

Stack hiện đại, serverless, zero-config deployment.

⚛️ React 19
🔷 TypeScript
⚡ Vite
🎨 TailwindCSS 4
🔥 Firebase Auth
🗄️ Firestore
▲ Vercel
🔀 React Router 7
🎭 Framer Motion

Các màn hình dự án

8 màn hình với đầy đủ tính năng cho hành trình phát triển bản thân.

🏠Trang chủ

Đăng nhập bằng Google OAuth. Panel động lực + form email/password

🎯Mục tiêu

Tạo, chỉnh sửa goal và task. Theo dõi tiến độ và streak hàng ngày

📚Thư viện

Quotes truyền cảm hứng, videos học tập, kẻ thù nội tâm cần chinh phục

Deep Mode

Chế độ tập trung sâu: timer Pomodoro, nhạc nền, loại bỏ phân tâm

📔Nhật ký

Ghi chép cảm xúc hàng ngày, mood tracker, tag và tìm kiếm thông minh

🏆Gương sáng

Hall of Fame — thêm nhân vật truyền cảm hứng, xem timeline hành trình

👤Hồ sơ

Thống kê cá nhân, streak calendar, huy hiệu thành tích

⚙️Cài đặt

Ngôn ngữ, chủ đề, tùy chỉnh trải nghiệm người dùng


Giai đoạn phát triển

Ba giai đoạn từ hoàn thiện MVP đến mở rộng người dùng.

01
Hiện tại · Đang thực hiện

Hoàn thiện & ổn định MVP

Thêm tính năng còn thiếu, fix bug nhỏ, tối ưu UX, hoàn thiện giao diện mobile responsive

02
Tương lai · Phase 2

Backend Laravel + Hosting riêng

Thiết kế backend Laravel, deploy lên hosting 49k/tháng để tiết kiệm chi phí Firebase và tăng khả năng mở rộng

03
Tương lai · Phase 3

Mobile App & Marketing

Thiết kế bản mobile (React Native), xây dựng chiến lược marketing, mở rộng ra người dùng thực

Câu hỏi chờ giải đáp

Những điều cần cộng đồng và đồng đội cùng nhau tìm ra hướng đi.

01

UI nhìn phèn — phải làm thế nào?

Giao diện hiện tại còn thô, chưa đủ polished. Cần designer review và đề xuất cải tiến cụ thể cho từng màn hình.

02

Cần thêm tính năng gì không?

Dự án đang ở MVP, còn nhiều khoảng trống. Tính năng nào sẽ tạo ra giá trị thực sự cho người dùng?

03

Hướng phát triển cho bản mobile?

React Native hay Flutter? Native hay cross-platform? Ưu tiên iOS hay Android trước? Cần input từ người có kinh nghiệm mobile.


Bạn nghĩ gì về dự án?

Mình rất muốn nghe ý kiến của bạn — dù là góp ý về UI, tính năng, hướng phát triển hay bất kỳ điều gì. Mọi feedback đều có giá trị!

🎨

Góp ý UI / UX

💡

Đề xuất tính năng

🚀

Hướng phát triển

🐛

Báo cáo lỗi

✦ Để lại feedback ngay

Chỉ mất 2 phút · Hoàn toàn ẩn danh