Mapories is a full-stack web application that allows users to create, store, and visualize personal memories on an interactive map. It features secure authentication, spatial data filtering, and granular privacy controls.
License:
CC0-1.0(see LICENSE for details)
- React, TypeScript, Vite
- Leaflet, React-Leaflet, marker clustering
- Tailwind CSS
- Google reCAPTCHA
- FastAPI
- PostgreSQL + PostGIS
- SQLAlchemy, GeoAlchemy2 & Alembic
- JWT (Python-Jose), Bcrypt (Passlib)
- SlowAPI rate limiting
- Pydantic validation
Mapories anchors memories to geographic coordinates, bridging the gap between a private diary and a public heatmap. The system is optimized for performance using PostGIS bounding-box queries to load only visible data, frontend marker clustering for large datasets, and secure JWT authentication with rate limiting.
- Interactive Map Interface: Create memories by clicking locations; view details in custom popups.
- Spatial Optimization: Efficiently loads only memories visible in the current viewport (server-side bounding box queries).
- Privacy Controls: Per-memory visibility toggles (Private vs. Public).
- Smart Filtering: Filter content by color categories and ownership (My Memories vs. Others).
- Robust Security: Google reCAPTCHA v2, Honeypot fields, and API Rate Limiting to prevent abuse.
- Performance: Marker clustering to handle high-density data visualizations.
- Dark Mode UI: Modern, dark-themed aesthetics built with Tailwind CSS.
Mapories implements a defense-in-depth strategy to secure user data and application infrastructure:
- JWT Authentication with Token Rotation:
- Access Tokens: Short-lived JWTs are used for API authorization.
- Refresh Tokens: Stored exclusively in HTTP-only, Secure, SameSite=Lax cookies. This prevents XSS attacks from stealing long-term credentials, as JavaScript cannot access these cookies.
- Rate Limiting (SlowAPI): Critical endpoints (
/login,/register, memory creation) are protected against brute-force and DoS attacks using IP-based rate limits (e.g., 5 login attempts per minute). - Bot Protection:
- ReCAPTCHA v2: Integrated into login and registration forms to verify human interaction.
- Honeypot Fields: Hidden form fields (
nickname) trap automated bots that blindly fill out inputs.
- Data Integrity:
- Bcrypt Hashing: User passwords are hashed before storage.
- Server-Side Validation: Pydantic schemas strictly validate all incoming data types and formats.
- Authorization Checks: CRUD operations verify resource ownership at the database level—users cannot modify or delete memories they do not own.
The application is designed to handle large datasets efficiently through spatial indexing and frontend optimizations:
- Spatial Bounding Box Queries (PostGIS):
Instead of loading all memories globally, the frontend calculates the current map viewport coordinates (
north,south,east,west). The backend uses PostGIS functions (ST_MakeEnvelope,ST_Intersects) to query only the data currently visible to the user. - Request Throttling: Map movement triggers API requests via a debounce mechanism (400ms delay). This prevents flooding the server with requests while panning or zooming the map.
- Marker Clustering:
On the frontend,
react-leaflet-markerclustergroups nearby data points into single cluster icons. This significantly reduces the number of DOM elements rendered, maintaining high FPS even with thousands of points loaded. - Payload Optimization: API responses are strictly typed and stripped of unnecessary metadata before being sent to the client, reducing bandwidth usage.
uvicorn app.main:app --reload
npm run dev
GIF: 
Landing Page (Before Login): 
Login Screen: 
Add Memory Modal: 
Main Dashboard with marker popup (After Login): 
Released under CC0-1.0 (public domain).
You may copy, modify, distribute, and use it commercially without asking for permission.