This is the original front end of the API platform’s production project, accessed through the existing “API Keys” entry on the public site. Users, upstreams, models, and usage are synthetic demo data; configuration changes apply only to this demo and reset when refreshed. It does not connect to real providers or payment services. The front end is adapted from an open-source project and follows the LGPL-3.0 license。
Project Overview
The Problem to Solve
How can existing API capabilities be made easy for individual users to access, while supporting management across multiple sites?
The API platform is built on an open-source API management framework. Its existing underlying capabilities need to be presented to individual users through product pages, setup guides, and access points. At the same time, the backend needs to account for how multiple sites are organized.
I divided the project into two paths: user access and site management. The first focuses on helping users understand the product and get started, while the second focuses on the management structure for multiple sites.
My Work · Customization of an Open-Source API Management Framework · User Experience and Multi-Site Design
I was responsible for adapting the overall project pages based on the open-source API management framework and building the foundation for multi-site OEM in the backend. This case study highlights my work on product organization, page design, and management workflows; the underlying capabilities come from the open-source API management framework.
Reorganized the product pages for individual users.
Organized API integration documentation, authentication instructions, and request examples.
Built a multi-site OEM management structure in the backend.
Considered the entry points and information needs of both users and administrators.
Project Foundation · Based on an Open-Source API Management Framework
Product Pages for Individual Users
Adjusted the overall pages based on the open-source API management framework, organizing feature introductions, guidance, and access points to better suit individual users.
API Integration Documentation
Presented API endpoints, authentication methods, model information, and request examples in one place, so users can find the information they need to configure their integration.
Multi-Site OEM Structure
Provided a backend structure for managing multiple sites, organized around site configuration and presentation, with separate areas for the public-facing product and backend management.
Delivered
Product pages and documentation for individual users, along with the foundational structure for multi-site management.
API Platform brings together a redesigned interface for individual users, integration documentation, and a backend OEM structure in one project. The frontend explains how to understand and use the APIs, while the backend handles how multiple sites are organized.
It documents my continued design and development work on an existing open-source project, and shows how an operations perspective can shape product entry points, explanations, and management interfaces.
Looking Back on This Work
Integration products have many seemingly small details that directly affect usability: what an entry point is called, where instructions appear, how easy it is to find a request example, and which site a configuration applies to.
I focused on connecting these details into a clear path. A multi-site structure also needs to make clear what is shared and what belongs to each site, so the frontend messaging and backend configuration don't gradually drift apart.
Clearly explain the open-source foundation and the scope of my modifications.Design separate paths for users and administrators.Treat documentation as part of the product's user flow.
Leave your contact details, and I’ll get in touch with you personally
Start accelerating your business with AIChat with me
Leave your contact details, and I’ll get in touch with you personally; if you have a question first, you can also type it below.Your message will be sent to me in real time. Replies will appear here, and you can still see them if you close the webpage and come back later.
Your mobile number will only be used to contact you and will not be made public.
Hello, I’m Yaki Nie. Leave your mobile number, name, and industry, and I’ll get in touch with you as soon as possible to discuss how your business can use AI to accelerate growth.