Frontend Architecture¶

Tech Stack¶

Công nghệ	Version	Mục đích
Next.js	14+	React framework, App Router
TypeScript	5.x	Type safety
Tailwind CSS	v4	Utility-first CSS
TanStack Query	v5	Server state management

App Router Structure¶

frontend/
├── app/
│   ├── layout.tsx      # Root layout (HTML wrapper, fonts, providers)
│   ├── page.tsx         # Home page (/)
│   └── globals.css      # Global styles
├── lib/
│   └── api.ts           # API client functions
├── next.config.js
├── tailwind.config.ts
└── tsconfig.json

`layout.tsx` — Root Layout¶

Import Google Fonts
Wrap app trong các providers (TanStack Query)
Định nghĩa HTML <head> metadata

`page.tsx` — Home Page¶

Server Component mặc định
Render danh sách khóa học
Form tạo khóa học mới + upload thumbnail

`globals.css` — Global Styles¶

Tailwind directives (@tailwind base, @tailwind components, @tailwind utilities)
Custom CSS variables
Global overrides

Key Patterns¶

Data Fetching với TanStack Query¶

import { useQuery } from '@tanstack/react-query'
import { getCourses } from '@/lib/api'

function CourseList() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['courses'],
    queryFn: getCourses
  })

  if (isLoading) return <Loading />
  if (error) return <Error />
  return <CourseGrid courses={data} />
}

Environment Variables¶

Frontend chỉ cần 1 biến:

Biến	Mô tả
`NEXT_PUBLIC_API`	URL backend API

NEXT_PUBLIC_ prefix

Biến cần truy cập từ browser phải có prefix NEXT_PUBLIC_. Biến không có prefix chỉ available ở server-side.

Next.js Config¶

// next.config.js
const nextConfig = {
  typescript: { ignoreBuildErrors: true },
  eslint: { ignoreDuringBuilds: true },
};
module.exports = nextConfig;

Tại sao ignore errors?

Để build thành công trên CI/CD khi có minor lỗi TS/ESLint. Trong development vẫn nên fix hết lỗi.