A modular, API-driven web interface designed to simplify interactions with task-based or agentic backends.
The frontend demonstrates clean architecture, context-aware UI updates, and Markdown-based content editing.
This project provides a modern, framework-based frontend that integrates seamlessly with any REST-style backend exposing agentic or workflow-oriented APIs.
Key Features
- Markdown Editing: Built-in editor with autosave, syntax highlighting, and live preview.
- Dynamic API Integration: Configurable API layer with error handling, retries, and response normalization.
- Clean UI: Tailwind + shadcn components for consistent, minimalist presentation.
- Notifications: Context-aware toasts and alerts for real-time user feedback.
- Background Task Tracking: Supports real-time task monitoring via periodic polling or Server-Sent Events (SSE), with live progress indicators and status updates.
- State Management: Reactive context and hooks to synchronize component state across routes and workflows.
- Agentic Workflow Interface: Structured layout for multi-step operations such as content generation, review, and result synthesis.
The project follows a strict separation of concerns:
| Layer | Responsibility |
|---|---|
| API Layer | Handles network requests, transformation, and retries — no UI dependencies. |
| Hooks / Logic Layer | Processes API responses, manages application state, and provides reusable logic. |
| Components | Declarative and presentation-only; render UI, handle toasts, and display loading/error states. |
| Pages | Compose components into task-specific flows (Creation, Tasks, Chapters, Settings, etc.). |
| Page | Purpose | Example Interactions |
|---|---|---|
| Creation Wizard | Guides users through a structured, multi-step creation process (e.g. from idea to final output) | Triggers backend workflows and monitors progress |
| Tasks / Queue | Displays ongoing or completed jobs with real-time status updates | Fetches live task data and listens for event streams |
| Chapters / Manuscript | Lets users browse, view, or edit Markdown-based documents with change tracking | Loads document lists, highlights, and revision states |
| Configuration / Settings | Manages application settings, provider credentials, and model preferences | Reads and updates backend configuration endpoints |
| **Providers ** | Shows connectivity and performance status for linked AI or service providers | Sends lightweight test requests and visualizes results |
-
Error Handling:
- Components handle user-facing feedback via toasts or inline alerts.
-
UI Design System:
- TailwindCSS + shadcn for layout and consistent theming.
- Reusable UI primitives for cards, modals, loaders, and inputs.
-
Context Awareness:
- Reactive state hooks and toast feedback adapt to workflow state.
- Each page intelligently updates only affected regions.
-
Mock Backend Compatible:
- Works with local mock APIs during development.
- Switchable base URL (
/api/v1/) for integration with real backends.
This repository contains a redacted frontend-only build of a larger private project.
Some implementation details, files, and API integrations have been intentionally omitted or modified to protect client information and credentials.
The included code is for demonstration and portfolio purposes only, showcasing:
- Frontend architecture
- UI design
- State management
- API interaction patterns
It is not a complete or production-ready implementation.