Dcard 2024 Frontend Intern Homework

Details | Live Demo

.env.local file is required for the project to run. Please refer to .env.example for the required environment variables.

To start the project, run npm install and npm run dev in the terminal.

Note that the project will use Turbopack for dev server. Please remove the flag --turbo in package.json if you want to use the default dev server.

Required Features

• Github OAuth 登入
• 有著作權的使用者可以新增、編輯、刪除文章
• 所有使用者可以瀏覽所有文章
• 主頁有 Pagination, 一頁顯示 10 筆文章
• 文章頁面有文章內容、編輯、刪除功能
• 新增、編輯文章時有驗證機制

Extra Features

• 全面使用 Typescript
• 使用 Next.js + App Router + Server Components + Server Actions
• Web Vitals 和 Lighthouse 100 分
• 每一頁有自己的 Skeleton Loading
• 有 Error Boundaries
• 支持 Light/Dark Mode
• editor 是 WYSIWYG
• 文章頁面有 SEO Open Graph 支持

Known Issues / Improvements

• Missing Loaders for posting progress
• Misisng Icons/Fvaicon and Robots.txt file
• Access Token refreshing
• User Profile Filtering
• Loading Skeleton from main page -> post/[issueId] sometimes will fail (App Router issue)