Astro Hackathon Showcase

🎨 Themes ⭐️ Category Winner ⭐️

astro-snipcart (design system)

by Lloyd Atkinson

GitHub npm Live Preview

README.md

Astro Hackathon winner’s statuette

Welcome to astro-snipcart 👋

Version Documentation License: MIT Twitter: lloydjatkinson

Astro Snipcart allows developers to rapidly build E-Commerce sites using the Astro framework and the Snipcart platform. Create an e-commerce site with just a few lines of HTML and Astro components!

This Astro integration contains all of the features that you need to build an e-commerce site with Snipcart, including:

  • Automatic installation of the Snipcart library
  • Zero JavaScript by default (apart from Snipcart)
  • Astro components to define products
  • Astro components for features such as displaying basket and total price
  • TypeScript based product definitions surfaced as Astro component props
  • An optional small design system providing common e-commerce components
  • 🔜 Not just products, but subscription support also!

🏠 Homepage

Demo

Install Astro Snipcart

This provides you with a set of Astro components that allow you to define your products and enables checkout. They do not have any visual aspects, do not imply any sort of theme, and are up to you to work with. These are how your application and Snipcart interact.

npm install @lloydjatkinson/astro-snipcart

(Optional) Install Astro Snipcart Design System

This builds upon (and depends upon Astro Snipcart) and provides an optional E-Commerce orientated design system which you can use all or parts of as the foundation for your E-Commerce site. In fact, you can build real-world sites as shown in this playground demo.

npm install @lloydjatkinson/astro-snipcart-design-system

You’ll then need to follow the steps to setup Tailwind and the design system as per the Astro Snipcart documentation

Here’s a brief example of what you can do with the design system:

<Stack
    gap={{
        mobile: 'small',
        desktop: 'large'
    }}>
    <Text
        as="h1"
        size="xlarge"
        weight="strong"
        tracking="tighter">
        I'm some styled text!
    </Text>
    <Price
        currency="GBP"
        price={ 10 }
        originalPrice={ 12 }
        size="large" />
</Stack>

Astro Snipcart

Which can be built up into real-world site designs:

Astro Snipcart

Development and build

This project is a monoepo. Additionally, it uses pnpm as it’s package manager. The packages directory is where the source is contained.

Install

pnpm -r i

Usage

pnpm run docs
pnpm run playground

Format & Lint

pnpm -r format
pnpm -r lint

Run tests

pnpm -r test

Author

👤 Lloyd Atkinson

Show your support

Give a ⭐️ if this project helped you!

Extra links

Description

Create an e-commerce site and start selling products with just a few lines of HTML and Astro components, within a few minutes!

Hi! I’m really proud to present my Astro 🚀 hackathon project - an integration with an e-commerce platform (Snipcart)! This project allows you to build your e-commerce store using Astro components! This project represents a considerable amount of time and effort.

Using this integration you could potentially start selling products using Snipcart within a few minutes of creating your project and creating your Snipcart account.

Snipcart handles payments, taxes, shipping costs, refunds, customer account creation, etc.

The project has two parts. Firstly, astro-snipcart currently contains a set of components that are “renderless” which is to say they don’t dictate any styles or content. These are how your site integrates with Snipcart.

Secondly, astro-snipcart-design-system is the optional Tailwind based design system that depends on astro-snipcart. It is an e-commerce orientated design system allowing for rapid implementation of an e-commerce site. In fact, the live demo is built with it!

This is a long-term OSS project! 💯