# Frontend Document

Figma: https://www.figma.com/proto/Q3KXjvXmL6DetzlgELKVyC/web1?type=design&node-id=10-51&t=HnakQFw4v68qbjDC-1&scaling=scale-down&page-id=0%3A1
<!-- https://discordapp.com/channels/1133629203888222219/1149269731136774194/1156570922283712564 -->

### Nextjs
https://nextjs.org/docs/getting-started/installation#run-the-development-server
https://nextjs.org/learn-pages-router/basics/create-nextjs-app/setup

### Linter fix

npm run lint -- --fix

### AuthContext
Interface

interface AuthContextType {
  user: User | null;
  userLoaded: boolean;
  signIn: () => Promise<void>;
  logOut: () => Promise<void>;
  request?: (url: string, { auth, headers, ...options }?: customRequestInit) => Promise<Response | null>;
};

request

## src/context 跟後端 & firebase 的互動
>[name=洪銘德]`src/context/` authcontext
>`src/app/database/[quizID]`

## 評價網&課程資料庫 搜尋頁面、主頁面
>[name=Zoe] `src/app/main`

* Figma p.1, 2, 5

## 課程評價網 & 課程資料庫 介面
>[name=Lily] `src/screen/`
* Figma p.3, 4, 6, 7

## Top Navigation Bar
>[name=雞塊] `src/App.jsx`
* react-router-dom
`
# Help
## CSS
item layout

### Flexbox
用來排列items
[Cheatsheet](https://flexboxsheet.com/)

## API
Search Bar
https://www.youtube.com/watch?v=sWVgMcz8Q44

json test
https://jsonplaceholder.typicode.com/

# Commit Message
Git commit Style Guide
https://gist.github.com/ericavonb/3c79e5035567c8ef3267

{type}({scope}): {subject}
<BLANK LINE>
[body]