Mahalle Community App
A modern, performant community web application built with Astro, TypeScript, and React — live at mahalle.digital, serving the Schillerkiez neighborhood in Berlin-Neukölln.
🔎 For reviewers (recruiters, hiring managers): try the read-only demo at demo.mahalle.digital — two one-click roles (member, admin), fictional content, no sign-up. Then read docs/ENGINEERING.md: a 10-minute path through the architecture, five files worth reading, three postmortems, the testing and security posture, and how this project is built with AI tools.
📜 Read the Mahalle Manifesto — the project's moral charter. It describes who Mahalle is for, what it must remain, and what it refuses to become. Anyone deploying, forking, or contributing to this project is expected to honor it.
🚀 Tech Stack
- Framework: Astro 5.x with Hybrid SSR/SSG
- UI: React 18.2 + Svelte 5 for interactive islands
- Styling: Tailwind CSS 3.4 with kiosk design system (paper-warm + ink borders — migration from legacy dark-glass completed July 2026)
- Animation: CSS transitions, Svelte
transition:, Web Animations API for is:inline scripts, Astro View Transitions
- State Management: TanStack Svelte Query for server state in the forum + calendar islands, local Svelte
$state for UI (no Zustand/Redux)
- Data Fetching:
createQuery/createMutation (@tanstack/svelte-query 6) in the islands, plain fetch helpers elsewhere
- Database: MongoDB 6.3 (direct driver, no Mongoose)
- Authentication: auth-astro with NextAuth (Credentials provider, JWT strategy)
- Deployment: Vercel (serverless, functions pinned to
fra1 — co-located with the Frankfurt Atlas cluster)
- Validation: Zod schemas
- Language: TypeScript
📁 Project Structure
src/
├── components/ # React (.tsx) and Svelte (.svelte) components
├── layouts/ # Astro layouts (KioskLayout, LandingLayout, AuthLayout, AdminLayout, blog/*)
├── pages/ # File-based routing
│ ├── api/ # API routes (serverless functions)
│ │ ├── auth/ # Registration endpoint
│ │ ├── topics/ # Forum CRUD
│ │ ├── events/ # Calendar events CRUD
│ │ ├── announcements/
│ │ ├── recommendations/
│ │ ├── comments/
│ │ ├── likes/
│ │ ├── views/
│ │ ├── news/ # Newsboard CRUD, daily fetch, save/unsave
│ │ ├── listings/ # Marketplace listings CRUD
│ │ ├── reports/ # User report submission
│ │ ├── admin/ # Admin moderation APIs
│ │ ├── kiez-stats.ts # Schillerkiez demographics + social API
│ │ └── kiez-air.ts # Live BLUME air quality proxy
│ └── *.astro # Page components
├── hooks/
│ └── api/ # marketplace fetch helpers (plain functions)
├── lib/
│ ├── mongodb.ts # Database connection
│ ├── auth.ts # Auth utilities
│ ├── moderation.ts # AI moderation + profanity filters (TR/EN/DE) + leetspeak
│ └── queryUtils.ts # Query helpers
├── schemas/ # Zod validation schemas
├── styles/ # Global CSS (dark-glass utilities, carved titles)
├── types/ # TypeScript types
└── utils/ # Helper functions
🎨 Design System
The app has completed its migration (July 2026) from a dark-glass aesthetic (deep indigo #0e1033 + purple radial gradient + glass surfaces) to a kiosk aesthetic (paper-warm surfaces, ink borders, print shadows, carved-italic title accents, DM Mono kickers, Instrument italic copy).
Migration status — complete, all 11 surfaces
| Surface | State |
|---|
Landing „Das Schaufenster" (/, plus /impressum, /datenschutz) | ✅ Kiosk (Svelte island, own LandingLayout) — public front door, members SSR-redirect to /forum |
Forum (/forum, /topics/[id], /announcements/[id], /recommendations/[id]) | ✅ Kiosk (Svelte) |
Calendar (/calendar, /events/edit/[id]) | ✅ Kiosk (Svelte) |
Newsboard (/newsboard, /newsboard/[id], /newsboard/submit) | ✅ Kiosk (Svelte) |
Marketplace (/marketplace, /marketplace/[id], /marketplace/create, /marketplace/edit/[id]) | ✅ Kiosk (Svelte) |
Auth (/login, /register, /forgot-password, /reset-password, /verify-email) | ✅ Kiosk (Svelte, own AuthLayout) |
Admin moderation (/admin/moderation) | ✅ Kiosk (Svelte, own AdminLayout) |
Admin announcements (/admin/announcements) | ✅ Kiosk (Svelte, own AdminLayout) |
Profile (/profile, /nachbarn/[handle], /steckbrief) | ✅ Kiosk (Svelte) — complete (Plan A: own profile; Plan B: public neighbor profiles, e-mail/password change, account deletion) |
Kiez Data (/schillerkiez, /schillerkiez/druck) | ✅ Kiosk (Svelte) — legacy carousel dashboard removed |
Blog (/blog, /blog/[slug], /blog/tag/[tag]) | ✅ Kiosk (Svelte, own StandardLayout/HeroLayout/GalleryLayout) — "Die Beilage", SSR on every route, legacy dark-glass blog removed |
Page-accent rule (kiosk)
Each migrated page has its own accent color used for kickers (mono-uppercase eyebrows) and carved-italic title accents:
| Page | Accent |
|---|
| Forum | Wine #b23a5b |
| Calendar | Teal #3f8f9f |
| Newsboard | Ink #1b1a17 |
| Marketplace | Wine #b23a5b (kickers) + Ochre #eccc6e (italic headline accents only) |
| Auth | Ochre #e8a53a |
| Admin | Plum #6f2f59 |
| Profile | Ochre #e8a53a (shared with Auth) |
| Kiez Data | Moss #6b8a4a |
| Blog | Rust #a3552e |
Semantic accents stay constant across all kiosk surfaces (never swapped per page): live-now indicator (ochre dot), today indicator, weekend-day labels, required-field asterisks, compose step numbers (01, 02, …), CTA wine-shadows, modal wine-shadows, the mobile wine FAB.
여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗
