Built to make it yours.

Start your workspace

Install Node.js 18+ or 20+, open the project folder, and run the commands below. Medora is built with Next.js 14, React 18, Tailwind CSS, TypeScript, and Radix UI.

npm install
npm run dev

# Validate and create the static export
npm run typecheck
npm run lint
npm test
npm run build
npm run preview

The development server opens on port 3000. Access the landing page at /, the admin dashboard at /admin, and the matching storefront at /shop.

A structure that stays understandable

src/
  app/            # App Router entry points and layouts
  components/     # Shared UI, layout, themes, charts
  features/       # Domain-specific page components
  data/           # Typed and deterministic sample records
  hooks/          # Collection search, sorting, pagination
  lib/            # Pure calculations, reducer, CSV exports
  store/          # Context and localStorage persistence
  styles/         # Design tokens and component styling
  types/          # Shared TypeScript contracts
tests/            # Domain and browser test suites
docs/             # Integration and marketplace guidance

Query-based detail routes work in a static export and support records created during a demo session. For example, /admin/orders/view?id=MD-10401.

One system, three expressions

Edit semantic color channels, radii, and shadows in src/styles/tokens.css. The palette is shared by Tailwind, component styles, and charts. Clinical Mint, Atlantic Navy, and Soft Violet each include light and dark tokens.

Layout spacing follows an 8px base with 4px half-steps for dense controls. Headings use a defined typography scale, while tables and metadata deliberately remain quieter.

Reusable UI, in practice

Radix handles dialog focus, dropdown interaction, tooltips, and tabs. Native form controls preserve browser validation. Tables expose sortable headers and labeled pagination controls.

Where your real application begins

The pure reducer in src/lib/reducer.ts is the mutation seam. Replace local mutations with your API client and authoritative server responses. Keep the UI contracts while moving authorization, inventory transactions, document processing, and payments to properly secured services.