🔺 Blackcode Issues - Frontend

AI-native issue tracking built on the Trinity Architecture.

Quick Start

1. Setup Environment Variables

# Copy the template# See ENV_TEMPLATE.md for all variables# Local development
GOOGLE_CLIENT_ID=262959577842-vubdf9h4gvuepqsvk6ehpk9clsmnep5n.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=<from downloaded JSON>
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=<generate with: openssl rand -base64 32>
POSTGRES_URL=postgres://localhost:5432/blackcode_issues

2. Setup Database

Run the migration script on your Vercel Postgres:

# Via Vercel Dashboard → Storage → Query# Or via psql
psql $POSTGRES_URL< scripts/migrate.sql

3. Install & Run

npm install
npm run dev

Visit http://localhost:3000

Deployment to Vercel

1. Push to GitHub

The frontend code should be in the blackcode-issues repo:

# Copy these files to Drew-source/blackcode-issues
git clone https://github.com/Drew-source/blackcode-issues
cp -r * /path/to/blackcode-issues/
cd /path/to/blackcode-issues
git add .
git commit -m "Add Blackcode Issues frontend"
git push

2. Set Environment Variables in Vercel

In your Vercel Dashboard:

1. Go to Project Settings → Environment Variables

2. Add:

   • GOOGLE_CLIENT_ID
   • GOOGLE_CLIENT_SECRET
   • NEXTAUTH_SECRET
   • NEXTAUTH_URL = https://blackcode-issues.vercel.app

3. Vercel Postgres will auto-inject POSTGRES_* variables

3. Run Database Migration

In Vercel Dashboard:

1. Go to Storage → Postgres
2. Click "Query"
3. Paste contents of scripts/migrate.sql
4. Run

4. Deploy

Vercel will auto-deploy on push to main.

Architecture

┌─────────────────────────────────────────────┐
│ FRONTEND │
├─────────────────────────────────────────────┤
│ Next.js 14 (App Router) │
│ ├── Google OAuth via NextAuth │
│ ├── TanStack Query for data fetching │
│ ├── Framer Motion for animations │
│ ├── @hello-pangea/dnd for drag & drop │
│ └── Tailwind CSS for styling │
├─────────────────────────────────────────────┤
│ API Routes │
│ ├── /api/auth/[...nextauth] - Auth │
│ ├── /api/projects - CRUD projects │
│ ├── /api/issues - CRUD issues │
│ └── /api/undo - Rollback operations │
├─────────────────────────────────────────────┤
│ Vercel Postgres │
│ └── Full schema in scripts/migrate.sql │
└─────────────────────────────────────────────┘

Features

• ✅ Google OAuth - Secure team authentication
• ✅ Kanban Board - Drag-and-drop issue management
• ✅ Dark Mode - Beautiful dark theme by default
• ✅ Rollback - Undo operations with transaction logging
• ✅ Fast API - 2-15ms response times
• ✅ Integer IDs - No more UUID chaos

API Reference

Projects

GET /api/projects List all projects
POST /api/projects Create project
GET /api/projects/:id Get project
PATCH /api/projects/:id Update project

Issues

GET /api/issues List issues (with filters)
POST /api/issues Create issue
GET /api/issues/:id Get issue
PATCH /api/issues/:id Update issue
DELETE /api/issues/:id Delete issue

Undo

GET /api/undo Get transaction history
POST /api/undo Undo last N operations

The Trinity

PROMPT ←────────→ TOOLS ←────────→ SOFTWARE
│ │ │
│ │ │
▼ ▼ ▼
Micro-verbose MCP Server This Frontend
specification (companion) + Vercel Postgres

---

Made with 💝 by Andrea David & AI