DEV Community: Aditya Mahajan

ReefFlow Hub: Killing the Developer Context-Switching Tax with a Unified Local-First Workspace 🌊

Aditya Mahajan — Sat, 30 May 2026 07:33:14 +0000

An in-depth technical case study on consolidating fragmented developer tools into a unified, local-first workspace featuring a hybrid AI copilot, an interactive SQL console, and high-fidelity glassmorphic aesthetics.

Executive Summary & The Vision
High-Level Architecture & Technology Stack
The Database Layer: Coral SQL Engine Integration
The Backend Bridge: Node.js & Express CLI Wrapper
The Hybrid AI Copilot Engine
The Frontend Experience: Premium Glassmorphism & UI Dynamics
System Feature Catalog
Production Optimization & Challenges Resolved
Future Scope & Architectural Roadmap
Conclusion

1. Executive Summary & The Vision

Modern developers pay a severe context-switching tax. On any given workday, a developer must traverse fragmented interfaces: tracking task statuses on Notion, verifying scheduled meetings on Google Calendar, auditing issues and pull requests on GitHub, and responding to project notifications in Gmail. This scattered ecosystem decreases productivity, fragments workflow history, and isolates critical data.

ReefFlow Hub was built to solve this problem by consolidating these daily developer tools into a single, unified database schema. Instead of calling multiple REST APIs with different structures and credentials, ReefFlow Hub introduces a local-first paradigm that models all developer metadata as standard database tables.

By leveraging the Coral SQL query engine, developer data is unified and queried using standard SQLite/SQL dialect. The workspace overlays this local query engine with an interactive developer dashboard, a SQL console, and a hybrid AI workspace copilot powered by Google Gemini, wrapped in a premium, glassmorphic visual interface.

2. High-Level Architecture & Technology Stack

ReefFlow Hub is built using a decoupled architecture separating the user interface from the system runtime and query executor. The architecture ensures low-latency query evaluation and works offline.

System Architecture Flow

graph TD
    UI[Vite + React Frontend] <-->|JSON REST API| Server[Node.js Express Backend]
    Server <-->|execFile CLI Wrapper| Coral[Coral SQL Engine]
    Coral <-->|Reads Source Specs| Specs[coral_sources.yaml]
    Specs <-->|Queries Local Datasets| Data[JSON Files: Calendar, Tasks, GitHub, Gmail]

Core Technology Stack

Layer	Technology	Role
Frontend UI	React 19 + Vite 8	High-performance, reactive UI dashboard utilizing modern hooks, context, and optimized compilation.
Styling & Assets	Vanilla CSS3 + Lucide Icons	Premium HSL-based design system containing custom variables, glowing accent backdrops, and glassmorphic panels.
Backend Server	Node.js + Express	Handles REST API requests, reads configurations, hosts mock schemas, and wraps command-line interactions.
Database Engine	Coral SQL CLI	An analytical query engine that parses structured metadata manifests and runs SQL queries directly over file sources.
AI Processing	Gemini 1.5 Flash API	Drives the online copilot by translating natural language to SQL queries using schema grounding, and summarizing tabular results.

3. The Database Layer: Coral SQL Engine Integration

The core differentiator of ReefFlow Hub is its use of the Coral SQL Engine to query file-based JSON datasets as native tables. This avoids the overhead of a heavy relational database service while keeping the simplicity of JSON files for local storage.

Coral Source Specification Manifest

A schema registry file workspace_sources/coral_sources.yaml maps local file locations to structured columns with designated SQLite data types. This allows the Coral CLI to compile standard SQL queries into file operations:

name: local_hub
version: 0.1.0
dsl_version: 3
description: Query local developer workspace agenda, tasks, GitHub repositories, and Gmail.
backend: file
tables:
  - name: calendar
    description: Daily developer agenda and events
    format: json
    source:
      location: file:///c:/Users/Rushabh Mahajan/Documents/VS Code/WeMakeDevs/workspace_data/local_calendar.json
    columns:
      - name: id
        type: Int64
        description: Unique event identifier
      - name: summary
        type: Utf8
        description: Title or summary of the event
      - name: start_time
        type: Utf8
        description: Event start date and time
      - name: end_time
        type: Utf8
        description: Event end date and time
      - name: location
        type: Utf8
        description: Meeting room or link
      - name: description
        type: Utf8
        description: Brief details about the agenda

  - name: tasks
    description: Notion tasks and development backlog
    format: json
    source:
      location: file:///c:/Users/Rushabh Mahajan/Documents/VS Code/WeMakeDevs/workspace_data/local_tasks.json
    columns:
      - name: id
        type: Int64
        description: Task identifier
      - name: title
        type: Utf8
        description: Title of the task
      - name: status
        type: Utf8
        description: Status (Todo, In Progress, Done)
      - name: priority
        type: Utf8
        description: Priority (High, Medium, Low)
      - name: due_date
        type: Utf8
        description: Due date for completion
      - name: project
        type: Utf8
        description: Associated workspace project name

  - name: github
    description: GitHub repository issues and pull requests
    format: json
    source:
      location: file:///c:/Users/Rushabh Mahajan/Documents/VS Code/WeMakeDevs/workspace_data/local_github.json
    columns:
      - name: id
        type: Int64
        description: GitHub issue/PR ID
      - name: title
        type: Utf8
        description: Title of the issue or PR
      - name: repo
        type: Utf8
        description: Repository name
      - name: type
        type: Utf8
        description: Type (Issue or Pull Request)
      - name: state
        type: Utf8
        description: State (open or closed)
      - name: author
        type: Utf8
        description: GitHub username of author
      - name: assigned_to
        type: Utf8
        description: Developer assigned to work on it

  - name: gmail
    description: Developer email inbox and communications
    format: json
    source:
      location: file:///c:/Users/Rushabh Mahajan/Documents/VS Code/WeMakeDevs/workspace_data/local_gmail.json
    columns:
      - name: id
        type: Int64
        description: Email message identifier
      - name: sender
        type: Utf8
        description: Email sender address
      - name: subject
        type: Utf8
        description: Subject line
      - name: body
        type: Utf8
        description: Content body of the email
      - name: is_unread
        type: Boolean
        description: Unread status (true if unread)

4. The Backend Bridge: Node.js & Express CLI Wrapper

The backend serves as a thin broker between the web app and the CLI tool. Written in Node.js with Express, it exposes JSON endpoints for configuration, schema exploration, task updates, and query executions.

Executing SQL via Coral CLI

The backend leverages Node's child_process.execFile to invoke the coral CLI tool directly, avoiding subshell overhead and mitigating command injection risks:

import { execFile } from 'child_process';

function runCoralSql(sql) {
  return new Promise((resolve, reject) => {
    // Execute: coral sql "<QUERY>" --format json
    execFile('coral', ['sql', sql, '--format', 'json'], (error, stdout, stderr) => {
      if (error) {
        return reject({ error: error.message, stderr });
      }
      try {
        const parsed = JSON.parse(stdout);
        resolve(parsed);
      } catch (parseError) {
        // Fallback for empty sets or non-JSON responses
        if (stdout.trim() === '++\n++') {
          resolve([]);
        } else {
          resolve({ raw: stdout });
        }
      }
    });
  });
}

Self-Registering Sources on Boot

To provide an immediate, configuration-free experience, the Express backend registers the local Coral source spec automatically when starting:

function registerCoralSources() {
  return new Promise((resolve, reject) => {
    console.log(`Registering Coral source manifest: ${manifestPath}`);
    execFile('coral', ['source', 'add', '--file', manifestPath], (error, stdout, stderr) => {
      if (error) {
        console.error('Failed to register Coral sources:', error.message);
        return reject(error);
      }
      console.log('Coral sources registered successfully:', stdout.trim());
      resolve(stdout);
    });
  });
}

// Automatically invoke on boot
registerCoralSources().catch(err => {
  console.warn('Startup source registration warning:', err.message);
});

5. The Hybrid AI Copilot Engine

ReefFlow Hub implements a hybrid agent system capable of operating in both offline and online modes, optimizing for cost, speed, and intelligence.

Mode 1: Offline Semantic Rule-Based Router

When no Gemini API key is configured, the application falls back to an offline rule-based semantic router. This parser maps standard developer intents (such as checking "agenda", "unread mails", "high priority tasks", or "assigned issues") to predefined SQL statements.

This ensures core dashboard features remain functional even without internet access or API credentials.

function getOfflineQuery(prompt) {
  const p = prompt.toLowerCase();

  if (p.includes('today') && (p.includes('work') || p.includes('priority') || p.includes('agenda'))) {
    return {
      sql: `SELECT 'calendar' as source, summary as title, start_time as detail FROM local_hub.calendar WHERE start_time LIKE '2026-05-29%' UNION SELECT 'tasks' as source, title, status as detail FROM local_hub.tasks WHERE status != 'Done' AND priority = 'High'`,
      summaryTemplate: "Here is your integrated agenda and high-priority tasks for today..."
    };
  }
  // Standard fallbacks for github, gmail, and calendar tables...
}

Mode 2: Online Gemini Grounded AI Copilot

When a Gemini API key is provided, the backend enables a two-phase grounding pipeline:

[User Natural Prompt] 
       │
       ▼
1. Fetch Metadata (from coral.tables & coral.columns)
       │
       ▼
2. Schema-Grounded Prompt -> [Gemini Model] -> Output: Clean SQL
       │
       ▼
3. Execute SQL Query via Coral CLI -> Output: Tabular Data
       │
       ▼
4. Raw Data + Prompt -> [Gemini Model] -> Output: Conversational Summary
       │
       ▼
[Render SQL + Table + Summary in Chat]

Schema Retrieval: The backend queries Coral's system tables (coral.tables and coral.columns) to extract current schema shapes.
SQL Generation: The backend prompts Gemini with the schemas and the user prompt, requesting clean SQL code.
Execution: The generated SQL is run via the Coral CLI wrapper.
conversational Summarization: The tabular results and original prompt are fed back to Gemini to produce a natural, human-readable summary.

// Grounding pipeline code snippet in server.js
const tables = await runCoralSql("SELECT schema_name, table_name, description FROM coral.tables");
const columns = await runCoralSql("SELECT schema_name, table_name, column_name, data_type, description FROM coral.columns");

const schemaDescription = {
  tables: tables.map(t => ({ name: `${t.schema_name}.${t.table_name}`, description: t.description })),
  columns: columns.map(c => ({ table: `${c.schema_name}.${c.table_name}`, column: c.column_name, type: c.data_type, description: c.description }))
};

const sqlSystemPrompt = `You are a SQLite/SQL expert translating natural language requests into SQL queries.
Available schemas, tables, and columns:
${JSON.stringify(schemaDescription, null, 2)}
Rules:
1. Output ONLY the raw SQL query. Do not wrap in markdown code blocks.
2. Only write SELECT queries.
3. Be precise with table names (always prefix with schema like 'local_hub.tasks').

User Prompt: "${prompt}"`;

// Call Gemini API and execute result...

6. The Frontend Experience: Premium Glassmorphism & UI Dynamics

The UI features a dark, glassmorphic dashboard built in React. The design is modern, professional, and interactive.

Design Tokens & Aesthetics (Vanilla CSS)

Styling uses HSL variables inside src/index.css to allow smooth, high-fidelity light/dark mode transitions, glowing accents, and blurred backdrops:

:root {
  --font-sans: 'Inter', sans-serif;
  --font-display: 'Outfit', sans-serif;

  /* Deep space HSL colors */
  --bg-base: 224 25% 6%;
  --bg-surface: 224 25% 10%;
  --bg-glass: 224 25% 12% / 0.45;
  --border-glass: 224 25% 20% / 0.5;

  --primary: 161 93% 42%; /* Emerald Glow */
  --accent-violet: 263 90% 64%; /* Purple Glow */

  --text-primary: 0 0% 98%;
  --text-secondary: 224 15% 70%;
  --text-muted: 224 10% 50%;

  --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Glassmorphism Panel styles */
.glass-panel {
  background: hsl(var(--bg-glass));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid hsl(var(--border-glass));
  border-radius: 16px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  transition: var(--transition-smooth);
}

.glass-panel:hover {
  border-color: hsl(var(--primary) / 0.25);
  box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.45), 0 0 15px 0 hsl(var(--primary-glow));
}

Micro-Animations and Keyframes

Concentric Spinner: A double-spinning loader featuring an outer ring spinning clockwise, an inner ring spinning counter-clockwise, and a pulsing core.
Theme Persistence: Light and Dark mode states are managed reactively in React, synced to localStorage, and applied to document.body.classList to trigger CSS transition flows.
Glowing Backdrops: body::before and body::after display non-blocking radial-gradients that create neon glows.

Real-Time Task Checkbox Syncing

Clicking a checkbox on a task card doesn't just toggle UI state; it triggers a backend POST request that parses the task ID, modifies the task status in the underlying local JSON dataset, and rewrites the file back to disk.

// Toggle task execution in React
const toggleTaskStatus = async (taskId) => {
  try {
    const res = await fetch('http://localhost:5000/api/tasks/toggle', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ id: taskId })
    });
    if (res.ok) {
      fetchDashboardData(); // Refetches all tables via SQL to update UI state
    }
  } catch (err) {
    console.error('Failed to toggle task status:', err);
  }
};

7. System Feature Catalog

ReefFlow Hub packages several modules into the single-page interface:

┌────────────────────────────────────────────────────────────────────────┐
│                              REEFFLOW HUB                              │
├───────────────┬────────────────────────────────────────────────────────┤
│               │  [ Dashboard Widgets ]                                  │
│  [Sidebar]    │  • Calendar Events Table      • Notion Backlog list    │
│  - Dashboard  │  • GitHub Triaged Issues      • Gmail Inbox Card       │
│  - AI Copilot ├────────────────────────────────────────────────────────┤
│  - SQL Console│  [ SQL Console ]                                       │
│  - Schema Exp │  [ SELECT * FROM local_hub.tasks LIMIT 5            ]  │
│  - Settings   │  [ Run Query ] ➔ [ Results Table + Execution Time ]     │
│               ├────────────────────────────────────────────────────────┤
│               │  [ Schema Explorer ]                                   │
│               │  • Columns Schema  • System Inputs  • Native Filters   │
└───────────────┴────────────────────────────────────────────────────────┘

Workspace Hub (Dashboard): Features visual cards summarizing agenda items, backlog items, open PRs, and unread mail. Each card dynamically populates its dataset by running a background Coral SQL query.
AI Workflow Agent: Interactive chat assistant translating natural language to SQL and displaying SQL statements, tabular query outputs, and conversational text summaries.
Interactive SQL Console: Code terminal interface containing standard SQL execution, query history records, execution timing logs, and error messaging.
Source Manager (Schema Explorer): Multi-tab view displaying tables and columns metadata from Coral, system credentials/authentication parameters, and native database filter constraints.
Settings Panel: Input system to manage Gemini API credentials and connect/disconnect diagnostics to backend systems.

8. Production Optimization & Challenges Resolved

Translating the application from a raw concept to a production-ready system required solving several integration hurdles:

1. Concurrent Dev Environment

Instead of making developers launch the React client and Express server separately, we configured concurrently in package.json. This allows running the full environment with one command:

npm run dev

2. React 19 Peer Dependencies

Vite and modern React 19 packages had conflicts. We resolved peer conflicts during building by forcing dependency resolution:

npm install --legacy-peer-deps

3. CLI Query Execution Overhead

Running CLI commands takes time. To keep the UI fast, we optimized queries in the SQL Console to display execution times (averaging 40-80ms per execution). We also implemented a Native Driver Filter Constraints Inspector in the schema explorer. This helps developers design queries using indexed constraint filters, maximizing database performance.

9. Future Scope & Architectural Roadmap

ReefFlow Hub provides a strong foundation for local developer productivity, with several key expansions planned:

1. Live Integration Sync

The next phase involves replacing mock JSON datasets with live REST API webhooks for Notion, Google Calendar, GitHub, and Gmail. The backend will sync these sources into the local Coral registry periodically or on-demand.

2. Local-First Sync Protocol (Automerge/Yjs)

To support multi-device workflows without centralized servers, ReefFlow Hub will implement conflict-free replicated data types (CRDTs) to sync local files directly between developer machines.

3. Local RAG (Retrieval-Augmented Generation) & Embeddings

By integrating a local vector database, the AI Copilot can perform semantic search (e.g. "Find emails discussing the login bug") in addition to SQL queries, utilizing local embeddings.

4. Direct Write-Back Action Translation

Expanding the AI Copilot to handle actions (e.g. "Add a meeting tomorrow at 11 AM") by translating natural language requests into SQL INSERT or UPDATE statements, which are then written back to local storage and synced to live API endpoints.

10. Conclusion

ReefFlow Hub demonstrates the power of local-first development by pairing the Coral SQL query engine with a modern AI framework. Unifying disparate web services under a standard SQL interface simplifies developer workflows. Combined with a sleek, premium user interface, ReefFlow Hub represents the next step in integrated developer tools.

Created with ❤️ by Aditya Mahajan.

# I Abandoned This AI Project for a Year — Now It’s Finally Becoming Something Real 🚀

Aditya Mahajan — Fri, 29 May 2026 16:59:31 +0000

This is a submission for the GitHub Finish-Up-A-Thon Challenge

A year ago, I built a project called Focus Forge Agent.

At that time, it was just another late-night idea that turned into a GitHub repository.

Like many student developers, I started the project with huge excitement, ambitious plans, and a vision of building an AI-powered productivity assistant that could actually help people stay focused, organized, and productive.

But reality hit quickly.

College work, deadlines, internships, exams, and other projects slowly pushed it into the background.

The repository stayed there for almost a year.

Unfinished.
Unoptimized.
Half-working.
And honestly… forgotten.

Until recently.

The Moment I Reopened the Project

A few weeks ago, I was scrolling through my old GitHub repositories and found Focus Forge Agent again.

Opening the code after a year felt strange.

Some files made no sense anymore.
Some implementations were rushed.
Some features were incomplete.
And some parts looked like they were written during pure sleep deprivation 😭

But underneath all that messy code…
there was still a genuinely useful idea.

That realization made me think:

“Instead of abandoning it, why not rebuild it properly?”

And that’s exactly what I did.

What is Focus Forge Agent?

Focus Forge Agent is an AI-powered productivity assistant designed to help users:

Stay focused during work or study sessions
Organize tasks efficiently
Improve productivity workflows
Reduce distractions
Create structured work sessions
Interact with an intelligent assistant for productivity support

The goal was simple:

Build a productivity-focused AI tool that actually feels useful instead of overwhelming.

The Biggest Problem With the Old Version

The first version was built in a hurry.

And when developers say “built in a hurry”…
we all know what that usually means:

Hardcoded logic
Poor structure
Inconsistent UI
Features that worked “sometimes”
No scalability
Minimal testing
Random debugging fixes
Zero optimization

At that stage, the project was more of a prototype than a real application.

It technically existed.

But it wasn’t something I felt proud sharing publicly.

Why I Decided to Revive It

I realized something important:

Most projects fail not because the idea is bad.
They fail because developers stop improving them.

So instead of starting another new repository from scratch, I decided to do something different:

✅ Improve an old project.
✅ Fix the mistakes.
✅ Refactor the architecture.
✅ Complete unfinished features.
✅ Turn a rushed prototype into a usable product.

And honestly?

That decision taught me more than building a brand-new project ever could.

The Rebuild Process ⚒️

The rebuild was not just about “fixing bugs.”

I practically rebuilt major parts of the project.

1. Refactoring the Codebase

The old structure was difficult to maintain.

So I:

Cleaned up unnecessary files
Improved folder organization
Removed duplicate logic
Simplified components
Improved readability
Reworked internal workflows

This alone made future development significantly easier.

2. Making Features Actually Work

The earlier version had several partially completed features.

Some looked functional on the surface but failed during real usage.

I focused on:

Improving reliability
Handling edge cases
Making interactions smoother
Improving response handling
Reducing crashes and inconsistencies

The difference between a demo project and a usable project is reliability.

That became my primary focus.

3. Improving the User Experience

One thing I learned while rebuilding:

A project can have amazing functionality, but if the user experience feels confusing, people leave instantly.

So I worked on:

Cleaner UI interactions
Better workflow design
Faster navigation
Improved usability
More intuitive productivity flow

The goal was to make the app feel natural to use.

4. Learning Through the Process

This rebuild became more than a coding task.

It became a reflection of how much I improved as a developer over the last year.

When I compared:

Old code vs new code
Old structure vs new structure
Old design decisions vs current thinking

…the growth was obvious.

And honestly, that felt rewarding.

The Most Important Lesson I Learned

You do not need to create a brand-new project every week.

Sometimes the best thing you can do is:

Take an unfinished idea and finally finish it properly.

There’s something powerful about revisiting old work.

It forces you to:

Face your previous mistakes
Understand your growth
Improve your engineering mindset
Learn optimization
Learn maintainability
Learn product thinking

And most importantly:

It teaches persistence.

From “Abandoned Repo” to Functional Product

Today, Focus Forge Agent is finally in a state where I can confidently say:

✅ It works properly
✅ It feels usable
✅ It solves a real problem
✅ It reflects my current development skills
✅ It is no longer just an unfinished side project

And that transformation feels incredibly satisfying.

What I’d Improve Next

Even though the project is now fully functional, there’s still a lot I want to improve.

Some future ideas include:

Better AI workflow automation
Smarter productivity insights
Enhanced analytics
Improved personalization
More integrations
Cross-platform improvements
Advanced focus tracking

Because honestly…

Projects are never truly finished.
They simply evolve.

Advice for Developers Who Have Abandoned Projects

If you have an old GitHub repository collecting dust somewhere:

Reopen it.

Seriously.

You might find:

An idea worth rebuilding
A concept ahead of its time
A project with hidden potential
A chance to measure your growth

Not every old project deserves abandonment.

Sometimes it just needs a better version of you.

Final Thoughts

Focus Forge Agent started as:

A rushed side project
An unfinished experiment
A forgotten repository

But now it has become:

A fully functional productivity agent
A project I genuinely learned from
A reminder that consistency matters more than perfection