Building a Professionally Designed Website with NextJS, TypeScript, and Payload CMS - Episode 4
This is the final Part 4 in our deep-dive into how to develop a professionally designed, high-end NextJS + Payload CMS website from start to finish.
In this episode, we'll finish out the entire site. Buckle up—it's a long one. You'll see how to develop a super dynamic layout builder that puts the exact right amount of control into your admins' hands.
Design by TRBL: https://trbl.design
Payload CMS: https://payloadcms.com
Code for this episode: https://github.com/payloadcms/custom-...
Payload + NextJS Boilerplate Used: https://github.com/payloadcms/nextjs-...
Figma Link:
https://www.figma.com/file/Ul801GH5yj...
The live website!
https://metricstructures.com
Topics:
0:00 - Intro
2:31 - Payload Roadmap
4:11 - Dynamically generated admin descriptions
5:07 - Plugins infrastructure
6:41 - Remaining work to be done
10:00 - Picking up where we left off
11:17 - Building the Heroes
12:35 - Extending Payload's Rich Text Editor
16:29 - Field Conditional Logic
22:05 - Converting SlateJS Rich Text into JSX
25:35 - Creating custom Rich Text Editor components on the frontend
37:12 - Media component
37:34 - Payload's "depth" function
43:41 - Beginning the layout blocks
47:22 - The Call to Action block
59:13 - The Content block
1:00:12 - More Rich Text Editor customization
1:15:14 - The Media block
1:16:23 - Parallax component
1:22:38 - Slider block
1:31:00 - Study Slider block
1:34:19 - Spacer block
1:35:19 - Statistics block
1:45:05 - Sticky Content block
1:56:03 - Forms & Form Submissions
2:15:02 - Background Noise
2:17:30 - Outro