Mikoto MERN Restaurant & Interactive Floorplan Reservation
Hospitality & Food Tech Management System — A modern MERN stack web application providing an online dining menu and an interactive real-time table reservation engine using custom SVG floorplans.
[TELEMETRY_LOG // VERIFIED]
2025-04-01
> ROLE Creator & Full-Stack Developer
> CLIENT / ORGANIZATION Open Source Software Engineering
> CORE TECH STACK
MongoDB Express.js React 18 Node.js Tailwind CSS Ant Design JWT
[SECTION_01] //
SYSTEM PROBLEM STATEMENT & PERSONAL SCOPE
> SYSTEM_CONTEXT ANALYSIS_VERIFIED
Operational Challenge & System Purpose
A modern MERN stack web application providing an online dining menu and an interactive real-time table reservation engine using custom SVG floorplans.
> MIKLI_PERSONAL_DELIVERABLES ENGINEERING_SCOPE
Key Contributions & Implementation
- > Built interactive SVG visual floorplans rendering room layouts, seating capacity, and real-time availability.
- > Implemented stateless JWT authentication and bcrypt password security.
- > Designed normalized Mongoose collections for User, Table, and Order entities.
[SECTION_02] //
ARCHITECTURE & SYSTEM DATA FLOW
> SCHEMATIC // DATA_FLOW_PIPELINE 2D_SCHEMATIC_ACTIVE
+-----------------------+ HTTPS / JSON +-----------------------+
| CLIENT / USER UI | ==========================> | REST API LAYER |
| (Astro / React / FE) | <========================== | (MongoDB) |
+-----------------------+ +-----------------------+
||
|| SQL / ORM
\/
+-----------------------+
| DATABASE PERSISTENCE |
| (MySQL / PostgreSQL) |
+-----------------------+
Key Architectural Decision Records (ADRs):
ADR-001 VERIFIED_PATTERN
Custom SVG node interaction engine for dining floorplan
ADR-002 VERIFIED_PATTERN
Stateless JWT session security
[SECTION_03] //
ENGINEERING CHALLENGES & SOLUTIONS
[CHALLENGE_01] ENGINEERING_OBSTACLE
Rendering interactive, real-time table availability over visual dining floorplans.
> IMPLEMENTED SOLUTION:
Designed custom interactive SVG node components mapping table state directly to MongoDB reservation models.
> TAKEAWAY: Combines dynamic visual UX with stateless real-time availability tracking.