A Gatsby storefront for a Shopify store.

Overview

Leah Gardner Storefront

A Gatsby storefront for a Shopify store. Built as a learning project for Shopify and Gatsby integration.

This project is bootstrapped using gatsby-starter-ts

Development

To start the project locally, run:

  1. Set up a Shopify store and get the API keys. I wrote a guide on how to do this here.
  2. Rename the .env.example file to .env.development and add the API keys.
  3. Run yarn to install dependencies.
  4. Run yarn develop to start the application in development mode at http://localhost:8000.

Requirements

  • Node.js >= 14.17
  • Yarn 1 (Classic)

Directory Structure

  • .husky — Husky configuration and hooks.
  • src — Application source code, including pages, components, styles.

Scripts

  • yarn dev — Starts the application in development mode at http://localhost:8000.
  • yarn build — Compile your application and make it ready for deployment.
  • yarn serve — Serve the production build of your site
  • yarn clean — Wipe out the cache (.cache folder).
  • yarn type-check — Validate code using TypeScript compiler.
  • yarn lint — Runs ESLint for all files in the src directory.
  • yarn format — Runs Prettier for all files in the src directory.
  • yarn commit — Run commitizen. Alternative to git commit.

License

This project is licensed under the MIT License - see the LICENSE.md file for more information.

Todo

  • Check for Out of Stock Items and disable Add to Cart button with useEffect.
You might also like...

A minimal e-commerce store using Gatsby, SANITY, Stripe, Use-Shopping-Cart and Netlify

🏪 Gatsby Starter Stripemart Like a supermarket but for Stripe. No ongoing monthly costs. Perfect for artists, creators and independent builders doing

Nov 14, 2022

An e-commerce storefront starter built with Qwik and Vendure

Vendure Qwik Storefront Starter️ An e-commerce storefront for Vendure built with Qwik & Qwik City. 👉 qwik-storefront.vendure.io To do Cart ✅ Checkout

Dec 31, 2022

NX workspace for running medusa backend, storefront and admin panel with marketplace functionalities

Medusa Marketplace Project status Assigned store_id to Order, Product to make them store specific Create and process payment for an order with multipl

Nov 13, 2022

A new Node.js resource built using Gatsby.js with React.js, TypeScript, and Remark.

Nodejs.dev Nodejs.dev site built using Gatsby.js with React.js, TypeScript, SCSS, and Remark. You can find the latest Figma design protype here. 🚀 Ge

Jan 5, 2023

A build plugin to integrate Gatsby seamlessly with Netlify

A build plugin to integrate Gatsby seamlessly with Netlify

Essential Gatsby Plugin This build plugin is a utility for supporting Gatsby on Netlify. To support build caching and Gatsby functions on Netlify, you

Dec 27, 2022

React Gatsby static web tool for generative artists working on token based NFT artwork (ex: Artblocks)

React Gatsby static web tool for generative artists working on token based NFT artwork (ex: Artblocks)

token-art-tools React Gatsby static web tool for generative artists working on token/hash based NFT artwork (ex: Artblocks) https://ctrlshiftmake.gith

Dec 15, 2022

GatsbyContactFormBasedOnFormikAnalysis - This is example contact form for gatsby framework.

Gatsby minimal starter 🚀 Quick start Create a Gatsby site. Use the Gatsby CLI to create a new site, specifying the minimal starter. # create a new Ga

Jan 2, 2022

Gatsby-Formik-contact-form-with-backend-panel - Full working contact form with backend GUI panel.

Gatsby minimal starter 🚀 Quick start Create a Gatsby site. Use the Gatsby CLI to create a new site, specifying the minimal starter. # create a new Ga

Jan 2, 2022

Gatsby-starter-minimal-blog - Typography driven, feature-rich blogging theme with minimal aesthetics.

Gatsby-starter-minimal-blog - Typography driven, feature-rich blogging theme with minimal aesthetics. Includes tags/categories support and extensive features for code blocks such as live preview, line numbers, and line highlighting.

Jan 29, 2022
Owner
Yinka Adedire
Frontend developer interested in Jamstack
Yinka Adedire
A beautiful NextJS storefront for a Medusa store (The opensource alternative to Shopify)

medusa-starter-monster About Participants Yinka - @yinkakun Description Medusa Storefronts don't have to be boring. This starter is an elegant and bea

Yinka Adedire 12 Dec 16, 2022
Gatsby-blog-cosmicjs - 🚀⚡️ Blazing fast blog built with Gatsby and the Cosmic Headless CMS 🔥

Gatsby + Cosmic This repo contains an example blog website that is built with Gatsby, and Cosmic. See live demo hosted on Netlify Uses the Cosmic Gats

Priya Chakraborty 0 Jan 29, 2022
Starter-gatsby-blog - Gatsby starter for a Contentful project from the community.

Contentful Gatsby Starter Blog Create a Gatsby blog powered by Contentful. Static sites are scalable, secure and have very little required maintenance

Priya Chakraborty 0 Jan 29, 2022
An unofficial, simplified version of the @Shopify/koa-shopify-auth middleware library.

simple-koa-shopify-auth https://www.npmjs.com/package/simple-koa-shopify-auth NOTE: This package is not maintained by or affiliated with Shopify. Desc

David 20 Nov 7, 2022
Forked from hayes0724/shopify-packer Modern development tool for Shopify using Webpack 5. Easy to extend and customize, zero build config, compatible with Slate and existing websites.

Shopify Packer Modern development tool for Shopify using Webpack 5. Easy to extend and customize, zero build config, comes with starter themes and com

Web & Mobile | eCommerce | Full-Stack Developer 4 Nov 24, 2022
Shopify Landing (Open source landing page shopify application)

SHOPIFY Open source landing page shopify application Configuration and Setup Key Features Technologies used ?? Screenshots Author License Configuratio

Gilbert Hutapea 8 May 10, 2023
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023