Building a Professionally Designed Website with NextJS & TypeScript - Ep. 1

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.

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!