Kuro Cafe - Digital Experience Platform
A bilingual Next.js 16 platform for a premium Japanese café in Riyadh. We built a real-time CMS, set up server-side pixel tracking, and created a custom image editor so they can manage everything themselves.
Role
Technical Architecture, Full-Stack Development, CMS Engineering, Analytics Integration
Timeline
~6 Weeks
Key Technologies
Engineering a Premium Digital Presence for a Riyadh Café
Kuro Cafe opened in Riyadh with a distinct identity. They serve authentic Japanese soufflé pancakes and ceremonial-grade matcha, but they had no digital setup to match their physical premium feel. They needed more than a standard landing page. They wanted a self-sustaining platform that could handle both Arabic and English audiences perfectly, let them update their menu in real time, and track their marketing accurately. We built the entire stack for them, from the frontend to the CMS and tracking, right from scratch.
The Problem
Kuro needed a website that worked flawlessly for two very different audiences: English speakers and Arabic speakers. This meant getting the layout to switch perfectly between left-to-right and right-to-left, using a custom Arabic font, and keeping animations smooth in both versions. On top of that, they get a lot of traffic from Instagram and TikTok, so accurate marketing tracking was a hard requirement. Every menu view and contact click had to be tracked across Meta and TikTok using server-side methods so ad-blockers wouldn't ruin their data.
The Solution
They needed a high-end experience they could run entirely without our help. We built a locked-down admin portal where they can update menu items, post blogs, change opening hours, and swap out the main homepage images. The public site also had to load fast and look great, featuring cinematic video backgrounds and smooth scrolling animations without slowing down on mobile connections.
"We didn't just build a website. We built a adaptable brand platform that the client operates entirely on their own in two languages from day one."
Technical Execution
A breakdown of the core systems engineered to deliver performance and scalability.
Fast Asset Loading
- Adaptive hero videos: The main banner loads a portrait video on phones and a landscape video on desktops, saving massive amounts of data for mobile users.
- Smart video loading: Background videos wait to load until the rest of the page is ready and they are actually visible on the screen, keeping the site fast.
- Preloader logic: The animated loading screen makes sure all the important images are ready before it disappears, with a safety timeout so it never gets stuck.
Custom Content Management
- Blog editor: The admin portal includes a full text editor for writing blog posts, which are securely saved and rendered on the public site.
- Built-in image editor: We created a tool right in the dashboard to crop, rotate, and add backgrounds to their menu photos. It remembers their edits so images don't lose quality over time.
- Drag-and-drop ordering: Staff can change the order of menu categories simply by dragging them around, and the new order saves automatically.
Security and Access
- Hidden admin portal: The login page lives at a random, secret URL instead of a standard /admin path to stop bots from finding it.
- Strict authentication: We added checks to make sure anyone logging in has multi-factor authentication enabled on their account before they can see the dashboard.
- Isolated admin environment: The code actively prevents the admin portal from trying to switch to Arabic or show public navigation links, keeping the tools reliable and clean.
Visual
Architecture
A curated selection of key platform interactions.
Confidentiality NoteConfidentiality Notice: To protect client privacy, all customer details, revenue metrics, and sensitive information in these interface previews have been replaced with sample data.
Dummy Data
Data altered to protect client privacy.
Dummy Data
Data altered to protect client privacy.
Dummy Data
Data altered to protect client privacy.
Dummy Data
Data altered to protect client privacy.
Dummy Data
Data altered to protect client privacy.
Dummy Data
Data altered to protect client privacy.
Dummy Data
Data altered to protect client privacy.
Ready to explore?
The Value.
Kuro Cafe launched with a digital platform that scales with their business. By delivering a self-managed system, we eliminated the need for a developer retainer, allowing the team to own their content and trust their marketing data from day one.
Full control for the client: They manage their entire menu, blog, and homepage images through their own secure portal with almost no ongoing costs.
Perfect bilingual delivery: Arabic and English visitors get a flawless, native-feeling experience without any layout glitches.
Reliable ad tracking: Meta and TikTok get accurate conversion data even when browser pixels get blocked by privacy tools.