Yume Ramen
Yume Ramen is a comprehensive digital ordering solution built for an authentic Japanese ramen restaurant. The platform combines beautiful Japanese-inspired design with powerful functionality, allowing customers to browse the menu, customize orders, and track their delivery in real-time.
The Challenge
Create a complete restaurant ordering system that captures the essence of Japanese aesthetics while providing a seamless ordering experience. The platform needed to handle complex menu customizations, real-time order status updates, and provide restaurant staff with an intuitive admin interface.
The Solution
Built a full-stack Next.js application with a Prisma-powered PostgreSQL database. Implemented a component-based menu system with allergen filtering, a multi-step checkout flow, real-time order tracking, and a comprehensive admin dashboard for order management. The design draws inspiration from traditional Japanese patterns and modern minimalism.
Tech Stack
Key Metrics
Details
- Category
- web
- Year
- 2026
- Status
- completed
- Role
- Full-Stack Developer
Key Features
Interactive Menu
Browse ramen bowls, appetizers, and drinks with detailed descriptions, allergen information, and customization options.
Smart Checkout
Multi-step checkout with delivery/pickup options, address validation, and secure payment integration.
Real-Time Tracking
Live order status updates from confirmation to delivery, with estimated time calculations.
Admin Dashboard
Complete order management system for restaurant staff to view, update, and track all orders.
Allergen Filter
Filter menu items by allergens to help customers with dietary restrictions find safe options.
Responsive Design
Fully responsive design that works beautifully on mobile, tablet, and desktop devices.
Project Gallery
Technical Details
Implementation
The application uses Next.js App Router with Server Components for optimal performance. Prisma ORM handles database operations with PostgreSQL. Authentication is implemented using NextAuth.js with role-based access control. The UI features custom Japanese patterns created with SVG and CSS, smooth page transitions, and skeleton loading states.
Lessons Learned
This project taught me the importance of planning complex state management early, especially for features like cart persistence and order tracking. I also gained valuable experience with Prisma migrations and learned to design database schemas that can accommodate future menu changes without breaking existing orders.
Design Handbook
Color Palette
Typography
Playfair Display
Weight: 400-700Quicksand
Weight: 300-600Noto Sans JP
Weight: 400-700Patterns & Textures
Seigaiha (wave pattern) - Used in backgrounds and decorative elements
Asanoha (hemp leaf) - Subtle pattern overlays
Geometric angles - Modern interpretation of traditional motifs
Design Principles
Ma (間) - Embrace of negative space for visual breathing room
Wabi-sabi - Beauty in imperfection with organic textures
Kanso - Simplicity without clutter
Japanese color harmony - Colors inspired by nature and tradition
Other Projects
Diploma Uitreiking 2026
The live graduation-ceremony platform for my school, where families enter the code on their invitation to watch the livestream, built in dependency-free PHP with hand-written passkey login and intrusion detection.
Subli Studio
A full-stack custom clothing print shop where customers configure a garment, pick print locations, upload their own design, and pay online, with a complete admin back office behind it.
MultyLeak
A free data breach checker that lets users instantly find out if their email or password has been exposed in known data leaks, powered by the HIBP API.