Next.js 13 Blog and Portfolio Project Ep.1 | Building in Public 2023

Channel:

Cinderframe Live

Subscribers:

495

Published on March 1, 2023 7:11:28 PM ● Video Link: https://www.youtube.com/watch?v=CONnOfiTZ3M

Category:

Vlog

Duration: 1:11:56

1,752 views

39

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 Hickups, Restarts and Fails
3:51 Introduction
5:20 Slides - Outline
6:26 Old Version of the Website
8:15 Overview of the Project
11:14 Repository Initialization
15:17 Create Next v13 App
17:36 tsconfig.json
18:02 Engine Locking
22:07 ESLint and Prettier
28:43 Husky
31:40: Commitlint
36:29 Configure VS Code IDE
40:00 First commit fail :)
41:28 Fixing Boilerplate Code Complaints of ESLint
48:45 More fails :)
54:57 Finally Built and Pushed
55:55 Start Setup of Build Tools (watch on the 2nd Ep)
1:00:00 Applied "Why You Shouldn't Copy Paste"