Project Summary
Tokyo Neon Kissa is a concept website for a Tokyo cocktail bar aimed at local customers and international visitors. The project was built to practice modern UI design, bilingual content structure, and full-stack workflow integration.
case study • full stack
Tokyo Neon Kissa
A bilingual cocktail bar web application built for Tokyo nightlife venues, combining a modern interface with a reservation workflow and cocktail finder.
Stack & Architecture
- Next.js — app framework
- React — UI components
- TypeScript — type safety
- Tailwind CSS — styling system
- Resend API — email workflow
- Vercel — deployment
Key Features
- Bilingual UI — English and Japanese support for wider accessibility
- Reservation workflow — users can submit booking requests via form
- Email integration — automated messages using Resend API
- Responsive design — optimized for mobile and desktop
- Clean UI system — minimalist layout focused on usability
Challenges & Learnings
- Bilingual structure — organizing content for both English and Japanese users
- Form handling — managing user input and connecting it to an email workflow
- UI consistency — maintaining a clean design across multiple sections
- Responsive layout — ensuring usability across mobile and desktop devices
Problem
I wanted to build a project that felt closer to a real client-facing web application than a simple static page. The goal was to create something visually polished, practical, and structured enough to show both front-end work and basic backend integration.
Solution
I built a bilingual cocktail bar website with a modern nightlife-inspired interface, a responsive layout for desktop and mobile, and a reservation form connected to an email workflow. I also added a cocktail finder feature to make the project feel more interactive and useful.
What I Built
Responsive Interface
Built a clean bilingual UI with sections for menu, reservations, access, and bar information, designed to work across desktop and mobile layouts.
Cocktail Finder
Added a small interactive feature to help users explore drink options, making the project feel more dynamic than a standard landing page.
Reservation Workflow
Connected the reservation form to an email workflow using Resend, then deployed and tested the project on Vercel.
Result
This project helped me practice structuring a more realistic full-stack workflow: designing the UI, handling bilingual content, connecting a form to backend email delivery, fixing deployment issues, and documenting the finished work clearly.