@graphcommerce/docs 3.1.4

package/content/getting-started/readme.md

@@ -0,0 +1,294 @@
+---
+menu: Overview
+order: create,start-building,header,pages,graphcms-component
+metaTitle:
+  Start your Reactjs Ecommerce project with the GraphCommerce React Magento 2
+  Template
+metaDescription:
+  'Overview of the magento-graphcms example, the GraphCommerce reactjs ecommerce
+  template for Magento storefronts'
+---
+
+> **Developer preview**  
+> This is a developer preview of GraphCommerce. The documentation will be
+> updated as GraphCommerce introduces
+> [new features and refines existing functionality](https://github.com/ho-nl/m2-pwa/releases).
+
+# GraphCommerce magento-graphcms example overview
+
+GraphCommerce offers a magento-graphcms example that provides an approachable
+path to building GraphCommerce custom Magento e-commerce storefront. This guide
+describes what's included in the magento-graphcms example and how you can begin
+exploring it.
+
+## How it works
+
+Most of the files that you'll work on within your GraphCommerce project are
+located in the /components or /pages directories.
+
+- A minimal set of components you would most likely modify for your project
+- The main layout component, which renders header, navigation, and footer
+- A set of boilerplate pages, which handle URL routing
+- Basic global styles in theme.ts provided by
+  [Mui ↗](https://mui.com/customization/default-theme/)
+- Interface translation files
+
+```txt
+File structure of the graphcommerce-magento example
+
+├── components
+    └── Layout
+        └── Footer.tsx
+        └── LayoutFull.tsx
+    └── GraphCMS
+        └── Asset
+        └── RowHeroBanner
+        └── RowQuote
+    └── theme.ts
+    └── ...
+├── graphql
+    └── CategoryPage.graphql
+    └── PageLink.graphql
+    └── ...
+├── pages
+    └── product
+        └── [url].jsx
+        └── ...
+    └── page
+        └── [...url].jsx
+    └── [...url].tsx
+    └── [cart].tsx
+    └── _app.tsx
+    └── _document.tsx
+    └── ...
+├── locales
+    └── en.po
+    └── nl.po
+    └── ...
+```
+
+## Components
+
+The GraphCommerce magento-graphcms example provides a series of components that
+you can use as a starting point for development. These components query the
+Magento GraphQL API for efficient data-fetching. Most components have a .graphql
+file that contains the GraphQL query fragment.
+
+### Modifying components
+
+By default, the components that you would most likely modify are located in the
+`/components` directory. You can directly modify these components and customize
+styles.
+
+Others components are imported where needed, and can be recognized by their
+namespace `@graphcommerce/`. There are different ways to
+[customize styles](https://mui.com/customization/how-to-customize/) of importend
+components. The most common way is by adding an sx prop: `sx={{color:'red'}}`.
+
+If you want to extend a component's behavior or built your own, you can
+duplicate a `@graphcommerce/` component to your /components directory. You'll
+need to update all imports with the new location of your local component. This
+also applies if you want to modify a component's or
+[page's query](../getting-started/start-building.md).
+
+### Component overview
+
+| Local             |                                                                             |                 |
+| ----------------- | --------------------------------------------------------------------------- | --------------- |
+| /Asset            | [Source](../../../../examples/magento-graphcms/components/GraphCMS/Asset)   | [Documentation] |
+| /Blog             | [Source](../../../../examples/magento-graphcms/components/Blog)             | [Documentation] |
+| /Layout           | [Source](../../../../examples/magento-graphcms/components/Layout)           | [Documentation] |
+| /ProductListItems | [Source](../../../../examples/magento-graphcms/components/ProductListItems) | [Documentation] |
+| /Usps             | [Source](../../../../examples/magento-graphcms/components/Usps)             | [Documentation] |
+
+| Packages (/node_modules directory/)          |                                                            |
+| -------------------------------------------- | ---------------------------------------------------------- |
+| @graphcommerce/framer-next-pages             | [Source](../../../packages/framer-next-pages/)             |
+| @graphcommerce/googleanalytics               | [Source](../../../packages/googleanalytics/)               |
+| @graphcommerce/googlerecaptcha               | [Source](../../../packages/googlerecaptcha/)               |
+| @graphcommerce/googletagmanager              | [Source](../../../packages/googletagmanager/)              |
+| @graphcommerce/graphcms-ui                   | [Source](../../../packages/graphcms-ui/)                   |
+| @graphcommerce/graphql                       | [Source](../../../packages/graphql/)                       |
+| @graphcommerce/graphql-mesh                  | [Source](../../../packages/graphql-mesh/)                  |
+| @graphcommerce/image                         | [Source](../../../packages/image/)                         |
+| @graphcommerce/lingui-next                   | [Source](../../../packages/lingui-next/)                   |
+| @graphcommerce/magento-cart                  | [Source](../../../packages/magento-cart/)                  |
+| @graphcommerce/magento-cart-billing-address  | [Source](../../../packages/magento-cart-billing-address/)  |
+| @graphcommerce/magento-cart-checkout         | [Source](../../../packages/magento-cart-checkout/)         |
+| @graphcommerce/magento-cart-coupon           | [Source](../../../packages/magento-cart-coupon/)           |
+| @graphcommerce/magento-cart-email            | [Source](../../../packages/magento-cart-email/)            |
+| @graphcommerce/magento-cart-items            | [Source](../../../packages/magento-cart-items/)            |
+| @graphcommerce/magento-cart-payment-method   | [Source](../../../packages/magento-cart-payment-method/)   |
+| @graphcommerce/magento-cart-shipping-address | [Source](../../../packages/magento-cart-shipping-address/) |
+| @graphcommerce/magento-cart-shipping-method  | [Source](../../../packages/magento-cart-shipping-method/)  |
+| @graphcommerce/magento-category              | [Source](../../../packages/magento-category/)              |
+| @graphcommerce/magento-cms                   | [Source](../../../packages/magento-cms/)                   |
+| @graphcommerce/magento-customer              | [Source](../../../packages/magento-customer/)              |
+| @graphcommerce/magento-customer-account      | [Source](../../../packages/magento-customer-account/)      |
+| @graphcommerce/magento-customer-order        | [Source](../../../packages/magento-customer-order/)        |
+| @graphcommerce/magento-graphql               | [Source](../../../packages/magento-graphql/)               |
+| @graphcommerce/magento-newsletter            | [Source](../../../packages/magento-newsletter/)            |
+| @graphcommerce/magento-payment-included      | [Source](../../../packages/magento-payment-included/)      |
+| @graphcommerce/magento-product               | [Source](../../../packages/magento-product/)               |
+| @graphcommerce/magento-product-bundle        | [Source](../../../packages/magento-product-bundle/)        |
+| @graphcommerce/magento-product-configurable  | [Source](../../../packages/magento-product-configurable/)  |
+| @graphcommerce/magento-product-downloadable  | [Source](../../../packages/magento-product-downloadable/)  |
+| @graphcommerce/magento-product-grouped       | [Source](../../../packages/magento-product-grouped/)       |
+| @graphcommerce/magento-product-simple        | [Source](../../../packages/magento-product-simple/)        |
+| @graphcommerce/magento-product-virtual       | [Source](../../../packages/magento-product-virtual/)       |
+| @graphcommerce/magento-review                | [Source](../../../packages/magento-review/)                |
+| @graphcommerce/magento-search                | [Source](../../../packages/magento-search/)                |
+| @graphcommerce/magento-store                 | [Source](../../../packages/magento-store/)                 |
+| @graphcommerce/browserslist-config-pwa       |                                                            |
+| @graphcommerce/eslint-config-pwa             |                                                            |
+| @graphcommerce/next-config                   |                                                            |
+| @graphcommerce/next-ui                       |                                                            |
+| @graphcommerce/prettier-config-pwa           |                                                            |
+| @graphcommerce/react-hook-form               |                                                            |
+| @graphcommerce/typescript-config-pwa         |                                                            |
+
+## GraphCMS
+
+GraphCMS is integrated as a Content Management System. It is used to store all
+static content and provides a user-friendly interface for managing it.
+
+The magento-graphcms example offers a number of components to render this
+content in different ways, for example in the form of a page-wide hero banner, a
+list of USPs or grid of text columns.
+
+To [get started](../getting-started/create.md) with the magento-graphcms
+example, cloning the demo GraphCMS project GraphQL schema and its content is
+recommended.
+
+## Pages
+
+GraphCommerce uses Next.js
+[file-based routing ↗](https://nextjs.org/docs/routing/introduction), built on
+the concept of pages. A page is a React Component exported from a `.tsx` file in
+the /pages directory. When a file is added to the /pages directory, it's
+automatically available as a route.
+
+All routes of the app contain a URL segment that corresponds with a directory in
+the /pages directory. Magento category routes are handled by the
+`/pages/[...url].tsx` page and therefore do not contain a URL segment. As a
+result, the category URL structure of the app matches your default Magento
+frontend 1-on-1.
+
+```txt
+Page structure of the graphcommerce-magento example
+
+├── pages
+    └── about
+    └── account
+    └── api
+    └── blog
+    └── checkout
+    └── customer
+    └── modal
+    └── page
+    └── product
+    └── search
+    └── service
+├── _app.tsx
+├── _document.tsx
+├── [...url].tsx
+├── 404.tsx
+├── cart.tsx
+├── index.tsx
+├── switch-stores.tsx
+```
+
+## GraphQL API
+
+GraphCommerce is built and optimized to use data coming from Magento's GraphQL
+API. GraphCommerce uses GraphQL Mesh, which adds the ability to add extra
+(micro)services as data sources. In the magento-graphcms example, a headless CMS
+called [GraphCMS](../getting-started/../framework/graphcms.md) is integrated.
+
+By default, the GraphQL Mesh endpoint runs on route /api/grapql. You can query
+both the Magento GraphQL schema and the GraphCMS GraphQL schema. Try out the
+GraphCommerce demo
+[GraphQL Explorer ↗](https://graphcommerce.vercel.app/api/graphql) with the
+following example query:
+
+```graphql
+query {
+  products(search: "sock", pageSize: 3) {
+    items {
+      url_key
+    }
+  }
+  availableStores {
+    store_name
+    store_code
+  }
+}
+```
+
+### Query fragments
+
+Every component that requires data from Magento or GraphCMS has its own
+`.graphql` file, containing a GraphQL query fragment. GraphQL Code Generator
+(codegen) is used to convert query fragments to both the GraphQL document (query
+or mutation) and Typescript type definitions, both captured in `.gql(.ts)`
+files. `.gql(.ts)` are generated at build time.
+
+Pages run queries in the getStaticProps function and pass the response as props.
+Pages have a single page query, that combines multiple query fragments from
+components. These accumulating page queries are located in the
+/components/GraphQL directory.
+
+With the use of fragments and GraphQL Mesh, GraphCommerce retrieves all data
+from both Magento and GraphCMS in a single GraphQL query. This improves
+performance.
+
+```txt
+GraphQL queries in the graphcommerce-magento example
+
+├── GraphQL
+    └── CategoryPage.graphql
+    └── PageLink.graphql
+    └── DefaultPage.graphql
+    └── PagesStaticPaths.graphql
+    └── FooterQueryFragment.graphql
+    └── PageContentQueryFragment.graphql
+    └── ProductPage.graphql
+```
+
+## FAQ
+
+<div>
+<details>
+<summary>What are the benefits of choosing GraphCommerce for a react ecommerce project?</summary>
+
+### What are the benefits of choosing GraphCommerce for a reactjs ecommerce project?
+
+React is a very suitable framework for magento reactjs ecommerce projects.
+Magento 2 is a well established, widely used open source e-commerce solution.
+GraphCommerce brings the best of both, and includes the structure, components,
+and tooling you need to get started with react ecommerce. Using GraphCommerce
+minimizes the development effort required to launch a full featured reactjs
+e-commerce storefront with features like cart, search, layered navigation and
+category, product, account, checkout pages.
+
+</details>
+
+<details>
+<summary> Why use the GraphCommerce magento reactjs ecommerce template</summary>
+
+### Why use the GraphCommerce magento-graphcms reactjs ecommerce template
+
+The GraphCommerce magento-graphcms template contains all needed components like
+cart, search, and layered navigation for a full-featured e-commerce storefront.
+It's easy to customize and includes the structure, components, and tooling you
+need to get started. With the extensive documentation, it is more efficient to
+understand and customize the template for your next react Magento 2 project,
+than to start from scratch.
+
+</details>
+</div>
+
+## Next steps
+
+- [Get started](../getting-started/create.md) with GraphCommerce and begin
+  building a custom storefront.

package/content/getting-started/start-building.md

@@ -0,0 +1,160 @@
+---
+menu: 2. Customize a storefront
+metaTitle: Customize a storefront
+---
+
+> **Developer preview**  
+> This is a developer preview of GraphCommerce. The documentation will be
+> updated as GraphCommerce introduces
+> [new features and refines existing functionality](https://github.com/ho-nl/m2-pwa/releases).
+
+# Start building a GraphCommerce custom storefront
+
+Previously, you [created a new GraphCommerce app](../getting-started/create.md).
+You're now ready to start working on your GraphCommerce custom storefront.
+
+In this tutorial, you'll complete a series of tasks to add some specific
+functionality to your GraphCommerce app. Your final modification will be simple,
+but you’ll learn where to find resources to build more complex features on your
+own.
+
+### What you'll learn
+
+After you've finished this tutorial, you'll have accomplished the following:
+
+- Customized text and component styles
+- Fetched data from server components
+- Made changes to GraphQL queries
+
+### Requirements
+
+You're using the most recent version of GraphCommerce. We recommend using the
+latest release to get the benefits of performance, new components, and other
+best practices.
+
+You've completed the
+[Create a GraphCommerce app tutorial](../getting-started/create.md).
+
+## Step 1: Make customizations
+
+### Add text
+
+- Make sure your development environment is running at http://localhost:3000
+- In /pages/page/[url].tsx, add:
+
+```tsx
+<Typography variant='h1' gutterBottom sx={{ textAlign: 'center' }}>
+  Hello
+</Typography>
+```
+
+- Add `import { Typography } from '@mui/material'` to the list of imports at the
+  top of the file
+- Save the file to see your changes updated in real-time
+
+<figure>
+
+https://user-images.githubusercontent.com/1251986/154980151-2039c027-c31f-4b99-86f2-8c2420053da8.mp4
+
+<video width="100%" controls autoPlay loop muted>
+<source src="https://user-images.githubusercontent.com/1251986/154980151-2039c027-c31f-4b99-86f2-8c2420053da8.mp4" type="video/mp4"/>
+</video>
+
+</figure>
+
+### Change a component's style
+
+- After you've finished step 1, in /pages/page/[url].tsx find the following
+  code:
+
+```tsx
+<Typography variant='h1' gutterBottom sx={{ textAlign: 'center' }}>
+  Hello
+</Typography>
+```
+
+- Make the background color red for the Hello text:
+
+```tsx
+<Typography
+  variant='h1'
+  gutterBottom
+  sx={{ textAlign: 'center', backgroundColor: 'red' }}
+>
+  Hello
+</Typography>
+```
+
+<figure>
+
+https://user-images.githubusercontent.com/1251986/154980686-3d2bf587-16d7-412b-b05f-8b0f7b40cbfd.mp4
+
+<video width="100%" controls autoPlay loop muted>
+
+<source src="https://user-images.githubusercontent.com/1251986/154980686-3d2bf587-16d7-412b-b05f-8b0f7b40cbfd.mp4" type="video/mp4"/>
+</video>
+
+   <figcaption>Change a component's style in your GraphCommerce app</figcaption>
+</figure>
+
+## Step 2: Make GraphQL changes
+
+You might want to make changes to a GraphQL query to fetch data from Magento for
+a specific need. For example, if you want to display a certain category
+property, you need to modify a query.
+
+- In /graphql/CategoryPage.graphql, `...CategoryQueryFragment` is included as a
+  fragment
+- Open the fragment's file
+  /node_modules/@graphcommerce/magento-category/queries/CategoryQueryFragment.graphql,
+  and copy it's contents
+- In /graphql/CategoryPage.graphql, paste the contents of
+  `...CategoryQueryFragment` and add `children_count` property:
+
+```graphql
+query CategoryPage($url: String!, $rootCategory: String!) {
+  ...MenuQueryFragment
+  ...FooterQueryFragment
+  ...PageContentQueryFragment
+  ...CategoryQueryFragment
+
+  categories(filters: { url_path: { eq: $url } }) {
+    items {
+      uid
+      children_count
+      ...CategoryBreadcrumb
+      ...CategoryDescription
+      ...CategoryChildren
+      ...CategoryMeta
+      ...CategoryHeroNav
+    }
+  }
+}
+```
+
+- Save the file. /graphql/CategoryPage.gql.ts should be regenerated, and contain
+  the following addition:
+
+```json
+{ "kind": "Field", "name": { "kind": "Name", "value": "children_count" } }
+```
+
+- In /pages/[...url].tsx, show the children_count next to category title (3
+  occurrences):
+
+```tsx
+{category?.name} - ({category?.children_count})
+```
+
+## Step 3: Interactive GraphQL interface
+
+You can explore the Storefront API and run test queries in your GraphCommerce
+app. When you're running the GraphCommerce local development environment, you
+can visit the following URL to load the GraphQL Explorer:
+
+http://localhost:3000/api/graphql
+
+## Next steps
+
+- Learn how to [build a custom header](../getting-started/header.md) in
+  GraphCommerce

package/content/getting-started/vscode.md

@@ -0,0 +1,48 @@
+---
+menu: Setup VS Code
+---
+
+# Visual Studio Code
+
+GraphCommerce is a front-end web development framework written in Typescript,
+which is JavaScript with syntax for types.
+
+[Visual Studio Code ↗](https://code.visualstudio.com/) is a code editor
+redefined and optimized for building and debugging modern web applications such
+as GraphCommerce. Visual Studio Code is free and available on all platforms.
+This guide covers which useful VS Code extensions to install for an optimal
+development experience.
+
+Recommended extensions
+
+- [ESLint ↗](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) -
+  Linter tool for identifying and reporting on patterns in JavaScript
+- [Prettier ↗](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) -
+  Opinionated code formatter
+- [GraphQL ↗](https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql) -
+  Adds syntax highlighting, validation, hover information and autocompletion for
+  graphql files
+- [DotENV ↗](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv) -
+  Adds support for dotenv file syntax
+- [JavaScript Booster ↗](https://marketplace.visualstudio.com/items?itemName=sburg.vscode-javascript-booster) -
+  Advanced JavaScript/TypeScript refactorings and commands
+- [gettext ↗](https://marketplace.visualstudio.com/items?itemName=mrorz.language-gettext) -
+  Adds syntax highlight to po translation files
+
+Optional extentions
+
+- [Color Highlight ↗](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight)
+- [Material Theme ↗](https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme)
+- [Material Theme Icons ↗](https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme-icons)
+- [Output Colorizer ↗](https://marketplace.visualstudio.com/items?itemName=IBM.output-colorizer)
+- [Readability Check ↗](https://marketplace.visualstudio.com/items?itemName=jemcclin.readabilitycheck)
+- [Github Actions ↗](https://marketplace.visualstudio.com/items?itemName=me-dutour-mathieu.vscode-github-actions)
+- [MDX ↗](https://marketplace.visualstudio.com/items?itemName=silvenon.mdx)
+- [Markdown Preview Github Styling ↗](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-preview-github-styles)
+- [Yaml ↗](https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml)
+
+## Next steps
+
+- [Start building a GraphCommerce custom storefront](../getting-started/start-building.md)
+  by customizing text and component styles, fetching data from server
+  components, and making changes to GraphQL queries.

package/content/readme.md

@@ -0,0 +1,124 @@
+---
+menu: Overview
+order: getting-started,framework
+metaTitle: Start React, Next.js Magento PWA development here - GraphCommerce
+metaDescription:
+  'GraphCommerce is the open-source PWA Studio Magento 2 alternative.
+  GraphCommerce is a full-featured PWA storefront, not a Magento 2 PWA
+  extension.'
+---
+
+> **Developer preview**  
+> This is a developer preview of GraphCommerce. The documentation will be
+> updated as GraphCommerce introduces
+> [new features and refines existing functionality](https://github.com/ho-nl/m2-pwa/releases).
+
+# GraphCommerce
+
+GraphCommerce is a front-end framework used for building headless Magento
+e-commerce storefronts in React. It includes the structure, components, and
+tooling you need to get started so you can spend your time styling and designing
+high-end e-commerce progressive web apps (PWA).
+
+<figure>
+
+https://user-images.githubusercontent.com/1251986/154977573-4015e77c-43e7-481e-ab97-60c365c6b746.mp4
+
+<video width="100%" controls autoPlay loop muted>
+<source src="https://user-images.githubusercontent.com/1251986/154977573-4015e77c-43e7-481e-ab97-60c365c6b746.mp4" type="video/mp4"/>
+</video>
+
+  <figcaption>GraphCommerce magento-graphcms example demo</figcaption>
+</figure>
+
+---
+
+### Stack
+
+- Typescript
+- React
+- Nextjs
+- GraphQL
+- Mui
+- Apollo
+- GraphQL Code Generator
+- Framer Motion
+
+## Getting Started
+
+GraphCommerce offers a [magento-graphcms](./getting-started/readme.md) example
+that provides a full-featured storefront. The example integrates with your
+Magento backend and provides a full purchase journey out-of-the-box. It uses
+GraphCMS to enrich pages with multiple content components, like the homepage.
+
+The magento-graphcms example is styled using the Mui component library. You can
+start styling by making changes to the [theme](./framework/theming.md).
+
+## Features
+
+GraphCommerce features include:
+
+- App-like e-commerce UI
+- Magento e-commerce component library including cart, search, layered
+  navigation components and category, product, account, checkout pages
+- Optimized front-end performance, including bundling, image optimization, CDN
+  caching
+- Predictive URL prefetching and caching
+- Hybrid Static Site Generation (SSG)
+- SEO optimized, including accessibility, sitemap.xml, canonicals, metadata
+- Data fetching from multiple sources with the included GraphQL Mesh (composable
+  commerce)
+- Passing Google Core Web Vitals audits
+- PWA out-of-the-box
+- Magento multi-language support, a store switcher component, and framework
+  translations EN, ES, FR, DE, NL, IT
+- Deployments to Vercel
+
+## Build high-end Magento storefronts faster
+
+GraphCommerce accelerates the Magento front-end development process by using a
+carefully chosen, industry standard, tech stack. It includes Magento-specific
+React components, pages, and utilities for e-commerce. They're accessible,
+performant, and ready for use. They also help to reduce the initial complexity
+and boilerplate needed for building a custom storefront.
+
+## FAQ
+
+<div>
+<details>
+<summary>Is GraphCommerce a Magento PWA theme?</summary>
+
+### Is GraphCommerce a Magento PWA theme?
+
+GraphCommerce is not a Magento PWA theme, nor is it a Magento 2 PWA extension. A
+Magento theme is tightly integrated in the Magento codebase, where a
+GraphCommerce storefront runs as a separate application.
+
+GraphCommerce can be deployed on the same or a different server than the Magento
+backend is hosted on. All data is fetched from the Magento 2 GraphQL API. Once
+you finish GraphCommerce Magento PWA development and you are ready to launch,
+the regular Magento front-end (theme and extensions) can be decommissioned.
+
+</details>
+
+<details>
+<summary>Is GraphCommerce a PWA Studio Magento 2 alternative?</summary>
+
+### Is GraphCommerce a PWA Studio Magento 2 alternative?
+
+Yes, GraphCommerce is suitable as an alternative to Magento 2 PWA Studio.
+GraphCommerce is built with modern, open-source javascript frameworks and
+libraries. Unlike PWA Studio for Magento 2, it features an app-like e-commerce
+user interface, Hybrid Static Site Generation (SSG) and has the ability to fetch
+data from multiple sources (composable commerce).
+[Get started](./getting-started/create.md) with GraphCommerce if you're looking
+for a PWA Studio Magento 2 alternative and would like to start with Magento PWA
+development.
+
+</details>
+</div>
+
+## Next steps
+
+- [Get started](./getting-started/create.md) with GraphCommerce and begin
+  building a custom storefront.

package/content/roadmap.md

@@ -0,0 +1,31 @@
+---
+menu: Roadmap
+---
+
+# Roadmap
+
+The following overview contains the status of items on the GraphCommerce roadmap
+(items are subject to change):
+
+## In progress
+
+- [x] Framework updates (Mui5)
+- [x] Translation updates (DE, NL, ES, FR, IT)
+- [ ] Documentation and installation guide
+- [ ] Quality improvements (Reduce components, naming)
+
+## Planned
+
+- [ ] Search integration (external service)
+- [ ] Checkout UI and accessibility improvements
+- [ ] Payment service provider integration
+
+## Future
+
+- [ ] `magento` example without GraphCMS
+
+## Next steps
+
+- Refer to the
+  [Changelog](https://github.com/ho-nl/m2-pwa/blob/master/CHANGELOG.md) to see
+  what's new