Call API React Application

Ứng dụng React để quản lý sản phẩm và danh mục thông qua API calls.

🚀 Setup và Installation

Prerequisites

• Node.js (v18+)
• npm hoặc yarn
• Backend API server đang chạy

Installation

1. Clone repository:

git clone https://github.com/ThunFan127/Call_API.git
cd call_api

2. Install dependencies:

npm install

3. Cấu hình environment variables:

cp .env.example .env.local

4. Chỉnh sửa .env.local với thông tin backend của bạn:

VITE_API_BASE_URL=http://your-backend-server:port
VITE_API_TIMEOUT=5000
VITE_DEV_MODE=true

5. Chạy ứng dụng:

npm run dev

🏗️ Cấu trúc Project

src/
├── components/
│   ├── Categories/
│   │   ├── Categories.jsx
│   │   └── Categories.css
│   └── Products/
│       ├── Products.jsx
│       └── Products.css
├── services/
│   └── api.js
├── App.jsx
└── main.jsx

📡 API Endpoints

Ứng dụng sử dụng các endpoints sau:

Products API

• GET /api/v1/products - Lấy danh sách sản phẩm
• POST /api/v1/products - Tạo sản phẩm mới
• PUT /api/v1/products/{id} - Cập nhật sản phẩm
• PATCH /api/v1/products/{id}/toggle - Toggle trạng thái

Categories API

• GET /api/v1/categories - Lấy danh sách danh mục
• POST /api/v1/categories - Tạo danh mục mới
• PUT /api/v1/categories/{id} - Cập nhật danh mục
• PATCH /api/v1/categories/{id}/toggle - Toggle trạng thái

🛡️ Bảo mật

• ✅ Environment variables được sử dụng cho cấu hình nhạy cảm
• ✅ .env.local được exclude khỏi Git
• ✅ CORS được xử lý thông qua Vite proxy
• ✅ Template .env.example có sẵn để setup

🔧 Technologies

• React 19.1.1 - Frontend framework
• Vite 7.1.7 - Build tool và dev server
• Axios 1.12.2 - HTTP client
• React Router DOM - Routing

📝 Features

• ✅ Quản lý sản phẩm (CRUD)
• ✅ Quản lý danh mục (CRUD)
• ✅ Toggle trạng thái
• ✅ Form validation
• ✅ Error handling
• ✅ Loading states
• ✅ Responsive design

🚨 Lưu ý quan trọng

KHÔNG COMMIT file .env.local lên Git! File này chứa thông tin nhạy cảm về backend server.

Luôn sử dụng .env.example làm template và tạo .env.local cho từng môi trường.