Astro Hackathon Showcase

🎨 Themes

astro-ecommerce-template

by Minh Turi

GitHub Live Preview

README.md

Astro Ecommerce Template

Demo

Description

This is the simplified version of this Astro Vendure storefront project. Data is hardcoded and only meant for showcase purpose. You can use this template as a starting point to build your storefront.

Features

This project supports common ecommerce flow such as ordering and managing profile.

  • Order flow:

    1. Add item to cart
    2. Modify cart
    3. Add shipping address
    4. Authorize payment (dummy payment provider for now)
  • Profile management:

    • Orders
    • Addresses
    • Account detail

πŸš€ Project Structure

Inside of your Astro project, you’ll see the following folders and files:

React components

These are responsible for building UI components and interactivities on the client. As they are just React components, you can probably extract and use them anywhere else (in React project, or Nextjs project …). It also follows design-guide carefully in order to create modern looking UI. By quickly modifying color primary / typography / spacing system in tailwind-themes.js you are good to go with your brand.

β”œβ”€β”€ src/
β”‚   β”œβ”€β”€ components/
β”‚   β”‚   β”œβ”€β”€ ui
β”‚   β”‚   β”‚    └── Button
β”‚   β”‚   β”‚    └── Input
β”‚   β”‚   β”‚    └── ...
β”‚   β”‚   β”œβ”€β”€ icon
β”‚   β”‚   β”‚    └── ShoppingBag
β”‚   β”‚   β”‚    └── Search
β”‚   β”‚   β”‚    └── ...
β”‚   β”‚   β”œβ”€β”€ cart
β”‚   β”‚   β”‚    └── index.jsx
β”‚   β”‚   β”‚    └── ...
β”‚   β”‚   β”œβ”€β”€ checkout
β”‚   β”‚   β”‚    └── index.jsx
β”‚   β”‚   β”‚    └── ...
β”‚   β”‚   β”œβ”€β”€ product
β”‚   β”‚   β”‚    └── index.jsx
β”‚   β”‚   β”‚    └── ...
β”‚   β”‚   β”œβ”€β”€ profile
β”‚   β”‚   β”‚    └── index.jsx
β”‚   β”‚   β”‚    └── ...
β”‚   β”‚   β”œβ”€β”€ login
β”‚   β”‚   β”‚    └── index.jsx
β”‚   β”‚   β”‚    └── ...
β”‚   β”‚   β”œβ”€β”€ register
β”‚   β”‚   β”‚    └── index.jsx
β”‚   β”‚   β”‚    └── ...

Astro components

These are responsible for layout / non-state Astro component rendered at server.

β”œβ”€β”€ src/
β”‚   β”œβ”€β”€ pages/
β”‚   β”‚   └── index.astro
β”‚   β”‚   └── login.astro
β”‚   β”‚   └── register.astro
β”‚   β”‚   └── cart.astro
β”‚   β”‚   └── checkout.astro
β”‚   β”‚   β”œβ”€β”€ product
β”‚   β”‚   β”‚    └── [slug].astro
β”‚   β”‚   β”œβ”€β”€ collection
β”‚   β”‚   β”‚    └── [slug].astro
β”‚   β”œβ”€β”€ layouts/
β”‚   β”‚   └── base.astro

Future improvements

  1. Addresses management
  2. Writing test
  3. …

Powered by

About me

I am Minh from Berlin. Coding and desiging are my jobs 😁.

I hope you find this project useful!

Description

I was able to fix server issue. Hope the SSR live link works as expected πŸ˜† I must say I’m glad that I found out about Astro. It has huge benefit on working with popular component framework as React, Vue which I don’t find it with 11ty in the past. So building static site that generates a lot of data is definitely suited for Astro. For some use case that requires complex interactivity on client side I think I have to choose between Astro and NextJS. Still some bugs along development but so far so good. Thanks Astro project and community! πŸ™‚