Full-stack · Nền tảng công thức

Food Recipes

Không gian bếp cá nhân để khám phá công thức, lên kế hoạch bữa ăn, quản lý mua sắm và nguyên liệu.

Xem website Mã nguồn

Trọng tâmCông thức, kế hoạch & quy trình bếp

Loại dự ánDự án cá nhân · 09/2023 - Hiện tại

Công nghệ

React

NestJS

PostgreSQL

TypeScript

Prisma

Redux Toolkit

TanStack Query

Tailwind CSS

Docker

Playwright

Vai trò của tôiLập trình viên full-stack · Dự án cá nhân

Phạm vi phụ tráchState ứng dụng React và luồng công thức; API NestJS có version, xác thực và lưu trữ dữ liệu.

Bài toánLưu công thức chỉ là một phần của chuẩn bị bữa ăn. Kế hoạch, nguyên liệu, tồn kho và tiến độ nấu cần liên kết với nhau; ghi chú riêng và dữ liệu gia đình cần được phân quyền phù hợp.

Kết quảHoàn thiện các luồng công thức, kế hoạch bữa ăn, mua sắm, kho bếp và hộ gia đình; frontend và API được triển khai riêng.

Giao diện sản phẩm

Chọn màn hình, sau đó mở ảnh để xem rõ hơn.

Đóng góp cá nhân

Phần việc tôi phụ trách

Phát triển full-stack · Dự án cá nhân

01
Quy trình bếp
Xây dựng ba luồng liên kết gồm kế hoạch bữa ăn, danh sách mua sắm và quản lý kho bếp bằng React và TanStack Query.
02
API & xác thực
Thiết kế schema PostgreSQL gồm 41 model và REST API NestJS với xác thực JWT, luân phiên refresh token và phân quyền theo vai trò.
03
Frontend & triển khai
Phát triển ứng dụng React/TypeScript với Redux Toolkit, TanStack Query; API được triển khai riêng.

Tổng quan

Food Recipes là nền tảng nấu ăn kết hợp giao diện và máy chủ. Giao diện React và TypeScript dùng Redux Toolkit, TanStack Query; REST API NestJS có phiên bản lưu dữ liệu trong PostgreSQL qua Prisma.

Bài toán

Lưu công thức chỉ là một phần của chuẩn bị bữa ăn. Kế hoạch, nguyên liệu, tồn kho và tiến độ nấu cần liên kết với nhau; ghi chú riêng và dữ liệu gia đình cần được phân quyền phù hợp.

Giải pháp kỹ thuật

Xoay refresh credential trong HttpOnly cookie

Vì sao chọn cách này

API xoay vòng refresh cookie có thuộc tính HttpOnly, mã hóa phiên và thu hồi cả nhóm token khi phát hiện token bị tái sử dụng.

Đánh đổi

Xoay vòng giới hạn ảnh hưởng khi token lộ, nhưng các request refresh đồng thời cần được điều phối để tránh gửi lại token đã xoay.

Để API quản lý vòng đời refresh session

Vì sao chọn cách này

Xác thực và phiên làm việc được quản lý phía sau API NestJS có phiên bản; giao diện sử dụng các luồng REST đã xác thực.

Đánh đổi

Ranh giới bảo mật rõ hơn đồng nghĩa API phải xử lý xoay vòng, thu hồi khi tái sử dụng, logout và lưu session.

Tách trách nhiệm state từ server và state giao diện

Vì sao chọn cách này

TanStack Query quản lý dữ liệu từ API; Redux Toolkit tổ chức state quy trình phía frontend.

Đánh đổi

Hai công cụ quản lý trạng thái cần quy ước rõ ràng; nhờ đó không trộn bản ghi máy chủ đã lưu đệm với trạng thái giao diện tạm thời.

Tính năng sản phẩm

Khám phá công thức có tìm kiếm và đăng bài

Bộ sưu tập, đánh giá và ghi chú riêng

Kế hoạch bữa ăn, danh sách mua sắm và kho bếp

Chia sẻ hộ gia đình, tiến độ nấu và lịch sử

Tổng quan hệ thống

Kiến trúc đối chiếu sourceFood Recipes

Cấu trúc theo mã nguồnKho mã nguồn ↗

Ứng dụng React dùng NestJS REST API có version cho công thức, kế hoạch bữa ăn, kho bếp và hộ gia đình.

React + TypeScript

REST / JSON

NestJS REST API · /api/v1

Truy vấn Prisma

PostgreSQL + Prisma

Tải ảnh trực tiếp

Signed upload grant → object storage

Giao diện chạy trên Vercel, còn API NestJS được đóng gói container và triển khai riêng.

Bằng chứng & kiểm chứng

README phân biệt hành trình trình duyệt dùng dữ liệu mô phỏng với kiểm thử chấp nhận trên API và cơ sở dữ liệu thật.

Kiểm tra website đang hoạt động ngày 10/10/2026 với “oats” trả về 3 công thức phù hợp. Kết quả này chỉ xác nhận truy vấn đó và còn phụ thuộc vào danh mục trực tuyến.

Mã nguồn

Những điểm cần cân nhắc

Kho mã nguồn tách giao diện chạy trên Vercel và API NestJS dạng container thành các gói độc lập. Tài liệu kiểm tra phân biệt luồng trình duyệt dùng dữ liệu mô phỏng với kiểm thử chấp nhận trên API và cơ sở dữ liệu thật.