Forge Stack: A Full Ecosystem for Modern Web Applications

Source: Dev.to

Overview

Forge Stack is a set of type‑safe, composable tools for building modern web applications from backend to frontend. Each package can be used independently or combined into a single ecosystem, sharing a philosophy of simple APIs, minimal dependencies, and strong documentation.

Packages

Bear – UI Layer

A React component library built for Tailwind with a theme provider, light/dark mode, and a wide set of accessible, mobile‑first components (buttons, cards, modals, drawers, inputs, selects, grids, etc.). It offers a consistent design system without heavy configuration.

Compass – Routing Layer

Type‑safe routing for React with guards, permissions, and navigation control. Features include auth/role protection, unsaved‑changes blocking, URL‑state sync, and built‑in DevTools. Integrates naturally with Bear and the rest of the stack.

Synapse – State Layer

Provides a Redux‑like mental model without reducers or dispatch. Works with nuclei (state containers), signals, and computed values. React hooks such as useNucleus and usePick connect components to state. Middleware supports logging, persistence, and Immer‑style updates. Includes API hooks, DevTools with time‑travel, and unified UI/server state management.

Forge Form – Forms & Validation

Handles form state, built‑in and async validation, optional persistence/cache, and API submission with retries. A DevTools panel aids inspection and debugging. Small, dependency‑free, and covers typical form needs.

Forge Query – Data Fetching & Caching

Offers smart caching, background refetching, retries with backoff, and request deduplication. Includes useMutation and DevTools. TypeScript‑first, compatible with React 16.8+ and offline scenarios.

Grid Table – Headless Data Grid

A headless React data grid supporting sorting, filtering, pagination, row selection, sticky columns, column reorder/resize, and custom cell rendering. Styled with SCSS for easy theming to match Bear or any design system. Works on desktop and mobile.

Anvil – Utility Layer

Provides type guards, deep clone, and helpers for arrays, objects, strings, and functions. Ships React hooks and Vue composables. Fully tree‑shakable and type‑safe, bundling only what is used.

Harbor – Backend Framework

A Node.js framework that consolidates Express, Mongoose, validation, WebSockets, scheduling, caching, auth, and Docker‑friendly setup. TypeScript‑first and config‑driven, enabling fast, predictable backend development for both small APIs and larger services.

Forge CLI

The CLI creates and manages projects that use the Forge Stack ecosystem. It supports npm, pnpm, yarn, and bun.

• Project scaffolding – One‑command creation with a default React (Vite, React 18, TypeScript, Bear UI, Compass routing, Synapse state) template. Options include server‑only templates (Harbor or Express + TypeScript) or a full‑stack monorepo.
• Package addition – Interactive mode or direct name installation. Generates Synapse nuclear slices and can scaffold pages, components, or slices following project conventions.
• Docker support – Includes production Dockerfile, development Dockerfile.dev, and docker‑compose.yml for the full stack.
• Theme customization – Set Bear primary color and other options during scaffolding or later in code.

The CLI provides a standard layout and tooling, letting developers focus on features rather than boilerplate.

Future Roadmap

Forge Stack is expanding beyond packages and the CLI with an AI‑powered portal:

• AI code generation – Describe desired functionality in natural language and receive Forge Stack code (Bear components, Compass routes, Synapse state, forms, queries) that follows established patterns.
• Drag‑and‑drop builder – Visually assemble pages and flows using Bear components and Compass routes, outputting real Forge Stack code for further editing.
• AI assistant – A bot that helps navigate the ecosystem, select appropriate packages, and generate or refactor code while maintaining consistency.

The goal is to accelerate scaffolding, exploration, and iteration without replacing traditional coding, keeping everything within the same type‑safe, composable ecosystem.