## Overview

LiveStart Admin is the operation dashboard for the LiveStart product. The goal was to turn backend management capabilities into a clear, efficient interface for daily operations: browsing records, searching data, reviewing details, creating new entries, and editing existing information.

Unlike a marketing-facing website, this project is designed for repeated use by internal users. The interface prioritizes density, predictable navigation, and fast transitions between list, detail, and edit workflows.

## What I Built

- A protected admin experience with login, authenticated dashboard pages, and permission-aware navigation.
- A management engine that can organize backend modules from OpenAPI metadata instead of hardcoding every page by hand.
- List-first workflows with pagination, search, detail views, create/edit pages, and delete actions.
- Right-side Sheet interactions that let users inspect or edit records without losing their current filters and pagination context.
- Entity-level configuration for modules such as cities, venues, artists, and system users.

## Product Thinking

The main design decision was to keep the admin interface quiet and work-focused. Instead of building decorative dashboards, the product emphasizes table readability, stable page structure, and low-friction record operations.

For operational tools, the important question is not whether the page looks impressive at first glance, but whether users can complete the same actions many times without confusion. That shaped the interaction model around lists, Sheets, contextual editing, and module-level navigation.

## Engineering Highlights

- Built with Next.js, React, Tailwind CSS, and shadcn/ui-style components.
- Uses a modular structure across layout, shared UI, API clients, navigation state, authentication, dashboard modules, engine rendering, and entity definitions.
- Separates common admin rendering logic from entity-specific configuration, making new backend modules easier to add over time.
- Keeps route pages focused on composition while reusable behavior lives in domain-oriented modules.


## 项目概述

LiveStart Admin 是 LiveStart 产品的后台管理系统，目标是把后端管理能力整理成一个清晰、高效、适合日常运营使用的界面。它覆盖记录浏览、搜索、详情查看、新建、编辑和删除等常见后台工作流。

这个项目不是面向访客的展示页，而是面向内部用户的高频操作工具。因此设计重点放在信息密度、导航稳定性和列表到详情、编辑流程之间的切换效率上。

## 我负责的内容

- 搭建受保护的后台管理体验，包括登录、鉴权后的后台页面和权限感知的导航结构。
- 设计管理引擎，根据 OpenAPI 元数据组织后台模块，减少为每个模块重复手写页面的成本。
- 实现以列表为核心的管理流程，包括分页、搜索、详情、新建、编辑和删除。
- 使用右侧 Sheet 承载记录查看与编辑，让用户在不丢失当前筛选、分页上下文的情况下处理数据。
- 为城市、场地、艺人、系统用户等实体提供模块级配置。

## 产品思考

后台系统的重点不是第一眼的视觉冲击，而是用户能否稳定、快速、低成本地重复完成操作。因此这个项目没有采用营销页式的表现方式，而是优先保证表格可读性、页面结构稳定和操作路径清晰。

围绕这个目标，整体交互更偏向“列表优先”：用户先在列表中定位数据，再通过详情、Sheet 或完整页面完成后续管理动作。

## 工程亮点

- 基于 Next.js、React、Tailwind CSS 和 shadcn/ui 风格组件构建。
- 按布局、通用 UI、API 客户端、导航状态、鉴权、后台模块、引擎渲染和实体定义拆分代码职责。
- 将通用后台渲染逻辑与实体配置解耦，后续新增后台模块时更容易扩展。
- 路由页面只负责装配，复用逻辑沉淀在业务模块和引擎层中，降低维护成本。


A production-oriented admin dashboard for LiveStart, designed around high-density data management, OpenAPI-driven modules, and efficient CRUD workflows.

为 LiveStart 构建的后台管理系统，面向高密度数据管理、OpenAPI 驱动模块和高效 CRUD 工作流设计。

Cici Zhao

Hi, I'm Cici

Featured Projects

Tools that I have used

What I've been working on

Lets work together!