Initial commit: React frontend (SLP Software) + AIDLC workflow docs

Co-authored-by: Junie <junie@jetbrains.com>
2026-07-20 00:19:44 +02:00
commit e299f1c745
73 changed files with 7275 additions and 0 deletions
@@ -0,0 +1,69 @@
+# 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](https://vitejs.dev/) + React + TypeScript
+- [Tailwind CSS](https://tailwindcss.com/) for styling (theme tokens via CSS custom properties)
+- [TanStack Router](https://tanstack.com/router) (hash-based history, for FTP/static hosting compatibility)
+- [TanStack Query](https://tanstack.com/query) (placeholder query hook, prepared for future backend integration)
+- [Vitest](https://vitest.dev/) + [React Testing Library](https://testing-library.com/react)
+- ESLint + Prettier
+
+## Getting Started
+
+```bash
+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
+
+```text
+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.