A full-stack application for mapping and tracking points with an interactive map interface.

You can find it here

This is a monorepo setup with pnpm containing:

• findInMap-frontend: React + TypeScript + Vite frontend application
• findInMap-backend: Node.js + Express + TypeScript + PostgreSQL + PostGIS backend API + JWT handling

• Interactive map using React-Leaflet
• Form for adding crime incidents with:
  • X/Y coordinates (auto-filled when clicking on map)
  • Crime type selector
  • Date input
  • Save button
• Real-time map updates after adding new points
• Complete authentication system with JWT tokens
• Protected routes and automatic token refresh
• MSW (Mock Service Worker) for local API mocking
• Clean architecture with separated layers:
  • src/core/usecases: Business logic and API calls
  • src/core/dtos: Data transfer objects
  • src/ui/views: Page components
  • src/ui/components: Reusable components

• RESTful API endpoints:
  • GET /api/map-points: Retrieve all map points
  • POST /api/map-points: Create new map point
  • POST /users: User registration
  • POST /users/login: User authentication
  • POST /users/logout: Secure logout with token invalidation
  • POST /token/refresh: JWT token refresh
• JWT authentication with access/refresh token rotation
• Automatic token blacklist cleanup: Expired tokens are automatically removed from memory every 5 minutes to prevent memory leaks
• Rate limiting for API protection
• PostgreSQL + PostGIS for spatial data
• Drizzle ORM for type-safe database operations
• Comprehensive testing suite with Jest
• Clean architecture with dependency injection

• Node.js (v16 or higher)
• pnpm (latest version)

1. Clone the repository and navigate to the project root
2. Install dependencies for all packages:

   pnpm install

pnpm dev

Backend only:

pnpm backend

The backend will be available at http://localhost:3001

Frontend only:

pnpm frontend

The frontend will be available at http://localhost:3000

1. Open http://localhost:3000 in your browser
2. Click anywhere on the map to select coordinates
3. Fill in the crime type and date in the form
4. Click "Save" to add the point to the map
5. The map will automatically refresh and show the new point

Returns all map points.

Creates a new map point.

The frontend includes MSW (Mock Service Worker) for local development. When running in development mode, the application will use mock data instead of the real backend. This allows you to develop the frontend independently.

To disable mocking and use the real backend:

1. Ensure the backend is running on port 3001
2. Edit the enableMocking function

• React 19
• TypeScript
• Vite
• React-Leaflet (for maps)
• MSW (for API mocking)

• Node.js
• Express
• TypeScript
• Nodemon (for development)
• dotenv (for environment variables)
• Prisma
• PostgreSQL
• OpenAPI

CC-BY-NC-SA-4.0

Paolo Dell'Aguzzo