dada878/dcard-homework

2024 Dcard Frontend Intern Homework

Dcard Frontend Intern Homework

Introduction

Dada's Blog (Dcard Frontend Intern Homework) is a simple blog website that allows visitors to view posts, and owner to create, edit, and delete posts. All the posts are stored in a GitHub repository issues.

Demo

I deployed that on Vercel. Check it out

Screenshots

Tech Stack

• Tailwind CSS
• React.js
• Next.js
• Typescript

Design

The design draft for this project can be found here: Figma Draft Link

Lighthouse Scores

Home Page

desktop test result link	mobile test result link

Blog List Page

desktop test result link	mobile test result link

Blog View Page

desktop test result link	mobile test result link

Project Structure

Home Page

This page shown something about the blog me.

• <Navbar/>

  • Displays links to navigate to other pages
  • It will be shown on every page

• <DarkModeToggle/>

  • Toggle dark mode
  • Dark mode preference saved in local storage

• <AboutMe/>

  • Show some information about me
  • Cool animation when scrolling to this section

  

• <ProjectCard/>

  • Displays information about my side projects
  • Project data stored in a JSON file content/projects.json

Blog List Page

Show the list of posts with categories and tags.

• <CategoryItem/>

  • Component displaying a category name
  • Clickable to filter posts by category
  • Filter displayed in the URL
  • Uses a custom hook useQueryFilter to handle query and URL updates easily

• <TogglableTagItem>

  • Component displaying a tag name
  • Clickable to toggle selected tags to filter posts
  • Filter displayed in the URL
  • Uses a custom hook useQueryFilter to handle query and URL updates easily

• <PostList>

  • Component to render the post list
  • Implements infinite scroll feature to load more posts when scrolling to the bottom

  

Blog View page

Displays the post content and comments.

• <DeletePostButton/>
  • Button to delete the post
  • Visible only to the post owner
  • Shows a confirmation dialog when clicked
• <TableOfContent/>
  • Component to show the table of contents
  • Automatically generates based on the post content
• <TableOfContentItem/>
  • Component to show the menu item
  • Clickable to smooth scroll to the content
  • Highlighted when scrolling to the content

• <CommentSection/>

  • Section to show comments
  • Users can add comments when logged in
  • You can add a comment when you are logged in
  • Uses optimistic updates to show comments immediately

  

• <TabButton/>

  • Button to switch between writing a comment and previewing the comment content

This page also features a link preview when sharing links on social media (other pages also have this feature).

Post Editor page

A page to create or edit a post with markdown content.

• <MarkdownRender/>

  • Component to render markdown content using react-markdown
  • Uses debounce to render markdown content while the user types, improving performance

  

The mobile UI/UX design of this page is particularly noteworthy.

How To Use

The setup process is a bit complex due to the login feature.

Step 1. Setup Firebase

Firstly, you need to create a Firebase project following this link: Firebase Console

Click this button.

Copy the information displayed (we will use it in the last step).

Then, you need to go to Firestore page (you can find it in the left sidebar) and create a database by clicking the "Create database" button.

After that, you need to go to the project settings page and "Service accounts" tab to generate a private key by clicking the "Generate new private key" button. (you can find the button to go to the project settings page on the top of the sidebar).

Step 2. Create a GitHub OAuth App

Firstly, you need to create a GitHub OAuth App following this link: GitHub OAuth Apps

Then, you need to generate a client secret by clicking the "Generate a new client secret" button. (Copy the client ID and client secret to use in the next step)

Step 3. Configuration

In the .env file:

# Github Repo you want to store posts data
# GITHUB_REPO_OWNER is also used to check permissions to create/edit posts
GITHUB_REPO_OWNER=dada878
GITHUB_REPO_NAME=dcard-homework

# BASE_URL is for development mode, and PRODUCTION_URL is for production mode
BASE_URL=http://localhost:3000
PRODUCTION_URL=https://dcard-homework-tawny.vercel.app

# Firebase configuration
FIREBASE_PUBLIC_API_KEY=AIzaSyBoE6YObSJYD-N8mi1CYFjFjoWV4rTqVOU
FIREBASE_AUTH_DOMAIN=dcard-homework.firebaseapp.com
FIREBASE_PROJECT_ID=dcard-homework
FIREBASE_STORAGE_BUCKET=dcard-homework.appspot.com
FIREBASE_MESSAGING_SENDER_ID=822235578246
FIREBASE_APP_ID=1:822235578246:web:0ca9f1ccfe88f16ad77607

In the .env.local file:

# Github OAuth service setup
GITHUB_APP_CLIENT_ID=XXXXXXXXXXXXXXXXXXXXXXXXX
GITHUB_APP_CLIENT_SECRET=XXXXXXXXXXXXXXXXXXXXX

# Personal access token for GitHub
# Because the rate limit of GitHub REST API is very low for unauthenticated requests, so we need to use a personal access token to increase the rate limit
GITHUB_PERSONAL_ACCESS_TOKEN=ghp_XXXXXXXXXXXXX

# Secret for NextAuth
# Can generate by `openssl rand -base64 32`
NEXTAUTH_SECRET=XXXXXXXXXXXXXX

# Development URL
NEXTAUTH_URL=http://localhost:3000

# Firebase admin sdk private key (we have generated it in step 1)
FIREBASE_PROJECT_ID=XXXXXXX
FIREBASE_CLIENT_EMAIL=XXXXXXXXX
FIREBASE_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\nxxx"

Step 4. Run

npm install
npm run dev

In Closing

Thank you for taking the time to read :)))