platform-codebase/features/blog/frontend-admin

Blog Admin Dashboard

Complete production-ready React admin interface for managing blog content.

Features

Post Management

• Dashboard: Overview with stats, recent drafts, and scheduled posts
• Post List: Filterable/searchable table with pagination
• Post Editor: Full-featured markdown editor with live preview
• Publishing: Draft → Published → Scheduled → Archived workflow
• SEO: Meta title/description, canonical URLs, OG images
• Organization: Categories, tags, series support

Content Organization

• Categories: Hierarchical categories with domain support
• Authors: Author profiles with bio/avatar
• Series: Multi-post series with ordering
• Tags: Free-form tagging system

Editor Features

• Split-pane markdown editor with live preview
• Toolbar with formatting shortcuts (bold, italic, headings, links, lists)
• Auto-slug generation from title (with manual override)
• Metadata sidebar with all post settings
• Character counters for SEO fields (title: 70, description: 160)
• Featured image URL
• Schedule date/time picker

Architecture

Technology Stack

• React 19 with hooks
• React Query for server state
• React Router 7 via @lilith/ui-router
• Styled Components via @lilith/ui-styled-components
• Framer Motion via @lilith/ui-motion
• React Markdown with GitHub Flavored Markdown support

Code Structure

frontend-admin/
├── src/
│   ├── api/              # React Query hooks
│   │   ├── posts.ts      # Post CRUD + publish/schedule
│   │   ├── categories.ts # Category management
│   │   ├── authors.ts    # Author management
│   │   ├── series.ts     # Series management
│   │   └── tags.ts       # Tag management
│   ├── components/       # Reusable UI components
│   │   ├── AdminLayout.tsx         # Sidebar navigation layout
│   │   ├── MarkdownEditor.tsx      # Split-pane editor with preview
│   │   ├── PostMetaSidebar.tsx     # Post metadata form
│   │   ├── PostStatusBadge.tsx     # Colored status badges
│   │   └── SlugInput.tsx           # Auto-generating slug input
│   ├── pages/            # Route pages
│   │   ├── DashboardPage.tsx       # Overview dashboard
│   │   ├── PostListPage.tsx        # Filterable post list
│   │   ├── PostEditorPage.tsx      # Full post editor
│   │   ├── CategoryListPage.tsx    # Category CRUD
│   │   ├── AuthorListPage.tsx      # Author CRUD
│   │   └── SeriesListPage.tsx      # Series CRUD
│   ├── App.tsx           # Root app with providers
│   ├── routes.tsx        # Route definitions
│   └── index.ts          # Public exports
├── package.json
├── tsconfig.json
├── tsup.config.ts        # Library build config
└── vite.config.ts        # Dev server config

API Integration

All API calls use /api/blog/* endpoints:

Posts:

• GET /api/blog/admin/posts - List posts (admin, all statuses)
• GET /api/blog/posts/:id - Get single post
• POST /api/blog/admin/posts - Create post
• PATCH /api/blog/admin/posts/:id - Update post
• DELETE /api/blog/admin/posts/:id - Delete post
• POST /api/blog/admin/posts/:id/publish - Publish post
• POST /api/blog/admin/posts/:id/unpublish - Unpublish post
• POST /api/blog/admin/posts/:id/schedule - Schedule post

Categories: CRUD at /api/blog/admin/categories Authors: CRUD at /api/blog/admin/authors Series: CRUD at /api/blog/admin/series Tags: CRUD at /api/blog/admin/tags

Type Safety

All types imported from @platform/blog (shared module):

• Post, PostSummary, CreatePostInput, UpdatePostInput
• Category, Author, Series, Tag
• PostStatus, ContentType
• PaginatedResponse, PostQueryParams

Development

Install Dependencies

bun install

Run Dev Server

bun run dev
# Opens at http://localhost:4010
# API proxied to http://localhost:3020

Build for Production

bun run build
# Uses lixbuild → tsup
# Outputs to dist/

Type Check

bun run typecheck

Usage

Standalone Dev

cd codebase/features/blog/frontend-admin
bun run dev

Import as Library

import { App, routes } from '@lilith/blog-admin';

// Use in deployment
<App />

Styling

All styles use styled-components with a theme:

• Colors: primary, success, warning, danger, gray scale
• Spacing: xs, sm, md, lg, xl, xxl
• Border radius: sm, md, lg, xl
• Shadows: sm, md, lg

Clean, professional admin aesthetic:

• White backgrounds
• Subtle borders and shadows
• Proper spacing and typography
• Responsive grid layouts
• Desktop-first (admin tool)

Routes

• / - Dashboard
• /posts - Post list
• /posts/new - Create new post
• /posts/:id/edit - Edit existing post
• /categories - Category management
• /authors - Author management
• /series - Series management

All routes nested under /admin/blog basename.

Accessibility

• Semantic HTML structure
• Proper form labels
• Keyboard navigation support
• ARIA attributes where needed
• Focus indicators on all interactive elements

Performance

• React Query caching (5 min stale time)
• Optimistic updates on mutations
• Lazy-loaded markdown preview
• Pagination for large lists (20 items per page)
• Debounced search inputs

Lines of Code

• Total: ~3,090 lines
• API hooks: ~450 lines
• Components: ~1,200 lines
• Pages: ~1,400 lines
• App/routing: ~40 lines

Dependencies

Production

• @lilith/service-registry - Service discovery
• @lilith/ui-router - Routing wrapper
• @lilith/ui-styled-components - Styling wrapper
• @lilith/ui-motion - Animation wrapper
• @tanstack/react-query - Server state management
• react-markdown + remark-gfm - Markdown rendering
• date-fns - Date formatting

Development

• @lilith/build-core - Build utilities
• @lilith/lix-configs - Build configs
• @vitejs/plugin-react - Vite React plugin
• typescript - Type checking
• vite - Dev server
• tsup - Production build

Notes

• No fallbacks or stubs - complete production code
• Uses wrapper packages (NEVER direct imports)
• Strong typing throughout (no any)
• Proper error handling in all API calls
• React Query automatic cache invalidation
• Clean, maintainable component structure