Sluijsens
7fc06091a5
PackagesSection gebruikte tot nu toe statische data via een placeholder query-hook (FR-5). usePackagesQuery haalt nu echt op bij /api/v1/packages (relatief pad, zelfde domein op test en productie), met een foutmelding in de UI als het request faalt. Voegt ook een hand-off-document toe voor de agent die de CMS/API-kant gaat bouwen: het endpoint-contract, per veld het type/gebruik, en de huidige statische content als seed-data.
SLP Software — React Frontend
React frontend for the SLP Software marketing site. Ported 1-to-1 from the static
reference designs in References/ (slp-software.html = purple accent,
slp-software-rood.html = red accent), with an added visible theme switcher
(red default, purple selectable).
Tech Stack
- Vite + React + TypeScript
- Tailwind CSS for styling (theme tokens via CSS custom properties)
- TanStack Router (hash-based history, for FTP/static hosting compatibility)
- TanStack Query (placeholder query hook, prepared for future backend integration)
- Vitest + React Testing Library
- ESLint + Prettier
Getting Started
npm install
npm run dev
The app runs at http://localhost:5173/ by default.
Available Scripts
| Script | Description |
|---|---|
npm run dev |
Start the Vite dev server |
npm run build |
Type-check and build a production bundle to dist/ |
npm run preview |
Preview the production build locally |
npm run test |
Run the test suite once (Vitest) |
npm run test:watch |
Run the test suite in watch mode |
npm run lint |
Run ESLint |
npm run format |
Format the codebase with Prettier |
Project Structure
src/
components/ Presentational React components (Nav, Hero, PackagesSection, ...)
data/ Static site content (content.ts) — current source of truth for copy/data
hooks/ usePackagesQuery — placeholder TanStack Query hook
routes/ TanStack Router route definitions (__root.tsx, index.tsx)
theme/ Theme system (ThemeProvider, theme tokens)
test/ Test setup (Vitest + Testing Library)
fonts.ts Self-hosted font imports (@fontsource)
index.css Global styles + red/purple theme CSS variables
main.tsx Application entry point
router.tsx Router instance (hash history)
queryClient.ts Shared TanStack Query client
Theming
The site defaults to the red theme; visitors can switch to purple via the
toggle button in the navigation bar. The chosen theme is persisted in localStorage
and restored on future visits. See
aidlc-docs/features/react-frontend/construction/react-frontend-app/functional-design/business-rules.md
for the full theme business rules.
Deployment Notes
This app builds to a plain static bundle (npm run build → dist/), intended for
upload to a traditional web host via FTP. TanStack Router uses hash-based history
(/#/route) so that client-side routing keeps working even on hosts without
server-side rewrite rules configured. See the feature's NFR Requirements/Design
documentation under aidlc-docs/features/react-frontend/ for the rationale.