Dcard 2024 Frontend Intern Homework

Overview

Introduction
How to use
- Try out online
- Run locally
  - OAuth Setup
Tech Stack
Architecture and Explanation
Homework Requirements

Introduction

This project is a frontend intern homework for Dcard 2024, which implements Daniel's blog. The blog is a simple web application that allows admin user to create, edit, check out, and delete posts, also create and delete comments. On the other hand, normal users can only check out the posts, create and delete comments. Posts are stored as GitHub issues in a repository. The application uses GitHub OAuth to authenticate users and allow them to operate the GitHub API.

How to use

Try out online

The application is deployed on Vercel, you can try it out here

Run locally

Make sure Node.js, git, npm or similar tools are installed.
Clone the repository and navigate to the project directory

git clone https://github.com/awkward-willy/Dcard-2024-Frontend-Intern.git
cd Dcard-2024-Frontend-Intern

Install dependencies

npm install

Set up environment variables

Create a .env.local file in the project root directory and set the following environment variables

GITHUB_ADMIN_NAME=
GITHUB_REPO_NAME=
GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=
AUTH_SECRET=
AUTH_URL=
NEXT_PUBLIC_BASE_URL=

Explanation to the environment variables:
- GITHUB_ADMIN_NAME - The GitHub userid of the repository owner (E.g. awkward-willy)
  Note1: please make sure to put the userid not the display name
  Note2: the name should be the owner of the repository where the posts will be stored
- GITHUB_REPO_NAME - The name of the repository where the posts(issue) will be stored
- GITHUB_CLIENT_ID - The client ID of the OAuth App created on GitHub
  - Check out the OAuth Setup section for more details
- GITHUB_CLIENT_SECRET - The client secret of the OAuth App created on GitHub
  - Check out the OAuth Setup section for more details
- AUTH_SECRET - A secret key used to sign the JWT token
  - You can generate a random secret by the following command:
```
$ openssl rand -base64 32
```
- AUTH_URL - The URL of the server where the app is hosted
  - If for local development, set it to http://localhost:3000/api/auth
  - If for production, change http://localhost:3000 to your production URL
- NEXT_PUBLIC_BASE_URL - The base URL of the server where the app is hosted
  - If for local development, set it to http://localhost:3000
  - If for production, change http://localhost:3000 to your production URL

Start the development/production server

# development mode
npm run dev

# production mode
npm run build
npm run start

OAuth Setup

Create an OAuth App on GitHub

Go to Settings > Developer settings > OAuth Apps > New OAuth App
If for local development
- Set Homepage URL to http://localhost:3000
- Set Authorization callback URL to http://localhost:3000/api/auth/callback/github
If for production
- Change the above two http://localhost:3000 to your production URL

Set up environment variables

Copy the Client ID and Client Secret from the OAuth App you created and paste them in the .env.local file

Tech Stack

Next.js(APP router) - The React framework
Auth.js v5 - authentication solution
Tailwind CSS - For styling and responsive design
shadcn/ui - UI component library
Zustand - Global state management for certain components (e.g. CommentForm and InfiniteScrollComment)
Zod - For form and Environment variable validation and type safety.
remark - For markdown parsing
react-intersection-observer - For infinite scrolling

Architecture

Routes
- / - Home page
- /auth - Show all posts list to logged-in users
- /auth/post/create - Create a new post (only for admin)
- /auth/post/[number] - Show a single post and its comments
- /auth/post/[number]/edit - Edit a specific post (only for admin)
- /api/auth/[...nextauth] - auth.js API routes
Middleware
- if the user is not logged in, they cannot access the /auth and /auth/post/* routes
- if the user is logged in, they cannot access the / route

awkward-willy/2024-Frontend