- Visibility
- Public
- Focus
- React, Express, WebSockets, PWA, JWT auth
- Boundary
- Public code linked directly
Summary
CitySafe is a community safety application for reporting hazards, viewing safety information,
sending SOS requests, and tracking user activity. The project includes a React frontend and an
Express backend with a documented API contract.
- Goal: Coordinate safety reports, alerts, SOS flows, and user activity in one product.
- Approach: Separate frontend hooks, service wrappers, and backend API contracts.
- Signal: Product-level thinking across UX, realtime state, and backend domains.
Technical Scope
- React application with Vite.
- Express API server.
- JWT authentication.
- WebSocket support through Socket.IO.
- Report, SOS, alert, points, voucher, settings, and history domains.
- PWA support and production-oriented frontend structure.
Engineering Highlights
The project uses a clear separation between frontend data hooks, service wrappers, and API client,
plus a mock API mode for frontend development without backend dependency.
- Realtime behavior: Socket.IO supports live workflow updates.
- Developer workflow: Mock API mode keeps frontend progress unblocked.
- Reviewability: API domains are grouped into understandable product surfaces.
Review Notes
The local branch inspected for this portfolio was youssefs-design-and-prod, with
a recent commit named feat: complete Phase 9 PWA, WebSockets, and Error Boundaries.