Posted on Sep 17

I Built a FULL-STACK Challenge Tracker with AI

#devchallenge #kendoreactchallenge #react #webdev

This is a submission for the KendoReact Free Components Challenge.

What I Built

Dev Challenge Tracker is a local-first, one-tab HQ for shipping stellar DEV challenge submissions. Plan challenges, capture tasks and ideas, store research links, and draft publish-ready Markdown—all without leaving the browser or giving up control of your data. The workspace leans on an AI copiloting loop: a KendoReact Chat-driven assistant orchestrates planning steps, executes functions (e.g., structured drafting, tool calls, Nuclia enrichment), and reflects on results so you keep momentum while the agent handles the tedious parts.

Why it hits the brief:

Build without boundaries – paste a challenge link and the app shapes it into a living brief with Markdown everywhere.
Local-first by design – everything stays in the browser; no sign-ups, no sync service, no hidden database.
AI when you want it – drop in a single OpenRouter key to unlock an AI copilot that understands your plan and returns Markdown replies.
Agentic workflow – the assistant plans next steps, triggers function executors, and syncs research via Nuclia so progress compounds automatically.
One workspace, multiple submissions – optimized to help creators juggle several DEV challenges in parallel without losing momentum.

UX touches we obsessed over:

Single AppBar with contextual actions and Nuclia search toggle.
Rounded “panel” cards for Challenges, Ideas, Resources, and Tasks.
Dialog flows built with KendoReact inputs for consistent spacing and accessibility.
AI chat bubble with Markdown rendering, typing indicator, and responsive sizing.

Demo

Live app:
devtohq.vercel.app
Repository:
turazashvili / devto-challenge-hq
Dev Challenge Tracker

This is a submission for the KendoReact Free Components Challenge.

Dev Challenge Tracker is a local-first, one-tab HQ for shipping stellar DEV challenge submissions. Plan challenges, capture tasks and ideas, store research links, and draft publish-ready Markdown: all without leaving the browser or giving up control of your data. The workspace leans on an AI copiloting loop: a KendoReact Chat-driven assistant orchestrates planning steps, executes functions (e.g., structured drafting, tool calls, Nuclia enrichment), and reflects on results so you keep momentum while the agent handles the tedious parts.

Why It Hits the Brief

Build without boundaries – paste a challenge link and the app shapes it into a living brief with Markdown everywhere.

Local-first by design – everything stays in the browser; no sign-ups, no sync service, no hidden database.

AI when you want it – drop in a single OpenRouter key to unlock an AI…
View on GitHub

KendoReact Components Used (Free Tier)

The project ships with 14 distinct free-tier KendoReact components (11 counted toward the challenge requirement). Every component below links to its official docs and the line-of-code evidence.

Package	Components (count)	Code references	Component docs
Layout	AppBar, AppBarSection, AppBarSpacer (3)	`src/components/SharedAppBar.tsx:4` `src/components/SharedAppBar.tsx:70`	AppBar
Buttons	Button, ButtonGroup (2)	`src/components/SharedAppBar.tsx:8` `src/app/(dashboard)/[[...section]]/page.tsx:1073`	Button, ButtonGroup
Dropdowns	DropDownList, MultiSelect (2)	`src/app/(dashboard)/[[...section]]/page.tsx:577` `src/app/(dashboard)/[[...section]]/page.tsx:1269`	DropDownList, MultiSelect
Date Inputs	DatePicker (1)	`src/app/(dashboard)/[[...section]]/page.tsx:1260`	DatePicker
Inputs	Input, TextArea (2)	`src/app/(dashboard)/[[...section]]/page.tsx:1234` `src/app/(dashboard)/[[...section]]/page.tsx:1282`	TextBox/Input, TextArea
Labels	Label (1)	`src/app/(dashboard)/[[...section]]/page.tsx:1281`	Label
Dialogs	Dialog, DialogActionsBar (2)	`src/app/(dashboard)/[[...section]]/page.tsx:1227` `src/app/(dashboard)/[[...section]]/page.tsx:1294` `src/components/AISettingsDialog.tsx:4`	Dialog
Progress Bars	ProgressBar (1)	`src/app/(dashboard)/[[...section]]/page.tsx:597`	ProgressBar

Premium / Trial Components

Two KendoReact pieces fall outside the free tier. We’re transparent about where they appear so judges can evaluate licensing impact.

Package	Components	Code references	Component docs
Conversational UI	Chat	`src/components/AIChatBubble.tsx:622` `src/components/TestChat.tsx:59`	Chat
Data Grid (Table)	Grid, GridColumn	`src/app/(dashboard)/[[...section]]/page.tsx:1078` `src/app/(dashboard)/[[...section]]/page.tsx:1084`	Grid

Code Smarter, Not Harder Prize Entry

We used the KendoReact MCP server (“kendo-react-assistant”) as our AI coding assistant:

Pulled component-specific tips straight from Telerik’s proprietary knowledge base.
Generated Dialog + DropDownList scaffolding when iterating on the challenge workflow UI.
Resolved edge cases (Chat message typing indicator, DropDownList events) without leaving the IDE.

Setup: registered the MCP server in mcp.json, authenticated with our Telerik license, and invoked it via the #kendo-react-assistant tag in terminal sessions.

RAGs to Riches Prize Entry

We wired Nuclia straight into the workspace so research and retrieval stay in the same tab:

Live Nuclia search in the AppBar. The shared AppBar renders the Nuclia web component (loaded via nuclia-widget.umd.js) and positions a custom results overlay when the field gains focus. Creators can type any question and get Nuclia answers, rephrases, and suggestions without leaving the dashboard.
Self-serve RAG settings. A gear icon opens the “RAG Settings” dialog where users paste their API key, knowledge box, zone, and host overrides. We persist everything to localStorage so power users can point the tool at their own Nuclia tenants.
Resource ingestion pipeline. When a new Resource is saved, we convert the metadata to Markdown (mdResource) and POST it through a Next.js /api/nuclia/upload proxy. That proxy resolves zone-aware endpoints and pushes the document into the configured knowledge box—ready to be recalled by the search widget moments later.
Extensible hooks. Helper utilities (mdChallenge, mdTask, mdIdea) map other entities to Markdown so we can graduate more of the workspace into Nuclia-powered recall as the library grows.

That end-to-end loop makes Nuclia more than a checkbox: it actively fuels ideation, keeps notes searchable, and lets teammates reuse hard-earned research while they chase the next DEV challenge.

Architecture & Experience Highlights

Local storage persistence with a dedicated Tracker context for Challenges, Tasks, Resources, and Ideas.
Dialog-driven CRUD flows wired to Nuclia helpers for future AI knowledge base sync.
Markdown rendering everywhere (including AI replies) for copy-paste-ready DEV posts.
AI agent pipeline (Chat + functionExecutor + Nuclia ingestion) loops through plan → act → learn cycles without leaving the UI.
Responsive AppBar with Nuclia search slot, settings gear, and quick-action ButtonGroup.
AI chat bubble sized to available viewport with custom message template and “processing” state.

Why It Matters

DEV challenges move fast. Dev Challenge Tracker gives creators a single place to brainstorm, plan, execute, and polish—without waiting on backend infrastructure or losing track of progress. The KendoReact free suite handled the UI heavy lifting so we could focus on flow, accessibility, and delight.