JiJi Taiwanese Fried Chicken

Bringing Taipei Night Market Vibes To Amsterdam

JiJi wanted a small but characterful digital home that matched the energy of their XL Taiwanese fried chicken: fun, punchy, and instantly crave‑inducing. The site needed to:

• Showcase their signature XL cutlet, popcorn chicken, and loaded fries
• Highlight their story from Shilin Night Market to Amsterdam
• Make it effortless to find the stall, check opening hours, and view the full menu
• Be simple to update for new specials, menu tweaks, and copy changes

To achieve this, I chose a headless architecture with a React/Next.js frontend and Sanity.io as the CMS, styled with Tailwind CSS and fully typed with TypeScript.

Architecture & Tech Stack

• Next.js (React)
  I used Next.js to build a fast, SEO‑friendly frontend with file‑based routing for core pages like Home, Menu, About, and Find Us. Server‑side rendering ensures key content like opening hours, address, and menu items are indexable and instantly visible.
• Sanity.io (Headless CMS)
  All content — from hero copy and highlight badges to menu sections and testimonials — is modeled in Sanity. The JiJi team can log into a custom studio and update:
  • Menu items (titles, descriptions, prices, categories, “Signature” / “New” badges)
  • Opening hours
  • Location details and contact info
  • Hero content, tagline, and “Loved by locals” reviewsI designed structured schemas so marketing‑style blocks like “100% Halal”, “Homemade JiJi Sauce”, and “Secret Night Market” can be turned on/off or reordered without developer involvement.
• Tailwind CSS
  Tailwind powers the visual system: bold color accents, tight spacing, and responsive layouts that still feel like a street‑food stall rather than a corporate restaurant site. Utility classes made it easy to experiment with different “XL” treatments for the hero, menu cards, and call‑to‑action buttons while staying consistent.
• TypeScript
  I wired all data fetching and components in TypeScript, defining strong types for menu items, hero sections, opening hours, and testimonials. This helped catch integration issues early when wiring Sanity content to React components and made refactors safe as the design evolved.
• Claude (AI‑assisted coding)
  I used Claude as a coding partner throughout the project to:
  • Sketch initial component structures and prop signatures
  • Generate GROQ queries for Sanity
  • Explore alternative layout ideas and copy variants
  • Quickly iterate on edge cases (empty states, loading, errors)Rather than replacing development, Claude allowed me to move faster on boilerplate and focus more on the JiJi brand, micro‑interactions, and overall UX.

Content Modeling in Sanity

A key part of the build was treating the site as a living menu instead of a static one‑pager. In Sanity I created:

• A “Hero” document for the main tagline, subheading, badges like “100% Halal” and “Made-to-order crispness”, and hero imagery.
• A “Menu Category” document (e.g. Signature, Sides, Drinks) with an ordering field.
• A “Menu Item” document with:
  • Name, price, and badges (Signature / New)
  • Description (e.g. double‑fried popcorn chicken, XL butterfly cutlet)
  • Optional spice/flavor options
  • Category reference for grouping on the frontend
• A “Location” document controlling the address, Google Maps link, and opening hours per day.
• A “Testimonial” document for Google‑style reviews (name, quote, rating, link).

This structure means JiJi can add a new street‑food special or change their hours for holidays from the CMS, and the frontend updates immediately with no code changes.

Frontend Implementation

On the Next.js side, I organized the interface into reusable, content‑aware sections:

• Hero section that pulls tagline, supporting text, badges, and CTA buttons (View Menu, Get Directions) directly from Sanity.
• Signature Favorites grid displaying highlighted menu items (XL cutlet, popcorn chicken, loaded fries) with category badges and price tags.
• Story block (“From Shilin Market To Your Plate”) using rich text content from Sanity, styled with Tailwind for a magazine‑style layout.
• Social proof section for reviews, using cards with quotes, reviewer names, and a global rating.
• Location & Hours section that pairs the address and contact info with a map link and clearly formatted opening hours.

Components are strongly typed with TypeScript interfaces that mirror the Sanity schemas, so when content fields change, the compiler immediately flags any mismatches in the UI.

Performance, UX & Details

• I optimized layout and imagery for quick loading, prioritizing above‑the‑fold content like the hero and key menu items.
• CTAs are placed thoughtfully: one primary path into the menu and one into “Find Us”, reflecting the two main user intents — deciding what to eat and how to get there.
• The overall design balances street‑food energy with clear hierarchy: bold headings, consistent card layouts, and accessible color contrast to keep the experience usable on mobile at night in the city.

Outcome

The result is a lean, expressive, and maintainable marketing site that lets JiJi focus on what they do best: frying incredibly crispy Taiwanese chicken. Content editors can launch new specials, tweak copy, or update hours through Sanity, while the Next.js + Tailwind frontend keeps everything feeling fast, polished, and on‑brand.