Gatsby Starter Ecommerce

screenshot of Gatsby Starter Ecommerce
gatsby
react
styled-components
semantic-ui

Gatsby starter for creating an eCommerce site using the Moltin eCommerce Api

Overview

The Gatsby Starter eCommerce is a starter template for creating an eCommerce site using the Moltin eCommerce API. It is based on an existing NextJS eCommerce starter and has been adapted for use with GatsbyJS. The starter has been updated to Gatsby v2, with the original version available in the "gatsby-v1" branch. This starter provides a solid foundation for building an eCommerce site with features such as Moltin eCommerce API integration, React 16, PWA support, Eslint & Prettier, Styled Components, Google Analytics integration, Semantic-UI, and authentication via Moltin and Stripe checkout.

Features

  • Moltin eCommerce API: Integration with the Moltin eCommerce API allows for seamless management of products, inventory, and orders.
  • React 16: The starter template utilizes the latest version of React, providing a modern and efficient development experience.
  • PWA: The site is designed as a Progressive Web App, offering a web experience that can be installed on mobile devices and work offline.
  • Eslint & Prettier: The codebase is configured with Eslint and Prettier, ensuring consistent code formatting and code quality.
  • Styled Components: The CSS styling is achieved using the Styled Components library, offering a modular and reusable styling approach.
  • Google Analytics: Integration with Google Analytics allows for tracking and analysis of website traffic and user behavior.
  • Semantic-UI: The starter template incorporates Semantic-UI, a popular CSS framework, providing a range of pre-designed components for faster development.
  • Authentication via Moltin: Users can create accounts and log in to the site using the authentication functionality provided by Moltin.
  • Stripe checkout: The site supports Stripe checkout, allowing for secure and convenient payment processing.
gatsby
Gatsby

GatsbyJS is a free and open-source static site generator based on React. It uses a modern development stack including Webpack, GraphQL, and modern JavaScript and CSS frameworks. It also provides a rich set of plugins, starters, and themes.

react
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

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.

semantic-ui
Semantic UI

Semantic UI is a popular front-end development framework that provides a set of pre-designed user interface components to help developers create responsive and mobile-friendly web applications with ease. It emphasizes a clear and intuitive naming convention for CSS classes, making it easier to customize and maintain the design of web applications.

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

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

github-pages
GitHub Pages

Gridsome is a Vue.js-based static site generator that makes it easy to build fast and flexible websites and applications by leveraging modern web technologies like GraphQL, Webpack, and hot reloading