S
← All work

§ Fullstack Web · Jan 2024 — Feb 2024

Cluck N Roll.

A rock & roll themed restaurant website featuring dynamic food menus and interactive customer tools.

ReactTypeScriptTailwind CSSViteGoogle Maps APIReact Router

§ Cutscene · Fullstack Web

A rock & roll themed restaurant website featuring dynamic food menus and interactive customer tools.

Role

Front-end

Timeline

Jan 2024 — Feb 2024

Kind

Fullstack Web

Status

Completed

Project Cluck N Roll image
Project Cluck N Roll image
Project Cluck N Roll image
Project Cluck N Roll image

Problem

Traditional restaurant websites are often static and fail to provide interactive tools. Customers frequently face difficulties finding nearby branch locations, booking tables instantly without calling, viewing detailed nutritional values of dishes, and navigating menus due to language barriers.

Overview

Cluck N Roll is a modern web application designed for a rock-and-roll-themed chicken restaurant. The platform enhances the dining experience by bridging the gap between digital convenience and physical dining. Key features include an interactive Google Maps store locator for locating nearby branches, a seamless online table reservation system to reduce wait times, a nutritional facts calculator for health-conscious diners, and multi-language support (English and Indonesian) to cater to both local and international customers.

Approach

  1. / 01Built a responsive and interactive user interface using React, TypeScript, and Tailwind CSS, integrating the Google Maps API to help users locate nearby restaurant branches.
  2. / 02Implemented a dynamic menu search engine, a nutritional facts calculator, an online table reservation flow, and multi-language support (English & Indonesian) for international accessibility.

Outcome

  • Enabled customers to easily locate branches and secure dining reservations online in under 2 minutes, reducing wait times.
  • Improved dining decision-making with transparent nutritional facts and expanded accessibility for foreign tourists through multi-language localization.

Features

  • Google Maps Integration
  • Table Booking System
  • Nutrition Fact Calculator
  • Multi-language Support
  • Menu Search

Backend metadata

Jan 2024 — Feb 2024

  • Web App
  • Frontend
  • UI/UX