---
id: task-4
title: Design purchaser page architecture
status: Done
assignee: []
created_date: '2026-01-12 15:29'
updated_date: '2026-01-30 11:33'
labels: []
dependencies: []
priority: medium
---

## Description

<!-- SECTION:DESCRIPTION:BEGIN -->
Plan the technical architecture for the new purchaser/shop page. Decide on framework, how to pull product data, and checkout flow.
<!-- SECTION:DESCRIPTION:END -->

## Acceptance Criteria
<!-- AC:BEGIN -->
- [x] #1 Choose frontend framework (Next.js, Astro, etc.)
- [x] #2 Design data flow from Zettle/Airtable to website
- [ ] #3 Plan checkout integration (Zettle payments, Stripe, etc.)
- [ ] #4 Create wireframes for shop page layout
<!-- AC:END -->

## Implementation Notes

<!-- SECTION:NOTES:BEGIN -->
Starting frontend setup with Next.js 15 + App Router + Directus SDK + Tailwind CSS

Chose Next.js 15 with App Router, TypeScript, and Tailwind CSS

Data flow: Directus REST API -> Next.js SSR/SSG -> Rendered pages

Checkout integration TBD (Stripe or Zettle - needs separate task)
<!-- SECTION:NOTES:END -->
