Akkarapon Phikulsri

Posted on Feb 14

DeltaView - AI-Driven JSON Diff Viewer Built with GitHub Copilot

#devchallenge #githubchallenge #cli #githubcopilot

GitHub Copilot CLI Challenge Submission

This is a submission for the GitHub Copilot CLI Challenge

DeltaView - AI-Driven Diff Viewer Built with GitHub Copilot

What I Built

DeltaView is a powerful web-based JSON diff viewer that showcases AI-driven development using GitHub Copilot. The application parses JSON inputs, generates structural diffs, and displays them with beautiful syntax highlighting and side-by-side comparison views.

Key Features:

Intelligent JSON Diff Engine - Recursively compares JSON structures and categorizes changes (added, removed, modified)
Real-time Diff Visualization - Side-by-side comparison with color-coded changes
Syntax Highlighting - Professional code display with proper formatting
Error Handling - Graceful handling of invalid JSON and edge cases
Type-Safe Implementation - Built with TypeScript for reliability
Responsive UI - Modern, clean interface built with React, TailwindCSS, and shadcn/ui

Technology Stack:

Frontend: React + TypeScript
Styling: TailwindCSS + shadcn/ui components
Build Tool: Bun (ultra-fast JavaScript runtime)
Development Methodology: AI-driven architecture with markdown specifications

🎬 Features & Demo

Live demo available at: deltaview.refactorroom.com

DeltaView - Fast & Secure JSON Comparison Tool

Compare JSON objects instantly with visual side-by-side diffs. Format, validate, and analyze JSON structures securely. No sign-up required.

deltaview.refactorroom.com

1. 📝 JSON Compare Input Panel

Easily input two JSON objects to compare. The interface features:

Side-by-side JSON input panels
Format buttons to validate and beautify JSON
Load example data for quick testing
Real-time error validation
Support for large JSON structures

2. 🔍 JSON Comparison Results

Get detailed, line-by-line diff visualization:

Orange highlights - Removed or old values
Purple highlights - Added or new values
Character-level precision - See exactly what changed within each line
Copy buttons - Easily copy individual sides
Expandable view - Toggle between split and fullscreen modes
Line numbers for easy reference

Key Comparison Features:

Recursive diff of nested objects
Array element tracking
Property addition/removal detection
Value modification detection
Type change detection

3. 📊 JSON Graph Visualization

Visualize JSON structure as an interactive graph:

Node-based representation of objects and arrays
Visual relationship mapping
Interactive node exploration
Zoom and pan controls
Perfect for understanding complex JSON hierarchies

Graph Features:

Auto-layout for clarity
Color-coded node types
Expandable/collapsible nodes
Connection visualization
Ideal for API responses and config files

4. 📋 Table View

Convert JSON data into structured table format:

Automatic table generation from JSON objects
Column headers from object keys
Clean, organized data presentation
Sortable columns
Perfect for data-driven JSON

Table Features:

Auto-detect and format columns
Handle nested objects gracefully
Array data visualization
Easy copy and export functionality
Responsive column sizing

5. ✨ JSON Formatter

Format, validate, and beautify JSON with professional formatting:

One-click JSON formatting
Automatic indentation (2 spaces)
Syntax highlighting
Error detection with line numbers
Copy formatted output

Formatter Capabilities:

Validate JSON syntax
Detect and report errors
Pretty-print with proper indentation
Remove unnecessary whitespace
Support for large files

🌐 Technology & Performance

Instant Validation - Real-time error checking
Responsive Design - Works perfectly on desktop, tablet, and mobile
Dark/Light Mode - Comfortable viewing in any lighting
Fast Processing - Handles large JSON files efficiently
Type-Safe - Built with TypeScript for reliability

My Experience with GitHub Copilot CLI

How I Used GitHub Copilot CLI

Architecture Definition - Used natural language in docs/architecture.md to define the diff engine specifications, component structure, and data contracts. GitHub Copilot CLI helped generate detailed TypeScript interfaces.
Component Generation - Leveraged gh copilot in the terminal to:
- Generate React component scaffolds with proper TypeScript types
- Create utility functions following project conventions
- Generate UI component wrappers for shadcn/ui integration
Complex Logic Implementation - Used Copilot Chat for:
- Implementing the recursive JSON diff algorithm
- Handling edge cases and data type comparisons
- Creating proper error handling patterns
Code Quality & Consistency - Copilot CLI suggested:
- Linting fixes and TypeScript improvements
- Best practice patterns for React hooks and state management
- Proper accessibility attributes for UI components

Impact on Development

Productivity Gains:

⚡ 60-80% faster development - Boilerplate and repetitive code generation done by AI
🎯 Consistency - All components follow the same patterns defined in agent markdown files
📚 Better Documentation - Architecture markdown files serve as both specs and living documentation
🐛 Fewer Bugs - Type-safe implementations and consistent error handling patterns

Developer Experience:

Natural language to code conversion eliminated context switching
AI understood project conventions and applied them automatically
Focus shifted from syntax to architecture and user experience
Iterative refinement became faster with AI assistance

Key Learnings

Markdown-First Development - Well-structured architecture docs enable AI to maintain consistency across large codebases
Context is King - Providing clear specifications in agent files dramatically improves code quality
Collaboration Model - Human architects design system, AI implements details, humans review and refine
Scalability - This methodology scales better than traditional development for complex projects

This project demonstrates that modern web applications can be built faster, with higher quality, and better maintainability when humans and AI work together with clear architectural specifications.

🚀 Get Started with GitHub Copilot - Easy, Fun & Productive!

Why GitHub Copilot?

GitHub Copilot transforms your coding experience into a productive conversation with AI! Whether you're building new features, debugging code, or learning new frameworks, Copilot is your 24/7 coding companion that makes development easier, faster, and more enjoyable.

✨ Key Benefits

🎯 Easy to Use - Just install and start coding! Copilot understands natural language and suggests code as you type
⚡ Boost Productivity - Cut development time in half by letting AI handle boilerplate, repetitive tasks, and scaffolding
💡 Learn While You Code - Discover best practices, new APIs, and coding patterns through intelligent suggestions
🎨 Focus on Creativity - Spend less time on syntax, more time on solving problems and building amazing features
🤖 CLI Power - Use gh copilot in your terminal for instant help, command suggestions, and code generation

📦 Super Simple Installation

Getting started with GitHub Copilot is as easy as 1-2-3:

Install the Extension - One click in VS Code or your favorite IDE
Sign In - Connect with your GitHub account
Start Coding - That's it! Copilot is ready to assist you

🎉 Why Developers Love It

"Instead of manually writing everything from scratch, I just describe what I want and Copilot generates it. This cuts out boilerplate and lets me focus on the actual logic and user experience."

Key Features That Make Coding Fun:

Natural Language → Code: Describe what you want in comments, get working code instantly
Context-Aware: Understands your project structure and adapts to your coding style
Multi-Language: Works seamlessly with dozens of programming languages
Terminal Integration: GitHub Copilot CLI for command suggestions and explanations right in your terminal
Real-Time Assistance: Get suggestions as you type, no interruptions to your flow

💪 Productivity Boosters

Generate entire functions from a single comment
Convert ideas into working code in seconds
Automate repetitive coding tasks
Get instant code explanations and documentation
Fix bugs faster with AI-powered suggestions

Ready to supercharge your coding? Get GitHub Copilot today!

🤖 AI-Driven Development with Agent Markdown Files

This project demonstrates a powerful AI-first development methodology using structured markdown documentation to guide AI coding agents. Instead of traditional specification documents, we use agent-optimized markdown files that serve as both documentation and instruction sets for AI assistants like GitHub Copilot.

📋 The Agent MD File Pattern

Our docs/ folder contains markdown files specifically designed for AI agents:

docs/
  ├── agent.md              # Core agent instructions & principles
  ├── architecture.md       # System architecture & structure
  ├── coding-standards.md   # Code quality rules
  ├── prompt.md             # Initial project prompt
  ├── ui-guidelines.md      # UI/UX specifications
  ├── vision.md             # Project scope & constraints
  └── tasks/                # Task breakdown

🎯 Why This Approach Works

Traditional Development:

Write specs → Translate to code → Review → Refactor
High cognitive load on developers
Specs often become outdated
Inconsistent implementation

AI-Driven Development:

Write clear markdown requirements → AI generates code → Human reviews
AI maintains consistency across codebase
Documentation stays synchronized with code
Faster iteration cycles

🔧 How We Use Agent Files

1. Architecture as Code (architecture.md)

Defines the entire system structure, component responsibilities, and technical constraints:

Tech stack decisions (React, TypeScript, shadcn/ui)
File organization and structure
Data contracts and interfaces
Performance constraints
Non-goals and boundaries

AI Agent Benefit: Understands the full context and makes consistent architectural decisions.

2. Agent Instructions (agent.md)

Core principles and rules for the AI coding agent:

Code style preferences
Component patterns to follow
JSON handling rules
UI tone and approach
Error handling standards

AI Agent Benefit: Maintains code quality and follows project conventions automatically.

3. Project Prompt (prompt.md)

The initial project specification in natural language:

Feature requirements
Component structure
UX guidelines
API contracts

AI Agent Benefit: Can regenerate or extend features while staying aligned with original vision.

4. Vision Document (vision.md)

Clear boundaries and constraints:

What the project IS
What the project IS NOT
Scope limitations

AI Agent Benefit: Prevents scope creep and keeps AI focused on core functionality.

✨ Benefits of AI-Driven Development

🚀 Speed

Generate entire components from markdown specifications
Boilerplate elimination – AI handles repetitive code
Parallel development – AI works on multiple files simultaneously

🎯 Consistency

Architectural alignment – AI follows defined patterns
Code style uniformity – Automatic adherence to standards
No drift – Documentation and code stay in sync

📚 Living Documentation

Markdown files are human-readable project docs
AI references them for every code generation
Easy to update and maintain

🧠 Knowledge Transfer

New team members read markdown files
AI onboards instantly with same context
Reduces tribal knowledge problems

🛠️ Practical Workflow Example

Step 1: Manual Project Initialization

Before leveraging GitHub Copilot, we start with a basic project setup. This project was initialized using Bun:

bun init

After running bun init, your project structure is ready:

This creates the initial project structure with:

Basic package.json
TypeScript configuration
Entry point files

Why manual first? This establishes the foundation and project structure that Copilot will then enhance and build upon. You control the tech stack decisions, and AI handles the implementation details.

Step 2: Trust Your Workspace

When you open your project folder in VS Code, you'll need to trust the workspace to enable all features:

Click "Yes, I trust the authors" to allow VS Code and GitHub Copilot to:

Access your project files
Provide context-aware suggestions
Run scripts and tools
Enable full extension functionality

This is a one-time security step that ensures you're comfortable with the code in your workspace.

Step 3: Start Prompting with Copilot

Now you're ready to start working with GitHub Copilot! Open the Copilot chat and start describing what you want to build:

Simply describe your requirements in natural language:

"Create a JSON formatter component following docs/architecture.md"
"Build a diff viewer with syntax highlighting"
"Add error handling for invalid JSON input"

Copilot understands your project context and generates code that fits your architecture!

Step 4: AI Takes Over Development

Once the foundation is set, GitHub Copilot accelerates development:

Scenario: Add a new "Export to CSV" feature

Traditional Approach:

Write feature spec
Manually code the export logic
Create UI components
Write tests
Update documentation
Code review
Refactor

AI-Driven Approach:

Update docs/architecture.md with CSV export requirements
Ask Copilot: "Implement CSV export feature following docs/architecture.md"
AI generates:
- Export logic in lib/export/csv.ts
- UI button component
- Integration with existing panels
- Error handling
- TypeScript types
Human reviews and refines
Documentation already updated (step 1)

Time saved: 60-80% reduction in implementation time

📖 Example: JSON Diff Implementation

Our architecture.md specifies:

## Diff Engine
Must be:
- Structural (parse JSON first)
- Recursive
- Deterministic
- Library-free

type DiffEntry = {
  path: string
  type: "added" | "removed" | "modified"
  oldValue?: unknown
  newValue?: unknown
}

AI Agent reads this and generates:

Complete recursive diff algorithm
Type-safe implementation
Proper error handling
Exact data contract adherence

Developer role: Review logic, test edge cases, refine algorithm

💡 Best Practices for Agent Markdown Files

Be Specific, Not Vague
- ❌ "Make it look nice"
- ✅ "Use monospace font, 2-space indentation, subtle colors (green for added, red for removed)"
Define Data Contracts
- Include TypeScript types in markdown
- Specify exact field names and types
- Show example inputs/outputs
Set Boundaries
- Explicitly state what NOT to do
- Define scope limitations
- Prevent feature creep
Keep It Organized
- One concern per file
- Cross-reference related files
- Use clear headings
Write for Both AI and Humans
- Natural language that humans can read
- Structured format AI can parse
- Examples and counterexamples

🎓 Getting Started with Agent-Driven Development

Create a docs/ folder in your project
Write an architecture.md – Define your system structure
Add agent.md – Specify coding principles and patterns
Create vision.md – Set clear boundaries
Reference these files when working with GitHub Copilot
Iterate – Update markdown files as requirements evolve

🔮 The Future of Development

AI-driven development with agent markdown files represents a paradigm shift:

Documentation-first development
AI as implementation partner
Human as architect and reviewer
Faster, more consistent codebases

This project (deltaview.refactorroom.com) was built almost entirely using this methodology, demonstrating that complex applications can be developed with AI assistance while maintaining high code quality and clear architecture.

🚀 Deploying to Cloudflare Pages

DeltaView is deployed to Cloudflare Pages for fast, global distribution. Here's how to deploy:

Prerequisites

Cloudflare Account - Sign up at cloudflare.com
Wrangler CLI - Install with:

   npm install -g wrangler

Authentication - Run wrangler login to connect your account

Your Current Setup

Your project is configured for Cloudflare Pages with:

Project name: deltaview
Build output: dist/
Build command: bun run build.ts

Deployment Steps

1. Authenticate with Cloudflare

wrangler login

2. Build Your Project

bun run build.ts

This generates the dist/ folder with your static assets.

3. Deploy to Pages

wrangler pages deploy dist

Or deploy to a specific environment:

wrangler pages deploy dist --branch=production
wrangler pages deploy dist --branch=preview

4. Add Custom Domain (via Dashboard)

Go to Cloudflare Dashboard
Select deltaview project
Navigate to Settings → Custom domains
Add your domain (e.g., deltaview.refactorroom.com)

Using Package Scripts

We've provided convenient npm scripts in package.json:

bun run pages:build      # Build the project
bun run pages:deploy     # Deploy to Pages
bun run pages:dev        # Local Pages preview

CI/CD Automatic Deployment

For automatic deployments on every push:

Go to Cloudflare Dashboard
Select deltaview project → Settings → Build and deployment
Connect your GitHub repository
Configure:
- Build command: bun run build.ts
- Build output directory: dist
Push to main branch - deployment happens automatically!