Introduction

❝ Shopfoo ❞ is a mini application that accompanies this book. It is live and available following this link so you can play around with it and understand its use cases. Its source code is available on GitHub to provide a concrete and complete codebase, created with as much care as if it were a real application.

The name Shopfoo is a reference to the chop suey dish and the song by System of a Down 🤘.

The only pieces missing to be production-ready are those that would prevent me from staying on a free plan on Azure, namely the database and an observability stack (logs, metrics, distributed traces).

Application Overview

Shopfoo is an admin console (a.k.a. back-office) for a retail store selling two types of items: books and other products.

It demonstrates several back-office features: user authentication, role-based access control, internationalisation, theme switching, product catalogue management, and event simulation.

Technical stack

The solution is based on the SAFEr.Template. It's written in F# on both Client and Server sides:

• Client:

  • Fable 4 F#-to-JavaScript transpiler

  • SPA: React 19 under the hood

  • HTML DSL: Feliz 2.9

  • ELM architecture: Elmish

    • MVU loop per page using React.useElmish from Feliz.UseElmish

    • FullContext object stored in the root view and shared to page views

  • Design system: Feliz.DaisyUI built on DaisyUI and tailwindcss

  • Build: Vite.js (instead of webpack)

  • Routing: navigation between pages using Feliz.Router

• Server:

  • ASP.NET Core

  • Giraffe as a functional overlay

• Client-Server:

  • Fable.Remoting supporting the "Remoting API", with endpoints grouped between Home and Product

  • Shared ApiError type, hiding the Error domain type

  • Custom helpers for the calls to the Remoting API:

    • Types: ApiResult<'a> = Result<'a, ApiError>, ApiCall<'a> = Start | Done of ApiResult<'a>

    • Objects: fullContext.PrepareRequest(...) : Cmder → cmder.ofApiRequest(ApiRequestArgs) : Cmd<Msg>, abstracting the Elmish Cmd.OfAsync.either

  • Translations:

    • Grouped by pages, loaded on demand and cached on the Client side

    • Friendly and strongly-typed syntax for the views: e.g. translations.Home.Theme.Garden, translations.Product.Discount discount.Value

What's next

The following pages walk through how the application works and describe its features:

• General Features — login, default page, About and Admin pages

• Navigation & UI — breadcrumb, menu, language and theme selectors

• Products — catalog, data sources, cache, filtering and search

• Product Management — task-based UI, editing, pricing, stock and sales