Multi Cart

Multi Cart is a full-stack serverless React shopping cart web application built as a demo and study project, demonstrating GraphQL data fetching, CI/CD, and modern React component composition.

What is Multi Cart?

Multi Cart is a full-stack React serverless web application that implements a multi-cart shopping experience, where users create and edit multiple named carts. It takes user input for cart items and account details, and saves them to a serverless GraphQL backend via AWS AppSync. The app is built and deployed with Next.js, runs on Vercel, and is authored by Charlie Argue as a learning resource. It was substantially refactored in April 2023 to follow React best practices such as component composition, minimal state management, and auto-generated typed hooks.

Key Features

• Component composition — UI elements like the search bar and drawer header are passed as composed React components rather than configured through props, as shown in the NavBar and DrawerContainer code samples.
• Minimal state management and effects — logic is encapsulated into custom hooks such as useSaveAsCurrentCart, keeping components simple and testable.
• Auto-generated GraphQL hooks — typed React hooks are generated directly from the GraphQL schema via codegen, eliminating hand-written API glue.
• Custom urql Graphcache — a customized cache and GlobalFetching exchange in the react-data-access library optimizes data fetching and avoids unnecessary API calls.
• Full shopping cart workflow — users create a new cart from the navbar menu, edit line items in a table, manage linked accounts through a drawer, and rely on an AutoSave component for persistence.
• CI/CD pipeline — GitHub Actions, Terraform Cloud, and Vercel deployments are wired together, including a custom incoming webhook that acts as glue between Terraform Cloud and GitHub Actions.
• Testing setup — Jest and Cypress are configured, and components are designed to be easily mockable with MSW (Mock Service Worker).
• MIT licensed — the entire repository is released under the permissive MIT License.

Who is it for?

• React developers learning GraphQL — can study a complete, real-world codebase that demonstrates codegen, urql caching, and serverless data fetching.
• Full-stack developers exploring serverless architecture — can see how AWS AppSync, Terraform, Vercel, and GitHub Actions fit together in one project.
• Engineering teams evaluating frontend best practices — can review the 2023 refactoring notes and linked code samples for component composition, custom hooks, and D.R.Y. principles.

What can you do with Multi Cart?

• Learners: trace the flow from a component like NewCartButton through EditCartPage down to CartLineForm to understand a clean component hierarchy.
• DevOps engineers: inspect the custom incoming webhook and Terraform Cloud integration to learn how to bridge CI/CD tools.
• Frontend architects: see how a GraphQL codegen setup generates typed hooks, and how a customized urql cache reduces network requests.

How does Multi Cart work?

The app starts with a Next.js frontend where a user opens the cart menu and clicks "New Cart". They land on an Edit Cart page containing a table of line items; each line can be edited through a form, and related accounts are managed in a drawer. Changes are saved automatically via an AutoSave component to the AppSync backend, with custom urql exchanges handling caching and global fetching.

Pros and cons

• Pros: MIT licensed, well-documented with a README table of contents and a component guide, typed GraphQL hooks, and a real CI/CD pipeline.
• Cons: It is a demo/study project rather than a production-ready ecommerce template, so it lacks payment processing and other production features.

FAQ

Is Multi Cart free?

Yes, the entire source code is available on GitHub under the MIT License, so you can freely use, modify, and distribute it.

Is Multi Cart production-ready?

No, it was built for demo and study purposes. The README lists known issues and future enhancements separately, and it does not include ecommerce features like payment processing.

What technologies does Multi Cart use?

The stack includes React, Next.js, TypeScript, GraphQL, AWS AppSync, urql, Jest, Cypress, Terraform, and Vercel. The repo also lists topics for appsync, boilerplate, graphql, jest, nextjs, react, terraform, and typescript.