Project Structure

Understanding how a MiniWork project is organized.

Directory Layout

my-app/
├── src/
│   ├── components/          # Reusable UI components
│   │   └── ui.ts            # Headers, footers, sidebars, forms
│   ├── layouts/             # Page layout templates
│   │   ├── base.ts          # Base HTML wrapper + view transitions
│   │   ├── admin.ts         # Admin panel layout
│   │   └── docs.ts          # Documentation layout
│   ├── pages/               # Page components
│   │   ├── landing.ts       # Landing/home page
│   │   ├── login.ts         # Login page
│   │   ├── admin/           # Admin pages
│   │   │   ├── dashboard.ts
│   │   │   ├── users.ts
│   │   │   ├── roles.ts
│   │   │   └── settings.ts
│   │   └── docs/            # Documentation pages
│   │       └── index.ts
│   ├── lib/                 # Utilities & business logic
│   │   ├── db.ts            # Database connection
│   │   ├── auth.ts          # Authentication helpers
│   │   ├── html.ts          # HTML escape utilities
│   │   ├── doc-components.ts # Documentation UI helpers
│   │   ├── seed-admin.ts    # Admin data seeding
│   │   └── seed-docs.ts     # Documentation content
│   ├── routes/              # HTTP route handlers
│   │   └── index.ts         # All route handler functions
│   └── styles/              # Global styles
│       └── base.ts          # CSS variables & base styles
├── db/                      # SQLite database files
├── public/                  # Static assets
│   └── assets/
├── tests/                   # Test files
├── init.ts                  # Server entry point
├── package.json
└── tsconfig.json

Component Architecture

MiniWork uses a modular component architecture with separation of concerns:

Routing Pattern

Routes are defined in init.ts using pattern matching. Static routes use exact path matching, while dynamic routes use regex:

// Static routes
if (path === "/" && method === "GET") {
  return handleLanding();
}

if (path === "/login" && method === "POST") {
  return handleLogin(request);
}

// Dynamic routes with regex
const docsMatch = path.match(/^\/docs\/([^\/]+)\/([^\/]+)\/?$/);
if (docsMatch) {
  const [, section, page] = docsMatch;
  return handleDocPage(section, page);
}

Key Files

File	Purpose
init.ts	Server entry point, route definitions, app bootstrap
src/layouts/base.ts	HTML wrapper, view transitions CSS and JavaScript
src/components/ui.ts	All shared UI components with embedded CSS
src/lib/db.ts	SQLite database connection and query helpers
src/lib/auth.ts	Session management, password hashing with Argon2
src/routes/index.ts	Route handler functions called from init.ts