# Bill Tracker Project Structure ## Project Overview Bill Tracking Website — Full-stack application with Node.js backend and React frontend. ## Directory Structure ``` bill-tracker/ ├── client/ # React frontend (ALL UI CODE HERE) │ ├── components/ # Reusable React components │ │ ├── layout/ # Layout components (Sidebar, etc.) │ │ └── ui/ # UI components (buttons, inputs, etc.) │ ├── pages/ # Page components (one per route) │ │ ├── TrackerPage.jsx │ │ ├── BillsPage.jsx │ │ ├── CategoriesPage.jsx │ │ ├── CalendarPage.jsx │ │ ├── SummaryPage.jsx │ │ ├── AnalyticsPage.jsx │ │ ├── ProfilePage.jsx │ │ ├── SettingsPage.jsx │ │ ├── DataPage.jsx │ │ ├── AdminPage.jsx │ │ ├── LoginPage.jsx │ │ └── AboutPage.jsx │ ├── hooks/ # Custom React hooks (useAuth, etc.) │ ├── api.js # API client functions │ ├── App.jsx # React Router configuration │ ├── main.jsx # React entry point │ └── index.html # HTML template ├── server.js # Express backend entry ├── routes/ # API route handlers ├── services/ # Business logic layer ├── middleware/ # Express middleware ├── db/ # Database schemas/migrations ├── workers/ # Background job workers ├── scripts/ # Utility scripts ├── docs/ # Documentation ├── dist/ # Build output (generated) ├── public/ # Static assets ├── Dockerfile # Container config └── docker-compose.yml ``` ## Critical Notes for Agents ### Frontend Code Location **ALL React components, pages, and UI code are in `client/` folder.** - Pages: `client/pages/*.jsx` - Components: `client/components/**/*.jsx` - Hooks: `client/hooks/*.js` - API client: `client/api.js` - Router: `client/App.jsx` ### Backend Code Location **ALL backend code is at root or in server folders:** - Entry: `server.js` - Routes: `routes/*.js` - Services: `services/*.js` - Middleware: `middleware/*.js` - Database: `db/*.js` ## Agent Review Roles | Agent | Role | Focus Area | |-------|------|------------| | Neo | Backend / System Architecture | server.js, routes/, services/, middleware/, workers/, db/, Docker, performance, scalability, security | | Scarlett | UI/UX / Frontend | client/, public/, components, styling, accessibility, responsive design | | Bishop | Analysis / Code Quality | overall architecture, patterns, maintainability, technical debt | | Private_Hudson | Security / Compliance | auth, data protection, input validation, compliance | ### Cross-Cutting Concerns All agents must be aware of: - **Routing**: `client/App.jsx` defines all frontend routes - **Auth**: `client/hooks/useAuth.jsx` and `services/authService.js` - **API**: `client/api.js` mirrors `routes/` structure - **Database**: `db/database.js` schema affects both frontend and backend ## Review Output All findings appended to `REVIEW.md` per agent section. --- *Generated by Prime for multi-agent review*