React Templates & Themes Logo React Templates & Themes
Example Storefront screenshot

Example Storefront

Author Avatar Theme by Reactioncommerce
Updated: 7 Oct 2022
610 Stars

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...

Github Live Preview

Categories

Express Nextjs Styled components Ecommerce

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

Installation

To install and run the storefront, follow these steps:

  1. Clone the repository.
  2. Install the necessary dependencies using npm or yarn.
  3. Set up Stripe payment processing by adding your public Stripe API key to the .env file.
  4. Open the Reaction Admin app at http://localhost:4080 and log in as an Admin user.
  5. Enable Stripe payment by checking the box and adding a Stripe secret key and public key.
  6. Enable flat-rate shipping by checking the box in the Shipping settings.
  7. Start the storefront and other necessary services using the provided URLs and ports.

Summary

Example StorefrontMailchimp Open Commerce is a powerful API-first, headless commerce platform built using Node.js, React, and GraphQL. It offers a robust set of core commerce capabilities and allows for extensive customization. The example storefront, built with Next.js, React, GraphQL, and Apollo Client, serves as a reference project and provides features such as server-side rendering, payments with Stripe, analytics integration with Segment, and reusable ecommerce React components. With its easy installation process and Docker containerization, Example StorefrontMailchimp Open Commerce is a flexible and scalable solution for building web-based storefronts.