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.
- 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
- transitive-bullshit/nextjs-notion-starter-kit
- Next.js - React core framework
- Server Side Rendering to serve dynamic data from Notion.
- Redux - state management
- Tailwind CSS - utility-first css framework
- Community
- Vercel - application deployment and serving
- Github Action - automatic scheduled jobs like e2e test
- Vercel KV - serverless Redis database
- Google Analytics - session signal tracking
- Microsoft Clarity - free heatmaps & session recordings
- Logalert - Monitor application logs and send email alerts
- LogRocket - Modern Frontend Session Monitoring and Product Analytics
- SemaText - Application Logs Monitoring
- Semgrep - Static Application Analytics
- Algolia DocSearch - Algolia Crawler + Search UI component for open source projects and technical blog
# install dependency
$ npm install
# run local server
$ npm run dev
# run build
$ npm run build$ sudo vim /etc/hosts
# append this line
127.0.0.1 local.dazedbear.prothen visit the test site http://local.dazedbear.pro:3000
| 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 |
| 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 |
| 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 |
| path | description | tech stack |
|---|---|---|
tests/e2e/api |
e2e test for API routes src/pages/api |
Playwright |