Agentick-FE

Agentick-FE is the frontend application for Agentick, an AI-assisted project management platform. The app focuses on team/project operations, task execution, schedules, inbox workflows, and AI-supported risk/estimation experiences.

Tech Stack

React 19
TypeScript
TanStack Start
TanStack Router
TanStack Query
TanStack Form
TanStack Table
Ky v2
Zod
Tailwind CSS v4
shadcn/ui with Base UI/Radix style components
Zustand
Vitest
Biome

Getting Started

Prerequisites

Node.js LTS
pnpm
Git

Install pnpm if needed:

npm install -g pnpm

Install

git clone https://github.com/daFoggo/Agentick-FE.git
cd Agentick-FE
pnpm install

Environment

Create .env from .env.example and configure the backend URLs:

VITE_API_CORE_URL=http://localhost:8000
VITE_API_AI_URL=http://localhost:8001
VITE_APP_NAME="Agentick"

The frontend builds API roots in src/configs/env.ts:

VITE_API_CORE_URL -> core API
VITE_API_AI_URL -> AI API

Development

pnpm dev

The app runs on the Vite dev server, usually http://localhost:3000.

Verification

Use these checks before merging larger work:

pnpm typecheck
pnpm build
pnpx @biomejs/biome check --write

Project Structure

src/
|-- components/          # shared UI, common organisms, layout
|-- configs/             # environment and app config
|-- constants/           # shared constants and option lists
|-- features/            # feature modules
|-- hooks/               # shared React hooks
|-- lib/                 # third-party setup and cross-cutting helpers
|-- routes/              # TanStack Router route tree and orchestration
|-- stores/              # global client state
`-- types/               # shared TypeScript types

Feature modules usually follow this shape:

src/features/[feature]/
|-- components/
|-- server.ts
|-- functions.ts
|-- queries.ts
|-- schemas.ts
`-- index.ts

Project Documentation

The current canonical documentation lives in docs/handbook/.

Document	Purpose
`docs/handbook/00_index.md`	Handbook index and reading order
`docs/handbook/01_project_overview.md`	Product overview, scope, and tech stack
`docs/handbook/02_architecture.md`	Frontend architecture and boundaries
`docs/handbook/03_feature_development.md`	Feature module development rules
`docs/handbook/04_tanstack_start_query_router.md`	TanStack Start/Router/Query/Ky patterns
`docs/handbook/05_ui_state_patterns.md`	UI state, loading, error, empty, and compact patterns
`docs/handbook/06_quality_rules.md`	Quality, consistency, and pre-merge checks
`docs/handbook/07_development_checklist.md`	Practical development and review checklist

Tech Stack References

Agent Instructions

Automation agents and coding assistants should read AGENTS.md first. Detailed rules are in .agents/rules/ and the handbook documents above.

Name	react-best-practices
Description	React performance optimization guidelines. This skill should be used when writing, reviewing, or refactoring React code to ensure optimal performance patterns. Triggers on tasks involving React components, data fetching, bundle optimization, or performance improvements.

react-best-practices

SKILL.md