# Sina Café

> A website concept for a specialty coffee and Mediterranean food café facing the sea in Kélibia. It showcases the menu, the atmosphere and the place.

- By: Yassine Charcheri, full-stack developer (https://yassinecharcheri.dev/)
- Status: Concept
- Year: 2026
- Role: Front-end, with a teammate — React, Tailwind, Framer Motion
- Type: Web · React
- Stack: React 19, TypeScript, Tailwind v4, Framer Motion, GSAP, Vite
- Live site: https://sinacafe.vercel.app/
- Case study page: https://yassinecharcheri.dev/projects/sina-cafe

## Highlights

- Interactive menu booklet with 3D page flips, drag and keyboard navigation, and page-turn sounds generated in the browser — no library
- Masonry gallery adapted from React Bits, with column packing and GSAP entrance animations
- Reservations, events and loyalty points shared across the website, mobile app and dashboard

## Case study

- Summary: A website concept for a specialty coffee and Mediterranean food café facing the sea in Kélibia. It showcases the menu, the atmosphere and the place.
- The problem: Small cafés usually rely only on Instagram. Visitors, especially summer tourists, can't easily find the menu, opening hours or location.
- For: Locals and summer visitors in Kélibia.
- Pain points:
  - There is no menu online, and no information on hours or location.
  - Instagram alone doesn't convey the brand and the experience.
  - AI-generated website bases tend to look generic and untrustworthy.
- What I built:
  - Menu showcase: Coffee and Mediterranean plates.
  - Atmosphere gallery (“Social Chronicles”)
  - Location & hours: With a map link.
  - Contact / reservation call-to-action
  - Responsive: Optimized for phones.
- Stack and why:
  - React: The AI Studio base was React. Keeping it allowed fast iteration, and the page breaks naturally into reusable sections (menu, gallery, location).
  - Fraunces + Figtree: A warm, characterful serif for headings and a clean sans for reading. Together they give a crafted, coastal-café feeling instead of the default “AI template” look.
  - Gold palette (#C3A36B): It echoes coffee, sand and sunset light, and stays readable on dark backgrounds.
- Challenges:
  - Turning a generated base into a credible brand: A full design audit removed generic patterns (pills, gradients, filler copy).
  - Image weight: Large, atmospheric photos had to stay fast on mobile.
  - Working as a pair: Splitting tasks and merging cleanly with Git.
- Learnings:
  - AI speeds up the start, but craft (typography, spacing, real photos) is what makes a site trustworthy.
  - A design audit checklist is a reusable tool for every project.
- Screens:
  - Sina Café home page: “Specialty coffee and Mediterranean plates, facing the sea in Kélibia”
  - Owner dashboard, “Menu & prices” tab: menu items with their prices and availability
  - Events page: three upcoming events with dates, descriptions and booking buttons
  - #SinaCafe gallery: a masonry grid of café and seaside photos
  - Owner dashboard: revenue, bookings and loyalty stats, booking requests and a monthly revenue chart
  - “What guests say”: three guest reviews with star ratings
- Credits: The first version was generated with Google AI Studio, then reworked by hand: new typography (Fraunces + Figtree), a gold palette, new photography, and removal of AI-looking patterns.

## Contact

- Email: yassine.charcheri@gmail.com
- Contact form: https://yassinecharcheri.dev/#contact