Building a Professionally Designed Website with NextJS, TypeScript, and Payload CMS — Ep. 1
Have you ever wondered how professional design firms go about building high-end websites? If so, this series is for you.
Hi, my name is James. Outside of co-founding Payload CMS, I also operate a professional design firm called TRBL. There, we specialize in custom UX and full-stack development — usually TypeScript front-to-back. I’ve been a designer and full-stack developer for around 10 years now and self-employed for six. I absolutely love the work that I do.
I have been working on a new video series that describes, in detail, how professional design firms like TRBL go about building completely custom websites using a headless CMS, React, and TypeScript. This series is going to be a bit different than the typical to-do app style videos and I want it to show a much deeper level of project approach and code mentality — all the way from how to scaffold centralized, reusable TypeScript types to how to build websites with React layout-building components.
https://www.youtube.com/watch?v=bxWsZTtqs80
Table of Contents
- 0:00 — Intro
- 3:16 — Project plan & series overview
- 15:26 — Design review
- 25:17 — Payload introduction
- 33:25 — Payload + NextJS boilerplate setup
- 43:17 — CMS scaffolding (form submissions, studies, shared Payload fields, etc.)
- 1:00:08 — The first layout building block — Content
- 1:16:05 — Globals configuration (mega menu, footer, social media)
- 1:35:53 — All layout blocks — fast-forward and review
- 1:46:49 — Recap
Series Goals
One of my goals with this series is to provide a window into how professional design firms go about delivering sites with a lot of value to clients that absolutely need that level of quality, and are willing to pay for it. The site that we’ll be building is actual, real-world work, and although it’s more of a small-to-medium budget for us, the principles involved can be used to deliver websites where clients will happily seek out talented designers / developers and pay $100K+, because they need it.
Another goal of mine is that I want to challenge our industry to find the clients that value the work that we do, and I want developers to stop selling themselves short. Also, don’t worry about the Squarespaces of the world. Find the budgets that reward you for your skill. There is a segment of the market that still absolutely requires high-end development standards and approaches, and it’s alive and well.
Feedback is Appreciated
This is episode 1 — and it’s my first ever YouTube video. I would greatly appreciate any candid feedback that this community has for me, and if you haven’t already, please give Payload a shot. We’d love to hear your thoughts.
Let us know what you think, and thank you!
