Storybook & Component Template - Next.js 13 Blog and Portfolio Ep.3 | Building in Public 2023

Channel:

Cinderframe Live

Subscribers:

495

Published on March 8, 2023 6:50:17 PM ● Video Link: https://www.youtube.com/watch?v=kM2jR5JVdUU

Category:

Vlog

Duration: 1:09:29

4,060 views

133

In this series, I will be building my blog and portfolio app in livestreams. The tech stack I will use is Next.js + Ghost.org. Site is/will be live on afaruk.dev

Public Repo is available here: https://github.com/afgonullu/afarukdev-nextjs

Tech Stack
Next.js 13
Typescript
Tailwind
Husky
Storybook
Jest
ESLint
Prettier

I will be building using industry best practices and with scalability, sustainability and maintainability in mind.

I will try to utilize these features in my coding practice
Semantic Project Organization
Engine Locking
Linting and Formatting
Commit Linting
Tailwind Theme & Font
Typography Scales
Tailwind Linting
Component Templates
Component Styling

Ghost is served from Digital Ocean and Next.js app will be deployed to Vercel.

0:00 Introduction and Tech Stack
2:40 env-var fixed and Explained
12:45 Class Variance Authority NPM Package
17:03 Storybook
27:34 Jest
32:30 Base Template Component
40:46 Fix and Configure Storybook for Next.js
56:05 Storybook Working
1:00:51 Outro and Heart-Warming Talk :)