Back to Projects

ASHROLLS

Responsive React SPA for an artisanal ice cream shop in Djerba — dynamic menu with 60+ products, real-time open/closed status and integrated WhatsApp contact. Live in production.

Demo

Demo video coming soon — stay tuned!

Overview

Built and deployed the official website for ASHROLLS, an artisanal gelateria in Houmet Souk, Djerba. The site presents the shop's full menu — Ice Rolls, Jwajem, cheesecakes, pastries and drinks — along with its location and contact options, in French for local customers and tourists. It is live in production on Vercel.

The menu is fully data-driven: 60+ products organised by category and subcategory from a single JSON module, with client-side category filtering. A real-time open/closed badge computes the shop status using the Africa/Tunis timezone (open 12:00–00:00) and auto-refreshes every 60 seconds.

Contact is WhatsApp-first: a floating WhatsApp button and a call modal let users pick between two phone numbers with dynamic tel: / wa.me links. The app is a React 18 + Vite SPA with React Router and a custom vanilla-CSS design system (turquoise/navy/orange palette, Baloo 2 + Poppins typography).

Animations run through a custom useScrollReveal hook powered by IntersectionObserver for performance. The architecture counts 12 reusable components across 3 routes (Home, Menu, Contact), with mobile-first responsive design, hamburger navigation, a Google Maps embed and SEO basics (Open Graph tags, robots.txt, sitemap.xml).

React 18ViteReact RouterVanilla CSSVercel

Key Features

  • Live in production — ashrolls-web.vercel.app
  • Data-driven menu: 60+ products organised by category/subcategory from a single JSON module, with client-side filtering
  • Real-time open/closed badge — Africa/Tunis timezone (open 12:00–00:00), auto-refreshes every 60s
  • WhatsApp-first contact flow — floating button + call modal with two phone numbers and dynamic tel: / wa.me links
  • Custom useScrollReveal hook (IntersectionObserver) for performant scroll animations
  • 12 reusable components across 3 routes (Home, Menu, Contact)
  • Mobile-first responsive design with hamburger navigation and Google Maps embed
  • SEO basics: Open Graph tags, robots.txt, sitemap.xml
  • Custom design system — turquoise/navy/orange palette, Baloo 2 + Poppins typography

Have a project in mind?

I'm open to internships, collaborations and exciting engineering challenges.

Get in Touch