This is Part 3 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’re diving deep into React. You’ll learn how a design agency organizes its components and you’ll start to see a lot of the CSS boilerplate that we defined in Episode 2 start being put to use. We’re going to build and animate the Header, Footer, and Mega Menu—all in React and TypeScript.
Design by TRBL: https://trbl.design
Payload CMS: https://payloadcms.com
Code for this episode: https://github.com/payloadcms/custom-website-series/tree/episode-3
Payload + NextJS Boilerplate Used: https://github.com/payloadcms/nextjs-custom-server
Topics:
0:00 – Intro
3:33 – The logo – an SVG React component
12:02 – Animating the hamburger button
25:13 – Retrieving menu global data from Payload
32:27 – Building the main menu
38:48 – Building a CMSLink component
48:25 – The animated “Let’s Talk” SVG call to action
55:35 – Building the Footer
1:14:06 – Outro
