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, Compliance & Ad Recovery, Full-Stack Development, CMS Engineering, Marketing Infrastructure
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.
Data Privacy & Marketing Infrastructure
- Google Ads Suspension Recovery: Diagnosed and resolved compliance violations from the client's legacy advertising setup, architecting a policy-compliant structure that cleared Google's strict reviews and reinstated the account.
- Google Consent Mode v2 (Basic Mode): Re-engineered script loading so zero marketing pixels (Meta, TikTok, GA4) fire prior to explicit user opt-in, preventing unauthorized pings and ensuring 100% GDPR and regional data compliance.
- Bilingual Preference Center: Engineered an edge-ready, zero-dependency cookie consent banner and preference center in English and Arabic (RTL) with granular category toggles (Analytics, Advertising, Embeds).
- High-Fidelity Tracking Infrastructure: Maintained full attribution fidelity despite strict consent gating by routing Meta Conversions API (CAPI) and TikTok pixels cleanly downstream of the user's consent state.
- Legal & SEO Architecture: Deployed fully bilingual Privacy, Terms, and Cookie policies equipped with canonicals, hreflang tags, and crawler-specific robots.txt rules to protect SEO equity and search indexing.
Visual
Architecture
A curated selection of key platform interactions.
Ready to explore?
The Value.
Kuro Cafe operates on an enterprise-grade platform built to scale. By uniting bespoke CMS engineering with bulletproof privacy and Consent Mode v2 compliance, we proved modern web architecture can safely power aggressive marketing without risking ad bans.
Full client autonomy: Real-time control over menu, hours, and media via a custom CMS with zero ongoing software costs.
Flawless bilingual delivery: Native Arabic (RTL) and English experience with zero layout shift or font flickering.
Google Ads recovery & compliance: Reinstated suspended ad account with Consent Mode v2 to safely scale performance marketing.