WK7: BearLabs Sub-Labs - From Prototype to Production

What We Built

A complete Sub-Labs system that allows parallel projects to have their own innovation spaces while maintaining unified data management under BearLabs.

Implementation Highlights

Core Features Delivered

CRUD Operations

  • Create, Read, Update, Toggle for all 5 data types
  • Ideas: Capture innovation thoughts
  • Actions: Track improvement tasks with type categorization
  • Goals: Set weekly objectives with completion tracking
  • Backlog: Manage project stories by priority level
  • Tasks: Break down backlog items into actionable steps

Status Management

  • Checkbox toggles for completion status on all items
  • Visual feedback: completed items show strikethrough and reduced opacity
  • Persistent state synced to database

Smart Sorting

  • Actions: Unresolved items first, then by date
  • Ideas: Uncompleted first, then by date
  • Goals: Grouped by week number
  • Tasks: Grouped by parent backlog

Data Integrity

  • Deduplication for tasks (keeps most recent version)
  • Date filtering for current month
  • Row Level Security (RLS) for write operations
  • Authentication required for all modifications

UI/UX Improvements

Visual Design

  • Clean card-based layout
  • Type labels with icons and distinct colors
  • Dark mode support
  • Responsive design

Action Types with Icons

  • ⚡ Improvement (yellow)
  • 🐛 Fixing (red)
  • ✨ Feature (green)
  • 🔧 Refactoring (blue)
  • 🎨 UX (purple)
  • 💾 DB (indigo)
  • 📦 Transfer (orange)

User Experience

  • Inline edit functionality
  • Form validation
  • Loading states
  • Error handling with user feedback
  • Automatic data refresh after modifications

Technical Architecture

Frontend

  • Next.js 16 with App Router
  • React 19 with Server Components
  • Client components for interactivity
  • TypeScript for type safety

Backend

  • Server Actions for data operations
  • Supabase for database and authentication
  • SSR with cookie-based auth
  • Row Level Security policies

Key Patterns

  • Separation of read (public) and write (authenticated) operations
  • Date-based filtering for current month view
  • Parent-child relationships (Backlog → Tasks)
  • Type-safe interfaces for all data models

Challenges Solved

1. Database Field Mapping

  • Discovered mismatches between code and database schema
  • Removed non-existent audit fields
  • Fixed parent reference (story name vs ID)
  • Added auto-populated date fields

2. Data Display

  • Fixed tasks not appearing under backlogs
  • Resolved duplicate task display
  • Corrected action type icons
  • Implemented proper sorting logic

3. Build Process

  • Resolved ESLint errors for production deployment
  • Fixed TypeScript type mismatches
  • Optimized for Vercel deployment

Stats

  • Components Created: 8 (Ideas, Actions, Goals, Backlog, TaskForm, BacklogForm, etc.)
  • Server Actions: 14 (CRUD operations for 5 data types + toggle functions)
  • Lines of Code: ~800 (actions.ts + components)
  • Time to Production: ~4 days of iterative development

What’s Next

Short-term

  • Month navigation
  • Custom project type configuration
  • Data export functionality

Long-term

  • Extended Sub-Labs for other projects
  • Analytics and insights
  • Integration with other BearLabs tools

Try It

Visit labs.bearlabs.net to see Sub-Labs in action.

Login required for creating and editing items.

Version: v0.6.0
Git Tag: v0.6.0
Status: Production Ready ✅
Completion Date: 2026-02-14

Built by Benben 🐻💻