Dazedbear Studio

This is dazedbear's personal website. There are some demo, memos, and articles here that that are related to web development, music composition, digital music, music technology, and so on.

Screenshot

Tech Stack

Application

• Notion - use it as headless CMS inspired by the below tmeplates
  • transitive-bullshit/nextjs-notion-starter-kit
    • NotionX/react-notion-x for fetching data from Notion then rendering posts
    • preview image to generate image placeholder with lqip.
  • ijjk/notion-blog
    • API response cache that I use @vercel/kv to implement instead
• Next.js - React core framework
  • Server Side Rendering to serve dynamic data from Notion.
• Redux - state management
  • @reduxjs/toolkit
  • react-redux
• Tailwind CSS - utility-first css framework
• Community
  • Likecoin button
  • Facebook chat plugin

SaaS

CI/CD

• Vercel - application deployment and serving
• Github Action - automatic scheduled jobs like e2e test

Cache

• Vercel KV - serverless Redis database

Tracking

• Google Analytics - session signal tracking
• Microsoft Clarity - free heatmaps & session recordings

Monitoring

• Logalert - Monitor application logs and send email alerts
• LogRocket - Modern Frontend Session Monitoring and Product Analytics
• SemaText - Application Logs Monitoring

Security

• Semgrep - Static Application Analytics

Search

• Algolia DocSearch - Algolia Crawler + Search UI component for open source projects and technical blog

Testing

• Jest - Unit Test
• Playright - End-to-end Browser/API Test and Visual Test

Development

# install dependency
$ npm install

# run local server
$ npm run dev

# run build
$ npm run build

Setup local development domain

$ sudo vim /etc/hosts

# append this line
127.0.0.1 local.dazedbear.pro

then visit the test site http://local.dazedbear.pro:3000

Environment variables for development

name	default value	required	description
NEXT_PUBLIC_APP_ENV	development	no	app env. available values: development, stage, production
HOST	local.dazedbear.pro	no	app hostname
PORT	3000	no	app port
CACHE_CLIENT_ENABLED	false	no	flag to turn on cache client
DEBUG	-	no	useful flag to turn on debug mode for specific modules. ex: DEBUG=ioredis:*
DISABLE_PAGE_PROCESS_TIMEOUT	false	no	notion pages will be redirected to failsafe pages if server-side rendering exceeds the page progress timeout (3500 ms). use this flag to turn it off
BUNDLE_ANALYSIS	false	no	use this flag to turn on bundle analyzer to show the report after running npm run build

Testing

Unit Test

path	description	tech stack
src/libs/server	helper, transformer	jest
src/libs/client/hook	react hook	jest, react hook
src/libs/client/slices	redux	jest, redux

E2E: Browser Test

path	description	tech stack
tests/e2e/pages	e2e visual test for static and notion pages src/pages	Playwright
tests/e2e/failsafe	e2e visual test for static and notion failsafe generated pages src/pages	Playwright

E2E: API Test

path	description	tech stack
tests/e2e/api	e2e test for API routes src/pages/api	Playwright