SpreadShop
A fully responsive e-commerce storefront built with Astro, showcasing a digital product catalog for spreadsheet templates.
Homepage
Full landing page with hero section, product grid, feature highlights, customer testimonials, and a call-to-action banner.
Product Catalog
Browse page displaying all products as interactive cards with badges, pricing, and add-to-cart functionality.
Product Detail
Dynamic pages generated at build time from a data layer via getStaticPaths(). Each page includes an image gallery with thumbnail navigation, feature list, pricing with discount support, and related product recommendations.
Shopping Cart
Client-rendered cart with quantity controls, item removal, order summary, and empty-state handling. Cart state is managed via a global CartManager object on window, backed by localStorage.
Architecture Highlights
Component-driven design — The UI is composed of reusable Astro components (Button, PriceTag, ProductCard, ProductGallery) with typed props interfaces. The Button component polymorphically renders as <a> or <button> based on whether an href is provided.
Design token system — All colors, spacing, typography, radii, shadows, and transitions are defined as CSS custom properties in a single global.css file, ensuring visual consistency without a CSS framework. Responsive typography adjusts token values at breakpoints rather than overriding individual components.
Client-side cart — Components communicate cart changes through CustomEvent dispatching (cartUpdated), allowing the header badge and cart page to stay in sync without a framework-level state manager.
Static generation with dynamic routes — Product detail pages use Astro’s [slug].astro pattern with getStaticPaths() to pre-render a page per product from the data layer at build time, resulting in zero runtime server cost.
Zero JavaScript frameworks — All interactivity (cart management, gallery thumbnails, add-to-cart feedback) is handled with vanilla JS in <script> tags, keeping the bundle minimal.
Fully custom SVG illustrations — Product mockups, icons, and the hero visual are inline SVGs that reference CSS custom properties for theming, avoiding external image dependencies.