🚗 Car Advisor - Ứng dụng Tư vấn Chọn Xe

Ứng dụng web giúp người dùng tìm kiếm và lựa chọn xe hơi phù hợp với nhu cầu và ngân sách.

✨ Tính năng chính

• 🔍 Tìm kiếm xe thông minh: Lọc theo số chỗ ngồi, mục đích sử dụng, và khoảng giá
• 🚙 Database xe đầy đủ: 14+ mẫu xe phổ biến tại Việt Nam với thông tin chi tiết
• 📋 Chi tiết từng xe: Xem thông số kỹ thuật, hình ảnh, và so sánh các thế hệ
• 🎨 Giao diện đẹp: Material-UI với dark mode, animations mượt mà
• 📱 Responsive: Hoạt động tốt trên desktop, tablet, và mobile
• 🔄 Loading animation: Hiệu ứng xe chạy độc đáo khi tìm kiếm

🛠️ Công nghệ sử dụng

Frontend

• React 18 - UI framework
• Material-UI - Component library
• Framer Motion - Animations
• JavaScript/ES6+

Backend

• FastAPI - Python web framework
• Uvicorn - ASGI server
• Pydantic - Data validation

🚀 Cài đặt và chạy

Prerequisites

• Node.js 16+
• Python 3.8+
• npm hoặc yarn

1. Clone repository

git clone <your-repo-url>
cd car-advisor

2. Setup Backend

cd backend
python -m venv venv
source venv/bin/activate  # macOS/Linux
# hoặc venv\Scripts\activate  # Windows
pip install fastapi uvicorn
python main.py

Backend sẽ chạy tại: http://127.0.0.1:8000

3. Setup Frontend

cd frontend
npm install
npm start

Frontend sẽ chạy tại: http://localhost:3000

📖 Hướng dẫn sử dụng

1. Chọn số chỗ ngồi: 2, 4, 5, 7, 8, hoặc 9 chỗ
2. Chọn mục đích: Thành phố, Gia đình, Công việc, hoặc Dịch vụ
3. Thiết lập giá (tùy chọn): Khoảng giá từ-đến hoặc chọn nhanh
4. Tìm kiếm: Nhấn "TÌM XE PHÙ HỢP NGAY"
5. Xem chi tiết: Click vào card xe để xem thông tin đầy đủ

🗂️ Cấu trúc project

car-advisor/
├── frontend/                 # React app
│   ├── public/
│   │   └── images/          # Hình ảnh xe (cần thêm)
│   ├── src/
│   │   ├── components/      # React components
│   │   │   ├── CarLoading.js
│   │   │   └── CarDetail.js
│   │   └── App.js          # Main component
│   └── package.json
├── backend/                 # FastAPI server
│   ├── main.py             # API endpoints
│   └── venv/               # Python virtual environment
├── README.md
└── .gitignore

🚗 Database xe hiện tại

• Kia Morning, Hyundai Grand i10, Hyundai Accent
• Toyota Vios, Honda City
• Honda CRV, Mazda CX5
• Toyota Innova, Suzuki Ertiga, Mitsubishi Xpander
• Honda Accord, Toyota Camry
• Ford Ranger, Toyota Hilux

🎨 Screenshots

Trang chính

• Form tìm kiếm với Material-UI
• Dark mode toggle
• Animation loading với xe chạy

Kết quả tìm kiếm

• Grid 4 cột responsive
• Card hiển thị thông tin chi tiết
• Hover effects

Chi tiết xe

• Tabs cho các thế hệ xe
• Gallery hình ảnh
• Thông số kỹ thuật đầy đủ
• So sánh an toàn & khí thải

🔮 Tính năng sắp tới

• Upload hình ảnh thật cho từng xe
• Thêm nhiều xe vào database
• Tính năng so sánh xe
• Lưu xe yêu thích
• Liên hệ đại lý
• Reviews từ người dùng

🤝 Đóng góp

1. Fork project
2. Tạo feature branch (git checkout -b feature/amazing-feature)
3. Commit changes (git commit -m 'Add some amazing feature')
4. Push to branch (git push origin feature/amazing-feature)
5. Mở Pull Request

📝 License

Distributed under the MIT License. See LICENSE for more information.

📞 Liên hệ

• Developer: [Your Name]
• Email: your-email@example.com
• Project Link: [GitHub Repository]

---

⭐ Nếu project hữu ích, hãy cho một star nhé!