Example Storefront

Abstract

1. Introduction

This Example Storefront is to serve as a reference on how to implement a web based storefront using the Reaction Commerce GraphQL API. You can fork this project as a jumping off point or create your own custom experience using your preferred client-side technology. While we believe our example storefront is full-featured enough to use in production, it may be missing features your shop requires at this time.

This example storefront is built with Next.js, React, GraphQL, and Apollo Client

Mailchimp Open Commerce is an API-first, headless commerce platform built using Node.js, React, and GraphQL. It plays nicely with npm, Docker and Kubernetes.

2. Objective

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 with the GraphQL API.

This project demonstrates how JavaScript can be applied to a real-world Full Stack Web Development problem.

3. Key Features / Modules

• Headless ecommerce example storefront built with Next.js, React, GraphQL, Apollo Client
• Reaction GraphQL API integration
• Server-side rendering
• Payments with Stripe with Strong Customer Authentication included.
• Analytics with Segment or any other provider
• Reusable, customizable, themeable ecommerce React components from the Example Storefront Component Library with Styled Components
• Written in ES6, configured with ES6
• Containerized with Docker

4. Technology Stack

• run docker-compose run --rm --publish 9229:9229 --publish 4000:4000 -e NODE_ENV=development web node --inspect=0.0.0.0:9229 ./src/server.js
• Open Chrome and browse to chrome://inspect. Find the process under Remote Target and click inspect.
• cd to your local reaction-component-library repo.
• Git checkout the proper branch that you want to link
• cd into the package folder of this repo, and run the command yarn install followed by yarn build
• After the build is done, cd into the new dist folder it just built and run yarn link to allow the library to be installed into the storefront. This will link @reactioncommerce/components
• Inside the example-storefront repo, temporarily rename your .yarnrc file to anything else (i.e. .yarnrc-temp)
• Run yarn install and then the command yarn link "@reactioncommerce/components" to set the local version as an override of the published npm version

5. System Requirements

General requirements for this technology stack — check the README for exact versions.

• Node.js (LTS) and npm
• A modern web browser
• VS Code or any code editor
• Git (to clone the repository)

6. Installation & Setup

git clone https://github.com/reactioncommerce/example-storefront.git
cd example-storefront

docker build --network=host -t  reactioncommerce/example-storefront:X.X.X .

docker run -it --name storefront -p 4000:4000 --env-file .env.prod --network reaction.localhost reactioncommerce/example-storefront:X.X.X

docker stop reaction-storefront

Full setup instructions are in the project README.

7. Future Enhancements

Suggested extensions you can add to make this your own project.

• Add role-based access control
• Deploy on a VPS or cPanel hosting with a custom domain
• Add automated tests and a CI pipeline

8. Viva / Review Questions

Common questions examiners ask for projects in this domain.

1. Explain the frontend, backend and database layers of this application.
2. How is user authentication and authorisation implemented?
3. Describe the main database tables / collections and their relationships.
4. Which REST APIs or routes are exposed and what do they return?
5. How would you deploy this application to production?

9. Source Code & License

This project is developed by reactioncommerce and published on GitHub under the Apache License 2.0. Please follow the license terms and credit the original author when you use or modify this code.