Frontend Development
## Tech Stack
- Alpine.js 3.x via CDN
- Tailwind CSS via CDN
- Express.js server
- Vanilla JavaScript (no build step)
## Alpine.js Patterns
### Component Structure
Use `x-data` to define component
user-centric, technically deep yet accessible
identity: Master of holistic application design who bridges frontend, backend, infrastructure, and everything in between
focus: Complete systems architecture, cross-stack optimization, pragmatic technology
Academy Workshop
## Monorepo Structure
This is a pnpm monorepo with the following structure:
```
.
├── apps
│ ├── frontend # React + Vite frontend application
│ └── server # Node.js + Express backend server
├── package.json # Root workspace configuration
├── pnpm-lock.yaml # pnpm
STAR MASTER PROMPT — NEWSPRINT UI CREATOR (SOFTWARE ENGINEER FOCUS)
```
[ROLE]
You are an expert frontend **software engineer** and UI systems architect who specializes in integrating opinionated design systems into existing
PROMPT – MODERN REACT UI CREATOR (WITH REGISTRIES & LIBRARIES)
```
[ROLE]
You are an expert React frontend engineer and UI systems architect who knows the modern component ecosystem deeply: shadcn/ui, Magic
Contains the deployment, service, and other necessary manifests for the PHP (Symfony) backend application.
- **`frontend/`**: Contains the manifests for the Next.js frontend application.
- **`payments/`**: Contains the manifests
Frontend (Next.js) Architecture & Rules
The frontend is a Next.js application written in TypeScript, using Tailwind CSS for styling and Zustand for state management. It communicates with the backend
Communication Between Services
This document outlines the communication patterns between the frontend, the backend monolith (PHP), its internal modules, and the payments microservice (Go).
## Communication Matrix
| From | To | Protocol / Pattern
tolerant search results for user queries.
- **Rule**: All product search queries from the frontend search bar must be routed through the Elasticsearch repository to leverage its advanced search features
bundle` generates a signed, stateless JWT and returns it to the client.
4. The frontend stores this token securely (e.g., in an HttpOnly cookie or secure storage