Demo (The site may crush due to deployment service or database sleeping, if you encounter any problem in demo website, feel free to contact me)
This Dcard 2024 Frontend Intern Homework, whose goal is to connect with GitHub OAuth API to implement login, and user can create open issue as their blog post, close issue as deleting post. Author can "read", "create", "edit", "delete" their post and comment, and others can only "read" post and comment.
First, set environment variable:
GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=
SECRET_KEY=
TURSO_DATABASE_URL=
TURSO_AUTH_TOKEN=
BASE_URL=
Second, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Open http://localhost:3000 with your browser to see the result.
flowchart LR
lp[Landing Page] --> haveLogin{Login with
GitHub?}
haveLogin -- yes --> haveRepo{Have a repository as blog?}
haveLogin -- no --> login[Request
user login] --> haveRepo{Have a repository
as blog?}
haveRepo -- yes --> userPage["User Page /[username]"]
haveRepo -- no --> chooseRepo[Request user choose a
existing repository as blog] --> userPage
/
- landing page, a login button to authentication page or a redirect botton to [username]
if user have logined/callback
- a page where authentication page redirected to, used to take its query parameter code
and send to GitHub API for obtaining user's information and access token, then save them all as JWT/select-repo
- let user select a existing repository as their blogThe following routes have layout which contains a sidebar (or header for small screen size) to let user create post, redirect to their blog page, or logout
/[username]
- User's blog page, which shows the latest ten posts at first, and when scrolling down to bottom it fetches next ten posts. Each posts is linked to their /[username]/[postNum]
page/[username]/[postNum]
- post page, where all user can read post or leave a comment but only author can edit and delete the post