Web

App is a browser-only React SPA that lets local businesses create, edit, and audit their own merchant records on Local—a community-commerce network running on the peer-to-peer FogBox stack. Its mission is to decentralize ownership of commercial data and return technological control to merchants and their customers. Data is written locally first, then synchronised through FogBox nodes—no central server—ensuring autonomy and resilience. Open, well-documented APIs let any citizen-developer extend, fork, or integrate the codebase without gatekeepers.

Architecture

This project follows a Flux-style architecture using Effector for state management. The architecture is organized around domains, with each domain containing its model (events, stores, effects), view-model (React hooks), and UI components.

For more details, see the Architecture Documentation.

Project Structure

The project follows a domain-driven structure for better maintainability and scalability:

merchant-operator-web/
├── src/
│   ├── app/              # Application entry point and configuration
│   │   ├── root.tsx     # Root component
│   │   └── routes.tsx   # Route definitions
│   ├── domains/          # Feature domains
│   │   └── <feature>/   # e.g., products, auth, orders
│   │       ├── model.ts # Effector events, stores, effects
│   │       ├── view-model.ts # React hooks
│   │       └── ui/      # React components
│   ├── shared/          # Shared code
│   │   ├── lib/        # Utilities, helpers, adapters
│   │   └── ui/        # Reusable UI components
│   ├── assets/          # Static assets (images, fonts)
│   ├── styles/          # Global styles
│   └── types/           # TypeScript types
├── public/              # Static files
├── config/              # Build/env configuration
└── docs/                # Documentation

Path Aliases

The project uses path aliases for cleaner imports:

@ - Points to the src directory
@app - Points to the src/app directory
@domains - Points to the src/domains directory
@shared - Points to the src/shared directory
@shared/ui - Points to the src/shared/ui directory
@shared/lib - Points to the src/shared/lib directory
@assets - Points to the src/assets directory
@styles - Points to the src/styles directory
@types - Points to the src/types directory

Development

Prerequisites

Node.js (v18+)
npm or yarn

Installation

npm install

Running the Development Server

npm run dev

Building for Production

npm run build

Preview Production Build

npm run preview

Configuration

The application uses runtime environment variables for configuration, which are injected into the application through window.appConfig.

For detailed configuration options, see the Configuration Documentation.

Documentation

For more detailed documentation, see the docs directory:

Architecture - Overview of our Flux-style architecture with Effector
Project Structure - Detailed explanation of our project structure
Configuration - Detailed configuration options and environment variables
Effector Guide - Comprehensive guide on how to use Effector
TypeScript Conventions - TypeScript conventions for the project

3.6 KiB Raw Blame History

Web