Tổng quan dự án
Bookmark Manager — ứng dụng lưu trữ và phân loại link yêu thích. User đăng ký → đăng nhập → thêm/sửa/xoá bookmark → gắn tag → tìm kiếm. Đầy đủ CRUD + Auth + Search.
| Layer | Công nghệ | Vai trò |
|---|---|---|
| Frontend | React + React Router | UI: form, danh sách, filter |
| Backend | Express + Zod validation | API RESTful + JWT middleware |
| Database | PostgreSQL + Knex | Bảng users, bookmarks, tags |
| Auth | JWT + bcrypt | Đăng ký, đăng nhập, middleware |
| Testing | Vitest + Supertest | Unit test utils + integration test API |
| Deploy | Railway / Render | Live URL cho portfolio |
Database schema
// File: schema.sql
CREATE TABLE users (
id SERIAL PRIMARY KEY,
email VARCHAR(255) UNIQUE NOT NULL,
password_hash VARCHAR(255) NOT NULL,
created_at TIMESTAMP DEFAULT NOW()
);
CREATE TABLE bookmarks (
id SERIAL PRIMARY KEY,
user_id INTEGER REFERENCES users(id) ON DELETE CASCADE,
title VARCHAR(255) NOT NULL,
url TEXT NOT NULL,
description TEXT,
tags TEXT[] DEFAULT '{}',
created_at TIMESTAMP DEFAULT NOW()
);
CREATE INDEX idx_bookmarks_user ON bookmarks(user_id);
CREATE INDEX idx_bookmarks_tags ON bookmarks USING GIN(tags);
API endpoints
| Method | Path | Auth? | Mô tả |
|---|---|---|---|
| POST | /api/auth/register | ❌ | Đăng ký tài khoản |
| POST | /api/auth/login | ❌ | Đăng nhập, trả JWT |
| GET | /api/bookmarks | ✅ | Lấy danh sách bookmark của user |
| POST | /api/bookmarks | ✅ | Thêm bookmark mới |
| PUT | /api/bookmarks/:id | ✅ | Sửa bookmark |
| DELETE | /api/bookmarks/:id | ✅ | Xoá bookmark |
| GET | /api/bookmarks/search?q= | ✅ | Tìm kiếm theo title/tag |
Những gì CV của bạn sẽ có
Sau dự án này, portfolio của bạn có: (1) Live URL chạy thật trên internet, (2) Source code trên GitHub có README rõ ràng, (3) Test coverage > 70%, (4) Auth an toàn với JWT + bcrypt, (5) Database migration tự động. Đây là mức mà hầu hết fresher apply junior chưa có.
🚀 Nâng cấp thêm cho ấn tượng
Thêm tính năng ngoài yêu cầu để nổi bật: dark mode, drag-drop sắp xếp bookmark, share public bookmark list, hoặc Chrome extension thêm bookmark nhanh. Nhà tuyển dụng đánh giá cao sự chủ động.
❓ Dự án portfolio fullstack cần gì để gây ấn tượng nhà tuyển dụng?
- Database schema + migration
- API CRUD hoàn chỉnh với Zod validation
- Auth flow: register + login + middleware
- Unit test + integration test pass
- Deploy lên Railway/Render có live URL
- README có hướng dẫn cài đặt và screenshot