Around a year ago I adopted Payload CMS for managing beats, artists and content in general for Fast Rhymes. The developer experience with Payload is unparalleled compared to any other CMS I’ve used. This becomes even more evident when I work on client projects that use Sanity or other headless CMS platforms. However, since adopting Payload the plan was always to extend it and customize it to the projects needs.
I first tried extending Payload to make it a fully fledged admin panel with Payload 2. However, it was just more cumbersome than what it was worth, so I abandoned that idea fairly quickly. When Payload 3 launched with the Next.js architecture I knew I had to give this another shot. Payload 3 also came with improvements to how their code was structured, like their UI components being dragged out to a UI package, which greatly simplifies the possibilities to extend the Payload dashboard.
The main pain point of this implementation was the lack of documentation for Payload 3. They have mostly focused on documenting the basics and not things like their UI and auth for custom views. This mean having to look through their source code and ask on their Discord for help. This is only a temporary issue, as they are working on this.
The main features this admin panel solves is:
Managing content has been a part of the admin panel since Payload was adopted for Fast Rhymes. However, push notifications and feedback were custom views running on the Next.js app with a mix of server side and client side code. Since the main Next.js app doen’t have any form of auth flow set up, it was easiest to just use client side firebase auth. While this works, it’s not ideal for the use case of inviting other users later on. In Payload 3 I could just reuse the Payload auth and use server actions for the database queries. This simplified things a lot. If a user has access to that page through the Payload dashbord (which can be configured later on, but for now everyone has access) they can view feedback and send push notifications. No more duplicate authentication.
Linking to other portals is also useful as it gives an overview of the services the project uses. These are also categorized so it’s easier to get to what you want to do. As the team grows this is great for colocating everything in one place, reducing confusion of what can be found where. This is a huge issue in larger organizations, causing a lot of inefficiency. However, still relevant for smaller project as there a often multiple third party services used and required.
Creating an all-in-one admin panel with Payload 3.0 has significantly streamlined the management of Fast Rhymes. By centralizing content management, push notifications, user feedback, and portal links in one authenticated dashboard, it’s eliminated the need for separate authentication for multiple systems and reduced complexity. It’s also reduced the mental overhead of keeping track of third party services in the project.
The improved architecture in Payload 3.0, particularly with its Next.js integration and modular UI components, made this extension much more feasible compared to previous versions. For developers considering a similar approach, Payload proves to be an excellent foundation for building custom admin panels, especially when you need to go beyond basic content management. Its flexibility and developer-friendly architecture make it a strong choice for projects that require a tailored admin panel.
Andor Davoti - 02/01/2025