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

Sep 8, 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

Aug 12, 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

GatsbyConf - Decoupling Drupal Using Gatsby: A Crash Course workshop

GatsbyConf - Decoupling Drupal Using Gatsby: A Crash Course workshop

Apr 19, 2022

A Gatsby-based starter theme with e-commerce styled components

A Gatsby-based starter theme with e-commerce styled components

This beautiful theme from the Matter Design Team gives you the styling and scaffolding for your next e-commerce site. You can customize to your heart'

Sep 13, 2022

open-sourced boilerplate NFT projects (Shopify, Opensea, Patreon, etc)

👋 Quickly start any NFT projects A collection of boilerplates for full-stack dapps that showcase some of the use case for NFTs. Think of web3 native,

Jan 12, 2022

🚀🚀 A Shopify embedded app starter template, with updated dependencies, session storage, app context and examples for basic functionalities.

Shopify Node App Starter This is a starter template for embedded shopify apps based on the shopify cli node app. Contributions to create the perfect s

Sep 14, 2022
Owner
Yinka Adedire
Frontend developer interested in Jamstack
Yinka Adedire
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 16 Aug 23, 2022
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 13 Jul 1, 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

Vendure 30 Sep 22, 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

Keith Hon 7 Sep 9, 2022
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

Eric Howey 23 Aug 10, 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

Node.js 2.1k Sep 19, 2022