Ghost Content API Setup and Planning - Next.js 13 Blog and Portfolio Ep.4 | Building in Public 2023

Channel:

Cinderframe Live

Subscribers:

495

Published on March 13, 2023 7:16:36 PM ● Video Link: https://www.youtube.com/watch?v=BjieQ6je5rE

Category:

Vlog

Duration: 1:03:51

1,073 views

38

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, Technologies Used in the Project
2:46 Recap of the Project So Far
4:30 Showing the Design of What We are Building
6:02 Ghost as Headless CMS
8:00 Check Commit History on Last Time
9:16 Tailwind Config
9:36 Typescaling
11:06 Base Template Component
16:40 Storybook
21:20 CMS Data Model, Content Hierarchy Design, Content Planning, Tags
26:28 Content API Integration
34:14 Fetching Data from API
36:58 Consuming Data on the Client Side
43:00 Banter on Windows grouping windows in Taskbar
43:46 Applying Filters to Ghost Content API Fetch
49:22 Justification of Building Landing Page with Dynamic Content from API
52:06 Fetching only the necessary fields from the Content API