☕ Brew & Bean - 3D Café Website

A modern, responsive 3D café website built with React, Tailwind CSS, Framer Motion, and React Three Fiber. Experience the perfect blend of real-world photography and 3D motion elements in a warm, cozy café atmosphere.

🎯 Features

✨ Frontend Features

• 3D Coffee Cup Animation - Interactive rotating coffee cup with steam particles
• Floating Coffee Beans - 3D coffee beans with physics-based animations
• Smooth Animations - Framer Motion powered scroll animations and transitions
• Responsive Design - Fully adaptive for phones, tablets, and desktops
• Dark Mode Toggle - Beautiful dark/light theme switching
• Interactive Gallery - Carousel with modal view and touch/swipe support
• Reservation System - Modal form with email notifications
• Parallax Effects - Depth and perspective on scroll
• Loading Screen - Elegant loading animation with coffee theme

🚀 Backend Features

• Express.js API - RESTful API endpoints
• Email Notifications - Reservation confirmations and contact form
• Rate Limiting - Protection against spam and abuse
• CORS Configuration - Secure cross-origin requests
• Error Handling - Comprehensive error management
• Security Headers - Helmet.js for security

🛠️ Tech Stack

Frontend

• React 18 - Modern React with hooks
• Vite - Fast build tool and dev server
• Tailwind CSS - Utility-first CSS framework
• Framer Motion - Animation library
• React Three Fiber - React renderer for Three.js
• @react-three/drei - Useful helpers for R3F
• Three.js - 3D graphics library
• React Icons - Icon library
• HeadlessUI - Unstyled UI components
• Lucide React - Beautiful icons

Backend

• Express.js - Web framework
• Nodemailer - Email sending
• CORS - Cross-origin resource sharing
• Helmet - Security headers
• Express Rate Limit - Rate limiting
• Dotenv - Environment variables

🚀 Quick Start

Prerequisites

• Node.js 16+
• npm or yarn

Installation

1. Clone the repository

   git clone <repository-url>
   cd 3d-cafe-website

2. Install all dependencies

   npm run install:all

3. Set up environment variables

   cd server
   cp env.example .env
   # Edit .env with your email configuration (optional)

4. Start development servers

   npm run dev

This will start:

• Frontend: http://localhost:3000
• Backend: http://localhost:5000

Individual Commands

# Install all dependencies
npm run install:all

# Start both client and server
npm run dev

# Start only client
npm run dev:client

# Start only server
npm run dev:server

# Build for production
npm run build

📁 Project Structure

3d-cafe-website/
├── client/                 # React frontend
│   ├── src/
│   │   ├── components/     # React components
│   │   │   ├── 3D/        # 3D components (Three.js)
│   │   │   ├── HeroSection.jsx
│   │   │   ├── AboutSection.jsx
│   │   │   ├── MenuSection.jsx
│   │   │   ├── GallerySection.jsx
│   │   │   ├── FindUsSection.jsx
│   │   │   ├── Footer.jsx
│   │   │   ├── Navbar.jsx
│   │   │   └── LoadingScreen.jsx
│   │   ├── App.jsx
│   │   ├── main.jsx
│   │   └── index.css
│   ├── package.json
│   ├── vite.config.js
│   ├── tailwind.config.js
│   └── index.html
├── server/                 # Express backend
│   ├── server.js          # Main server file
│   ├── package.json
│   └── env.example
├── package.json           # Root package.json
└── README.md

🎨 Design System

Color Palette

• Cream: #fdf6ec - Primary background
• Chocolate: #4b2e05 - Primary text
• Gold: #d6a05e - Accent color
• Chocolate Light: #6b3e0a - Secondary text
• Gold Light: #e6b366 - Hover states

Typography

• Serif: Playfair Display (headings)
• Sans: Inter (body text)

Animations

• Float: Gentle up/down movement
• Steam: Particle-like steam animation
• Rotate: Slow continuous rotation
• Hover: Scale and shadow effects

🔧 API Endpoints

Menu

• GET /api/menu - Get all menu items by category

Gallery

• GET /api/gallery - Get gallery images

Reservations

• POST /api/reservations - Submit reservation request

Contact

• POST /api/contact - Submit contact form

Newsletter

• POST /api/newsletter - Subscribe to newsletter

Health

• GET /api/health - API health check

📧 Email Configuration

To enable email notifications, configure your email service in server/.env:

EMAIL_USER=your-email@gmail.com
EMAIL_PASS=your-app-password

For Gmail, you'll need to:

1. Enable 2-factor authentication
2. Generate an app password
3. Use the app password in EMAIL_PASS

🎯 Features Breakdown

Hero Section

• Fullscreen hero with 3D coffee cup
• Parallax scroll effects
• Smooth fade-in animations
• Call-to-action buttons

About Section

• Tilt-3D hover effects on images
• Statistics with animated counters
• Background patterns and decorations

Menu Section

• Responsive grid layout
• Category filtering
• Hover animations with 3D depth
• Best seller badges

Gallery Section

• Touch/swipe carousel
• Modal image viewer
• 3D coffee beans background
• Social sharing buttons

Find Us Section

• Google Maps integration ready
• Contact information
• Reservation modal with form validation
• Email notifications

Footer

• Social media links
• Newsletter subscription
• Dark mode toggle
• Scroll to top button

🚀 Deployment

Frontend (Vercel/Netlify)

cd client
npm run build
# Deploy the dist folder

Backend (Railway/Heroku)

cd server
# Set environment variables
# Deploy the server folder

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Unsplash for beautiful coffee images
• Three.js community for 3D inspiration
• Framer Motion for smooth animations
• Tailwind CSS for rapid styling

📞 Support

For support, email hello@brewandbean.com or create an issue in the repository.

---

Brewed with ❤️ using modern web technologies