WubbaList

the only no bs task tracker you can ever discover

Tech Stack

Frontend

• Next.js 16 with App Router and React 19
• TanStack Query for state management with optimistic updates
• shadcn/ui components

Backend

• Express 5.1.0 running on Node.js
• MongoDB with Mongoose ODM
• Redis for caching (5-minute TTL on task queries)
• JWT Authentication with refresh token rotation
• Jest testing with 87.79% coverage (37 tests)

Monorepo

• Turborepo for build orchestration
• pnpm 9.15.0 as package manager
• TypeScript across all packages

Project Structure

wubbalist/
├── apps/
│   ├── app/          # Next.js frontend
│   └── api/          # Express API server
├── packages/
│   ├── auth/         # JWT authentication (@wubba/auth)
│   ├── db/           # MongoDB/Mongoose (@wubba/db)
│   ├── logger/       # Pino logger (@wubba/logger)
│   └── redis/        # Redis client (@wubba/redis)
└── pnpm-workspace.yaml

Features

• User registration and login with JWT authentication
• Cookie-based auth (httpOnly) with automatic token rotation
• Task CRUD operations with real-time UI updates
• Redis caching for optimized task queries
• Optimistic updates for instant UI feedback
• Task grouping by date (Today, Yesterday, custom dates)
• Comprehensive test suite (unit + integration tests)
• Service layer with dependency injection pattern

Getting Started

Prerequisites

• Node.js 18+
• pnpm 9.15.0 (or install via: npm install -g pnpm@9.15.0)
• MongoDB (local or remote instance)
• Redis (local or remote instance)

Installation

1. Clone the repository

git clone <repository-url>
cd wubbalist

2. Install dependencies

pnpm install

3. Set up environment variables

Create .env files in the following locations:

apps/api/.env

NODE_ENV=development

# JWT Secrets (generate with: openssl rand -base64 32)
ACCESS_TOKEN_SECRET=your-access-token-secret-here
REFRESH_TOKEN_SECRET=your-refresh-token-secret-here

# Database
MONGO_DB_URI=mongodb://localhost:27017/wubbalist

# Redis
REDIS_URL=redis://localhost:6379

# CORS (comma-separated origins)
ALLOWED_ORIGINS=http://localhost:3000

apps/app/.env

NODE_ENV=development
NEXT_PUBLIC_API_URL=http://localhost:3001

Running the Application

Development Mode

Run all apps concurrently:

pnpm run dev

Or run individually:

# Frontend (Next.js) - http://localhost:3000
turbo dev --filter=@wubba/app

# Backend (Express API) - http://localhost:3001
turbo dev --filter=@wubba/api

Testing

# Run all tests
pnpm run test

# Run tests in watch mode
pnpm run test:watch

# Generate coverage report
pnpm run test:coverage

Test Coverage: 87.79% (37 tests passing)

• Unit tests: 24 tests for service layer
• Integration tests: 13 tests for API routes

Linting & Type Checking

# Lint all packages
pnpm run lint

# Type check all packages
pnpm run check-types

# Format code
pnpm run format

Environment Variables Reference

Backend API (apps/api)

Variable	Type	Required	Description
NODE_ENV	development | production	No	Environment mode (default: development)
ACCESS_TOKEN_SECRET	string	Yes	Secret for signing access tokens (15min expiry)
REFRESH_TOKEN_SECRET	string	Yes	Secret for signing refresh tokens (7 days expiry)
MONGO_DB_URI	url	Yes	MongoDB connection string
REDIS_URL	url	Yes	Redis connection URL
ALLOWED_ORIGINS	string	Yes	Comma-separated CORS origins (e.g., http://localhost:3000,https://app.example.com)

Frontend (apps/app)

Variable	Type	Required	Description
NODE_ENV	development | production	No	Environment mode (default: development)
NEXT_PUBLIC_API_URL	url	Yes	Backend API base URL

API Endpoints

Authentication

• POST /api/auth/signup - Register new user
• POST /api/auth/login - Login user (sets httpOnly cookies)

Tasks (Protected)

• GET /api/tasks - Get all user tasks (Redis cached)
• POST /api/tasks - Create new task
• PUT /api/tasks/:id - Update task
• DELETE /api/tasks/:id - Delete task

Architecture Highlights

Dependency Injection Pattern

Both services and routers use factory functions for testability:

export const createTasksService = (dependencies) => ({
  getAllTasks: async (userId) => { /* ... */ }
});

Redis Caching Strategy

• Cache key: tasks:user:${userId}
• Storage: Redis hash with task ID as field key
• TTL: 5 minutes
• Invalidation: Explicit deletion on mutations

Custom Router System

Type-safe router definitions with dynamic registration:

const routes: RouterType = {
  "/tasks": {
    GET: { middleware: [isAuthenticated], handler: getTasks }
  }
}

Deployment

Live Demo

Frontend: https://wubbalist-app.vercel.app/

Note: The deployed frontend is non-functional as the backend API was not deployed due to possible Vercel/Express/Turborepo integration issues. For a working demo, please run the application locally following the setup instructions above.

Scripts Reference

# Development
pnpm run dev              # Start all apps in dev mode
pnpm run build            # Build all apps and packages

# Testing
pnpm run test             # Run all tests
pnpm run test:watch       # Watch mode
pnpm run test:coverage    # Coverage report

# Code Quality
pnpm run lint             # Lint all packages
pnpm run check-types      # TypeScript type checking
pnpm run format           # Format with prettier

Contribution Breakdown

advtxide (me)

• Complete frontend implementation (Next.js, React 19, Tailwind CSS v4)
• Task management UI with date grouping and optimistic updates
• Migration to TanStack Query for state management
• Authentication flow implementation (signup, login, protected routes)
• MongoDB integration and Mongoose models
• JWT authentication with @wubba/auth package
• Redis package creation and tasks API integration
• Task CRUD operations (create, update, delete)
• Build system configuration (turbo, package.json scripts)
• Migration from Bun to pnpm/Node.js build toolchain

Claude Code Contributions

• Initial monorepo structure and Turborepo configuration
• Service layer refactoring with dependency injection pattern
• Router refactoring to factory functions for testability
• Complete Jest testing infrastructure (87.79% coverage)
  • 24 unit tests for services (auth, tasks)
  • 13 integration tests for API routes
  • Test utilities (setup, mocks, fixtures)
  • mongodb-memory-server and redis-mock integration
• Build configuration updates (tsconfig.build.json, tsx setup)
• Documentation (CLAUDE.md, README.md)