Example Storefront
Example Storefront is Reaction Commerce’s headless ecommerce storefront - Next.js, GraphQL, React. Built using Apollo Client and the commerce-focused React UI components provided in the Storefront Component Library (reactioncommerce/reaction-component-library). It connects with Reaction backend w...
Overview
Example StorefrontMailchimp Open Commerce is an API-first, headless commerce platform built using Node.js, React, and GraphQL. It is a reference project for implementing a web-based storefront using the Reaction Commerce GraphQL API. The example storefront is built with Next.js, React, GraphQL, and Apollo Client, and offers features such as server-side rendering, payments with Stripe, analytics with Segment, and customizable ecommerce React components.
Features
- Robust set of core commerce capabilities
- Customizable platform with the ability to extend, overwrite, or install packages
- Next.js, React, GraphQL, and Apollo Client for building the storefront
- Headless ecommerce architecture
- Server-side rendering for improved performance
- Payments with Stripe, including Strong Customer Authentication
- Analytics integration with Segment or other providers
- Reusable, customizable, themeable ecommerce React components from the Example Storefront Component Library, utilizing Styled Components
- Written in ES6 and configured with ES6
- Containerized with Docker for easy deployment
- Express
Express.js is a simple Node.js framework for single, multi-page, and hybrid web applications.
- Next.js
Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- Styled Components
Styled Components is a popular library for styling React components using CSS syntax. It allows you to write CSS in your JavaScript code, making it easier to create dynamic styles that are specific to each component.
- Ecommerce
Ecommerce websites sell products or services to customers through an online storefront. These websites typically include features such as product listings, shopping carts, payment processing, and order management tools.
- Apollo
Apollo is an open-source platform for building GraphQL APIs that connects with any data source. It provides a powerful set of tools and features for developers, including client and server-side caching, real-time data synchronization, and a seamless integration with popular frontend frameworks.
- Docker
A website that uses Docker for containerization to streamline development, testing, and deployment workflows. This includes features such as containerization of dependencies, automated builds and deployments, and container orchestration to ensure scalability and availability.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Graphql
A website that uses GraphQL as a query language to manage data fetching and state management. This includes features such as a strongly typed schema, client-side caching, and declarative data fetching to streamline data management and optimize website performance.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.
