Vietnamese Personal Blog | Blog Cá Nhân Việt Nam

Ứng dụng blog cá nhân song ngữ Việt-Anh được xây dựng với React, Ant Design và JSON Server.

A bilingual Vietnamese-English personal blog application built with React, Ant Design, and JSON Server.

✨ Tính năng | Features

• 📝 CRUD Operations: Tạo, đọc, cập nhật, xóa bài viết | Create, read, update, delete posts
• 🌏 Bilingual Content: Nội dung song ngữ Việt-Anh | Vietnamese-English bilingual content
• 🔍 Search & Pagination: Tìm kiếm và phân trang | Search and pagination functionality
• 💬 Comments System: Hệ thống bình luận | Comments system
• 📱 Responsive Design: Thiết kế responsive | Mobile-friendly responsive design
• ✨ Modern UI: Giao diện hiện đại với Ant Design | Modern UI with Ant Design
• 📄 Markdown Support: Hỗ trợ viết và hiển thị Markdown | Markdown writing and rendering support
• 🗄️ JSON Server: Lưu trữ dữ liệu với JSON Server | Data persistence with JSON Server

�️ Tech Stack

• Frontend: React 19, Redux Toolkit
• UI Library: Ant Design
• Backend: JSON Server (Mock API)
• Styling: CSS3, Ant Design
• Markdown: React Markdown
• Date Handling: date-fns
• ID Generation: UUID

📦 Cài đặt | Installation

1. Clone repository

git clone <repository-url>
cd blog

2. Cài đặt dependencies | Install dependencies

npm install

3. Khởi động ứng dụng | Start the application

Khởi động đồng thời JSON Server và React App | Start both JSON Server and React App

npm run dev

Hoặc khởi động riêng biệt | Or start separately

JSON Server (Port 3001):

npm run json-server

React App (Port 3000):

npm start

🌐 API Endpoints

JSON Server sẽ chạy trên http://localhost:3001 với các endpoints:

JSON Server runs on http://localhost:3001 with endpoints:

• Posts: GET, POST, PUT, DELETE /posts
• Comments: GET, POST, DELETE /comments

Ví dụ API | API Examples

Lấy tất cả bài viết | Get all posts

GET http://localhost:3001/posts

Tạo bài viết mới | Create new post

POST http://localhost:3001/posts
Content-Type: application/json

{
  "id": "unique-id",
  "title": "Tiêu đề bài viết",
  "content": "# Nội dung markdown...",
  "userId": 1,
  "createdAt": "2024-07-28T00:00:00.000Z",
  "updatedAt": "2024-07-28T00:00:00.000Z"
}

Lấy bình luận theo bài viết | Get comments by post

GET http://localhost:3001/comments?postId=sample-1

🏗️ Cấu trúc dự án

src/
├── components/          # Các component tái sử dụng
│   ├── Header.js       # Header navigation
│   ├── PostCard.js     # Card hiển thị bài viết
│   ├── PostEditor.js   # Form tạo/sửa bài viết
│   ├── CommentCard.js  # Card hiển thị bình luận
│   └── CommentForm.js  # Form thêm bình luận
├── pages/              # Các trang chính
│   ├── HomePage.js     # Trang chủ - danh sách bài viết
│   ├── CreatePostPage.js # Trang tạo bài viết
│   ├── EditPostPage.js # Trang sửa bài viết
│   └── PostDetailPage.js # Trang chi tiết bài viết
├── store/              # Redux store
│   ├── index.js        # Cấu hình store
│   ├── postsSlice.js   # Slice quản lý bài viết
│   └── commentsSlice.js # Slice quản lý bình luận
├── utils/              # Tiện ích
│   ├── helpers.js      # Các hàm helper
│   └── sampleData.js   # Dữ liệu mẫu
└── App.js              # Component chính

🛠️ Cài đặt và chạy

Yêu cầu hệ thống

• Node.js >= 14
• npm hoặc yarn

Cài đặt

1. Clone repository:

git clone <repository-url>
cd blog

2. Cài đặt dependencies:

npm install

3. Chạy ứng dụng:

npm start

4. Mở trình duyệt và truy cập: http://localhost:3000

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

Tạo bài viết mới

1. Click vào nút "Viết bài mới" trên header
2. Nhập tiêu đề và nội dung (hỗ trợ Markdown)
3. Sử dụng nút "Xem trước" để preview nội dung
4. Click "Tạo bài viết" để lưu

Chỉnh sửa bài viết

1. Trên trang chủ hoặc trang chi tiết, click nút "Sửa"
2. Cập nhật thông tin
3. Click "Cập nhật" để lưu thay đổi

Tìm kiếm bài viết

1. Sử dụng thanh tìm kiếm trên trang chủ
2. Nhập từ khóa và nhấn Enter
3. Kết quả sẽ được lọc theo thời gian thực

Thêm bình luận

1. Vào trang chi tiết bài viết
2. Cuộn xuống phần bình luận
3. Điền thông tin và nội dung bình luận
4. Click "Gửi bình luận"

🎯 Tính năng Markdown

Ứng dụng hỗ trợ đầy đủ cú pháp Markdown:

• Tiêu đề: # H1, ## H2, ### H3
• Định dạng: **bold**, *italic*, ~~strikethrough~~
• Danh sách: - item hoặc 1. item
• Liên kết: [text](url)
• Hình ảnh: ![alt](url)
• Code: \inline`hoặccode block`
• Trích dẫn: > quote
• Bảng: Hỗ trợ bảng Markdown

🔧 Tùy chỉnh

Thêm tính năng mới

1. Tạo component mới trong src/components/
2. Thêm route mới trong App.js
3. Cập nhật Redux slice nếu cần

Thay đổi API

1. Cập nhật các async thunk trong postsSlice.js và commentsSlice.js
2. Thay đổi URL API endpoint

Tùy chỉnh giao diện

1. Cập nhật theme Ant Design trong App.js
2. Thêm CSS custom trong App.css

📦 Scripts có sẵn

• npm start: Chạy ứng dụng ở chế độ development
• npm run build: Build ứng dụng cho production
• npm test: Chạy tests
• npm run eject: Eject create-react-app config

🚀 Deployment

Build production

npm run build

Deploy lên Netlify/Vercel

1. Build project
2. Upload thư mục build/ lên hosting
3. Cấu hình routing cho SPA

📝 TODO / Tính năng tương lai

• Authentication & Authorization
• Categories/Tags cho bài viết
• Upload hình ảnh
• Rich text editor (WYSIWYG)
• Social sharing
• SEO optimization
• Offline support (PWA)
• Admin dashboard
• Email notifications
• Like/Unlike posts

🤝 Đóng góp

1. Fork repository
2. Tạo branch mới: git checkout -b feature/new-feature
3. Commit changes: git commit -am 'Add new feature'
4. Push branch: git push origin feature/new-feature
5. Tạo Pull Request

📄 License

MIT License - xem file LICENSE để biết thêm chi tiết.

👥 Tác giả

• Tên tác giả - Initial work

🙏 Cảm ơn

• Ant Design - UI Component Library
• JSONPlaceholder - Fake REST API
• React Markdown - Markdown Renderer

Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

npm run build fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify