Micro Frontends Tractor Store

a non-trivial
micro frontends
example project

The Tractor Store is a template to experiment with micro frontend architectures. The idea is similar to TodoMVC or Movies. Build the same application, but with different technologies and integration techniques

illustration of a micro frontend setup consisting of three vertical boxes on one horiziontal box
React logo Vue logo Angular logo Preact logo React logo Solid logo HTMX logo
React logo Vue logo Angular logo Preact logo Solid logo Solid logo JavaScript logo
React logo Vue logo Angular logo Preact logo React logo React logo Qwik logo


List of existing implementations. Look at the source code, try them out, and maybe add your own.

vanilla, no frameworks

Modular Monolith

universal rendering

ESI, Web Components

Piral & React
SPA, app shell


Picard.js & Preact
SPA, Native Federation


Your Implementation ...

[integration techniques]
screen1 screen2 screen3

TodoMVC for Micro Frontends

A micro frontends architecture can be built in many ways. Custom-crafted and tailored to your organization's specific needs or by following the rules of a specific micro frontends meta-framework. The final result is also affected by the technologies you choose and whether you want to render your application on the server and/or client.

Making good choices is not always easy. Being able to look at real-world code and examples helps everyone involved get a good understanding of your decisions and their implications.

The Tractor Store aims to be to micro frontends what TodoMVC was to the advent of JavaScript frameworks in the late 2000s: An awesome collection of different implementations for the same application. A valuable learning resource for people new to this topic, and also a good basis for advanced discussions.

View Tractor Store

What do all implementations have in common?

Team boundaries

The webshop is divided into three systems. Each owned by a dedicated team. The border placement is not important as long as the teams stay resposible for their features. Read more.

Features & content

From an end-users perspective, all implementations should look and work the same.

Framework-agnostic integration

Although it's common, that adjacent teams use the same technologies, they must be able to evolve or change their tech-stack independently.

Independent deployment

Teams must be able to develop, test and deliver new features without consulting other teams or touching their code.

Technological challenges

Team Boundaries

The three teams and their missions and responsibilities inside the Tractor Store.

Team Explore

Help users explore the tractor portfolio and stores locations.

home, product lists, stores, recommendations

Team Decide

Help users decide what model tractor they should choose.

product page

Team Checkout

Guide users through the checkout process.

cart, checkout, thanks


boundary toggle

Boundary Toggle

Boundaries can be toggled off and on. Use the application like an end-user or switch on boundaries to see feature-ownership.


Complete Online Shop

Homepage, category, stores, product detail, cart, checkout and thank you page are included.
header and footer

Header & Footer

Owned by Team Explore. The same across all pages. Except for the checkout page.



Color-matched tractor suggestions. Based on product selection and shopping cart contents.


Shopping Cart

Add and remove tractors. Minicart updates accordingly.

store picker

Forms example

Checkout address form with embedded store picker owned by explore.

thank you confetti

Confirmation Confetti

Celebration on success. External dependency powered.


How to Contribute

  1. Create a new repository
    Pick an existing Tractor Store repository (e.g. blueprint or preact) and create your own repository based on it.
  2. Choose framework, technique and implement
    Use your desired frameworks and techniques to implement the Tractor Store. Make sure you catch all the features described above.
  3. Describe your implementation
    Explain your implementation in the README.md file. Fill out the specs table. Describe what may be different or special about your take on the Tractor Store.
  4. Submit your implementation
    Write us an email with a link to your repository and we'll add it to the list. Bonus points if you can provide a live demo.

Watch the Presentation

Learn more about the ideas behind the Tractor Store 2.0 by watching Michael's presentation at the Micro Frontends Conference 2024. Slides are available on Speaker Deck.