☕ Cafe Experience Web App/ Webpage with Booking Form

A modern, interactive Cafe Experience Web Application built with React, Framer Motion, and TailwindCSS to showcase immersive UI/UX design, dynamic forms, and playful interactions. This project demonstrates proficiency in front-end development, responsive design, animation, and React component architecture.

---

🚀 Features

1. Interactive Cafe Reservation

• Seamless table booking experience with:
  • Floating labels for inputs
  • Smooth hover & focus effects
  • Animated success popup confirmation
• Responsive layout with glassmorphism and backdrop blur effects
• Sticky navbar and floating menu buttons for easy navigation

2. Dynamic Menu Display

• Categorized menu sections: Coffee (Hot/Cold), Appetizers, Main Course, Desserts
• Smooth scroll-to-section navigation using URL hashes
• Engaging UI with stickers, hover effects, and responsive card layouts
• Display of real menu items with prices

3. Build Your Own Combo

• Add drinks, mains, and desserts dynamically to a combo preview
• Interactive buttons with spring animation feedback
• Real-time total price calculation
• Remove items with a smooth animation

4. Cafe Experience Planner

• Select in-cafe games like Chess, Jenga, Ludo, and Uno Cards
• Visual preview of selected games at the table
• Engaging and playful UX with animated stickers

5. About & Contact

• Story section with beautiful typography
• Cafe pictures with hover effects
• Collapsible sections for Open Hours, Address, and Contact info
• Direct links to Google Maps and Instagram

6. Animations & Micro-Interactions

• Built with Framer Motion for smooth transitions
• Hover animations, tap scaling, and bounce effects
• Sticker animations for fun, interactive UX

---

🛠 Tech Stack

• Frontend: React, React Router, TailwindCSS
• Animations: Framer Motion, Lucide Icons
• Styling: Glassmorphism, responsive design, hover & tap effects
• Deployment Ready: Fully responsive and modular for easy hosting

---

📂 Project Structure

src/
│
├── components/
│   ├── About.jsx
│   ├── CafeReservation.jsx
│   ├── Create.jsx (Experience Planner & Combo Builder)
│   ├── Navbar.jsx
│   └── ViewMenu.jsx
│
├── pages/
│   └── Menu.jsx
│
├── App.jsx
└── index.js
public/
│
└── background.jpeg, cafe1.jpg, stickers (coffee.webp, pizza.webp, etc.)

---

🎨 UI/UX Highlights

• Responsive Design: Works seamlessly across desktop and mobile
• Glassmorphism: Translucent cards with backdrop blur
• Playful Stickers & Animations: Make the experience fun and interactive
• Hover & Focus Effects: Enhance usability and visual appeal
• Smooth Scroll & Page Transitions: Excellent user experience for navigation

---

📌 How to Run

1. Clone the repo:

git clone https://github.com/<my-username>/<project-name>.git

2. Install dependencies:

npm install

3. Start the development server:

npm start

4. Open http://localhost:3000 to view in the browser.

---

💡 Project Showcase

• Demonstrates advanced React skills:

  • State management with hooks (useState, useEffect)
  • Component reusability and modular structure
  • Form handling and validation

• Showcases creativity with:

  • UI animations and micro-interactions
  • Interactive menu & combo builder
  • Experience planner with dynamic game selection

---

🎯 Goals Achieved

• Modern cafe web app UI with premium feel
• Fully responsive, interactive, and visually appealing
• Enhanced user engagement through animations and playful UX

---

🔗 Live Demo

Deployed app link

---

• Author: Sagarika Bhagat