All Projects → GraphCMS → Gatsby Graphcms Ecommerce Starter

GraphCMS / Gatsby Graphcms Ecommerce Starter

Swag store built with GraphCMS, Stripe, Gatsby, Postmark and Printful.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Gatsby Graphcms Ecommerce Starter

Discord Fork
An open source Discord Bot List made with GatsbyJS
Stars: ✭ 60 (-66.29%)
Mutual labels:  netlify, gatsbyjs
Bootcamp 2020
Learn to Build Modern Full Stack Serverless Multi-Tenant SaaS Apps and APIs
Stars: ✭ 369 (+107.3%)
Mutual labels:  netlify, gatsbyjs
archive-jul.sh
archive of my personal website built w gatsby.js
Stars: ✭ 31 (-82.58%)
Mutual labels:  netlify, gatsbyjs
gatsby-blog-template
✍️ A GatsbyJS Blog Template for blogging purposes.
Stars: ✭ 38 (-78.65%)
Mutual labels:  netlify, gatsbyjs
Unicorn Mart
A proof of concept e-commerce store leveraging Contentful, GatsbyJS, Stripe, and serverless via clay.run
Stars: ✭ 21 (-88.2%)
Mutual labels:  netlify, gatsbyjs
gatsby-starter
Gatsby Starter for creating portfolio & blog.
Stars: ✭ 55 (-69.1%)
Mutual labels:  netlify, gatsbyjs
blog.georgi-yanev.com
📘 Personal blog built with Gatsby and hosted on Netlify
Stars: ✭ 17 (-90.45%)
Mutual labels:  netlify, gatsbyjs
Here Covid 19 Tracker
Using HERE Technologies APIs, fork and build your own COVID-19 Tracker. For a live version, see the website.
Stars: ✭ 200 (+12.36%)
Mutual labels:  netlify, gatsbyjs
Gatsby Starter Ghost
A starter template to build lightning fast websites with Ghost & Gatsby
Stars: ✭ 752 (+322.47%)
Mutual labels:  netlify, gatsbyjs
Gatsby Starter Gcn
A starter template to build amazing static websites with Gatsby, Contentful and Netlify
Stars: ✭ 488 (+174.16%)
Mutual labels:  netlify, gatsbyjs
testimonial
Jamstack app using Gatsby, Netlify, and FaunaDB.
Stars: ✭ 23 (-87.08%)
Mutual labels:  netlify, gatsbyjs
Gatsby Advanced Starter
A high performance skeleton starter for GatsbyJS that focuses on SEO/Social features/development environment.
Stars: ✭ 1,224 (+587.64%)
Mutual labels:  netlify, gatsbyjs
shopnote
shopnote is a JAMstack application that helps in creating notes with shopping items. This application is built to showcase the JAMstack concept using Fauna, Netlify Serverless Functions and GatsbyJS.
Stars: ✭ 15 (-91.57%)
Mutual labels:  netlify, gatsbyjs
gatsby-portfolio
danielfr.com/
Stars: ✭ 36 (-79.78%)
Mutual labels:  netlify, gatsbyjs
osf-website
🌍 Website for Open Source Festival
Stars: ✭ 17 (-90.45%)
Mutual labels:  netlify, gatsbyjs
gatsby-starter-antoine
My opinionated Gatsby.js starter
Stars: ✭ 17 (-90.45%)
Mutual labels:  netlify, gatsbyjs
30 Seconds Web
Website infrastructure for 30-seconds projects.
Stars: ✭ 391 (+119.66%)
Mutual labels:  netlify, gatsbyjs
Dantecalderon.dev
💻 ❤️ My personal website
Stars: ✭ 51 (-71.35%)
Mutual labels:  netlify, gatsbyjs
Gatsby Shopify Theme
🛒 Simple theme to build a blazing simple and fast store with Gatsby and Shopify.
Stars: ✭ 95 (-46.63%)
Mutual labels:  netlify, gatsbyjs
Nextjs Netlify Blog Template
Next.js blogging template for Netlify
Stars: ✭ 141 (-20.79%)
Mutual labels:  netlify

THIS REPO IS ARCHIVED. YOU SHOULD NOW VISIT https://github.com/GraphCMS/graphcms-commerce-starter


gatsby-graphcms-ecommerce-starter

Minimalist dropshipping swag store built with GraphCMS, Stripe, Gatsby, Postmark and Printful.

Read more

The stack

Why settle for monolithic ecommerce platforms when you can make the most of the best APIs to build what you want. In this example we use a variety of services to perform your typical ecommerce tasks. #DIYCommerce

  • GraphCMS: Localised product content, reviews, and order management.
  • Stripe: Used to securely process payments and Strong Customer Authentication.
  • Gatsby: Statically build product pages and handle cart/checkout logic.
  • Postmark: Deliver order received and dispatched email notifications to customers.
  • Printful: Create inventory and drop ship with ease.

How it works

  1. Gatsby will source products from Printful, and together with GraphCMS, Gatsby will enrich the product nodes. This means we can use Printful for inventory and GraphCMS for presentation data.

  2. The "Add to Cart" function is handled client side, this is typically where you might reach to implement your own commerce API if you want to perform sophisticated logic around item taxes and handling discount codes.

  3. The checkout is handled by a custom GraphQL server which creates an order with Printful, handles 3D Secure 2 payments with Stripe and sends the order details onto GraphCMS.

  4. Orders are then automatically fulfilled with Printful once a payment is received, and in return updates GraphCMS via a webhook to set the order to fulfilled.

⚠️ You must have a payment method registered with Printful for orders to be fulfilled automatically. You will be charged for Printful orders once they are created via the API, it's your responsibility to capture payments/manage payouts any funds from the customer via Stripe.

How to use

If you wish to extend and work with this example locally, follow the instructions below.

If you'd rather check out a demo or deploy to your own Netlify, you can do that too.

First, you will need accounts at GraphCMS, Stripe, Gatsby, Postmark and Printful.

1. Download and install dependencies

git clone [email protected]:graphcms/gatsby-graphcms-ecommerce-starter.git
cd gatsby-graphcms-ecommerce-starter
yarn # npm install
cp .env.sample .env

2. Setup development environment variables

You will need to create a project from template inside GraphCMS to carefully match what is expected from GraphCMS.

You'll need an account with GraphCMS, Stripe and Printful for this demo to fully work. It's recommended you use separate API keys for development and production.

Add the necessary variables to .env.

3. (optional): Configure Stripe/Printful webhooks

More details coming soon

4. Run locally

Once all dependencies and environment variables are satisfied, you can run Gatsby locally to build in development:

yarn dev
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].