Building a Professionally Designed Website with NextJS, TypeScript, and Payload CMS - Ep. 1
Tags: typescript, nextjs, javascript, webdev
Published: 2021-03-23 14:51:03

### 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](https://payloadcms.com), I also operate a professional design firm called [TRBL](https://trbl.design). 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.

{% youtube bxWsZTtqs80 %}

### Table of Contents

- [0:00](https://www.youtube.com/watch?v=bxWsZTtqs80&t=0s) - Intro
- [3:16](https://www.youtube.com/watch?v=bxWsZTtqs80&t=196s)​ - Project plan & series overview
- [15:26​](https://www.youtube.com/watch?v=bxWsZTtqs80&t=926s) - Design review
- [25:17](https://www.youtube.com/watch?v=bxWsZTtqs80&t=1517s)​ - Payload introduction
- [33:25](https://www.youtube.com/watch?v=bxWsZTtqs80&t=2005s)​ - Payload + NextJS boilerplate setup
- [43:17​](https://www.youtube.com/watch?v=bxWsZTtqs80&t=2597s) - CMS scaffolding (form submissions, studies, shared Payload fields, etc.)
- [1:00:08](https://www.youtube.com/watch?v=bxWsZTtqs80&t=3608s)​ - The first layout building block - Content
- [1:16:05](https://www.youtube.com/watch?v=bxWsZTtqs80&t=4565s)​ - Globals configuration (mega menu, footer, social media)
- [1:35:53](https://www.youtube.com/watch?v=bxWsZTtqs80&t=5753s)​ - All layout blocks - fast-forward and review
- [1:46:49​](https://www.youtube.com/watch?v=bxWsZTtqs80&t=6409s) - 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!