70 lines
2.8 KiB
Markdown
70 lines
2.8 KiB
Markdown
# 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.
|