Cozy & Coffee

A modern, responsive coffee shop website built with React and Tailwind CSS

🌐 Live Demo • ✨ Features • 🚀 Quick Start • 📖 Documentation

---

📋 Table of Contents

• Overview
• Features
• Demo
• Quick Start
• Installation
• Usage
• Project Structure
• Components
• Technologies
• Configuration
• Deployment
• Contributing
• Troubleshooting
• Roadmap
• License
• Acknowledgments

🌟 Overview

Cozy & Coffee is a modern, fully responsive coffee shop website that showcases a beautiful user interface with interactive menu cards and a complete shopping cart system. Built with React 19 and styled with Tailwind CSS, it demonstrates modern web development practices and provides an excellent user experience across all devices.

Key Highlights

• 🎨 Beautiful Design: Modern, coffee-themed UI with warm color palette
• 📱 Fully Responsive: Seamless experience on mobile, tablet, and desktop
• 🛒 Shopping Cart: Complete cart system with localStorage persistence
• ⚡ Fast Performance: Built with Vite for lightning-fast development and builds
• ♿ Accessible: Following web accessibility best practices

✨ Features

Core Features

• Responsive Design - Mobile-first approach with seamless desktop experience
• Interactive Menu - Beautifully displayed coffee products with hover effects
• Shopping Cart System - Add/remove items with quantity controls
• Local Storage - Cart data persists between browser sessions
• Checkout Process - Multi-step checkout form simulation
• Smooth Animations - Subtle animations enhance user experience
• Fixed Header - Navigation always accessible while scrolling

User Experience

• Hero Section - Engaging landing area with call-to-action
• Product Cards - Interactive cards with images and descriptions
• Contact Form - Functional contact form for customer inquiries
• About Section - Company information and values
• Footer - Complete site information and links

Technical Features

• React Context - Global state management for cart functionality
• Custom Hooks - Reusable cart logic with useCart hook
• Component Architecture - Modular, maintainable component structure
• CSS Animations - Smooth transitions and hover effects
• SEO Optimized - Proper meta tags and semantic HTML

🎯 Demo

🌐 Live Demo

View Live Website

📱 Screenshots

Desktop View

Mobile View

🎥 Demo Features

• Browse the interactive coffee menu
• Add items to cart and manage quantities
• Experience the responsive design across devices
• Test the checkout process simulation

🚀 Quick Start

Get up and running in less than 5 minutes:

# Clone the repository
git clone https://github.com/Chun-Huan-Lee/Cozy-Coffee-Shop-Website.git

# Navigate to project directory
cd Cozy-Coffee-Shop-Website

# Install dependencies
npm install

# Start development server
npm run dev

# Open http://localhost:5173 in your browser

📦 Installation

Prerequisites

Ensure you have the following installed:

• Node.js (v18.0.0 or higher) - Download here
• npm (comes with Node.js)

Step-by-Step Installation

1. Clone the Repository

   git clone https://github.com/Chun-Huan-Lee/Cozy-Coffee-Shop-Website.git
   cd Cozy-Coffee-Shop-Website

2. Install Dependencies

   npm install

3. Start Development Server

   npm run dev

4. Open in Browser

   http://localhost:5173
   

Alternative Installation Methods

Using Yarn

yarn install
yarn dev

Using pnpm

pnpm install
pnpm dev

🛠️ Usage

Development Commands

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm run preview	Preview production build
npm run lint	Run ESLint
npm run deploy	Deploy to GitHub Pages

Environment Setup

Create a .env file in the root directory (optional):

# Optional environment variables
VITE_APP_NAME=Cozy & Coffee
VITE_API_URL=your-api-url

Customization

Updating Coffee Menu

Edit the coffeeMenu array in src/CoffeeShopApp.jsx:

const coffeeMenu = [
  {
    id: 1,
    name: 'Your Coffee Name',
    description: 'Your coffee description',
    price: 4.50,
    image: 'your-image-url'
  },
  // Add more items...
];

Styling Customization

• Colors: Update Tailwind classes in components
• Fonts: Modify src/CoffeeShop.css and index.html
• Layout: Adjust component structure in src/CoffeeShopApp.jsx

📁 Project Structure

Cozy-Coffee-Shop-Website/
├── public/                  # Static assets
│   ├── coffee-logo.svg         # Site logo
│   ├── screenshot.png          # Desktop screenshot
│   └── screenshot-mobile.png   # Mobile screenshot
├── src/                     # Source files
│   ├── components/          # Reusable components (future)
│   ├── CoffeeShop.css         # Custom styles
│   ├── CoffeeShopApp.jsx      # Main application component
│   ├── index.css              # Global styles & Tailwind
│   └── main.jsx               # Application entry point
├── .gitignore              # Git ignore rules
├── index.html              # HTML template
├── package.json            # Dependencies & scripts
├── postcss.config.js       # PostCSS configuration
├── README.md               # This file
├── tailwind.config.js      # Tailwind CSS configuration
└── vite.config.js          # Vite configuration

🧩 Components

Core Components

CoffeeShopApp

Main application component that provides cart context and renders all sections.

CartProvider

Context provider for global cart state management.

Header

Fixed navigation header with cart button and mobile menu.

Hero

Landing section with main call-to-action.

Menu

Coffee menu grid layout with product cards.

CoffeeCard

Individual product card with add-to-cart functionality.

Cart

Sliding cart panel with checkout process.

About

Company information section.

Contact

Contact form and location information.

Footer

Site footer with links and contact details.

Custom Hooks

useCart

const {
  cart,           // Cart items array
  addToCart,      // Add item to cart
  removeFromCart, // Remove/decrease item quantity
  clearCart,      // Clear entire cart
  getCartTotal,   // Calculate total price
  getCartCount,   // Get total item count
  isCartOpen,     // Cart visibility state
  toggleCart      // Toggle cart visibility
} = useCart();

🔧 Technologies

Frontend Stack

• React 19.0.0 - UI library with latest features
• Tailwind CSS 3.4.1 - Utility-first CSS framework
• Vite 6.2.0 - Next-generation frontend tooling

Development Tools

• ESLint - Code linting and quality
• PostCSS - CSS processing
• Autoprefixer - CSS vendor prefixing

Build & Deployment

• SWC - Fast JavaScript/TypeScript compiler
• GitHub Pages - Static site hosting
• gh-pages - Deployment automation

⚙️ Configuration

Tailwind CSS Configuration

// tailwind.config.js
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      // Custom extensions here
    },
  },
  plugins: [],
}

Vite Configuration

// vite.config.js
export default defineConfig({
  base: "/Cozy-Coffee-Shop-Website/",
  plugins: [react()],
})

ESLint Configuration

The project uses ESLint 9 with React-specific rules for code quality.

🚀 Deployment

GitHub Pages Deployment

1. Automatic Deployment

   npm run deploy

2. Manual Deployment

   npm run build
   git add dist -f
   git commit -m "Deploy to GitHub Pages"
   git subtree push --prefix dist origin gh-pages

Other Deployment Options

Vercel

1. Connect your GitHub repository to Vercel
2. Set build command: npm run build
3. Set output directory: dist
4. Deploy automatically on push

Netlify

1. Connect your GitHub repository to Netlify
2. Set build command: npm run build
3. Set publish directory: dist
4. Enable automatic deployments

🤝 Contributing

We welcome contributions! Please follow these steps:

How to Contribute

1. Fork the Repository

   git fork https://github.com/Chun-Huan-Lee/Cozy-Coffee-Shop-Website.git

2. Create Feature Branch

   git checkout -b feature/amazing-feature

3. Make Changes

   • Follow the existing code style
   • Add tests if applicable
   • Update documentation

4. Commit Changes

   git commit -m "Add amazing feature"

5. Push to Branch

   git push origin feature/amazing-feature

6. Open Pull Request

   • Provide clear description
   • Reference any related issues

Development Guidelines

• Follow the JavaScript Style Guide
• Use meaningful commit messages
• Write clear, concise code comments
• Ensure responsiveness across devices
• Test thoroughly before submitting

Code of Conduct

Please read our Code of Conduct before contributing.

🐛 Troubleshooting

Common Issues

Node.js Version Issues

Problem: Build fails with Node.js version errors

Solution:

# Check Node.js version
node --version

# Upgrade to Node.js 18+ if needed
nvm install 18
nvm use 18

Port Already in Use

Problem: Development server won't start (port 5173 in use)

Solution:

# Kill process on port 5173
npx kill-port 5173

# Or start on different port
npm run dev -- --port 3000

Cart Data Not Persisting

Problem: Cart items disappear on page refresh

Solution:

• Check if localStorage is enabled in browser
• Clear browser cache and try again
• Ensure JavaScript is enabled

Getting Help

• 📧 Email: issues
• 🐛 Bug Reports: GitHub Issues
• 💬 Discussions: GitHub Discussions (Coming in the future)

🗺️ Roadmap

Phase 1: Current Features ✅

• Responsive design
• Shopping cart functionality
• Product catalog
• Basic checkout process

Phase 2: Enhancements 🚧

• User authentication system
• Product search and filtering
• Customer reviews and ratings
• Newsletter subscription
• Order history tracking

Phase 3: Advanced Features 🔮

• Admin panel for menu management
• Real-time order tracking
• Payment gateway integration
• Multi-language support
• PWA capabilities

Phase 4: Business Features 📈

• Analytics dashboard
• Inventory management
• Customer loyalty program
• Email marketing integration
• Social media integration

📄 License

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

🙏 Acknowledgments

Resources & Inspiration

• Unsplash - Beautiful coffee photography
• React Documentation - Comprehensive React guides
• Tailwind CSS - Utility-first CSS framework
• Vite - Lightning-fast build tool

Special Thanks

• Coffee shop owners who inspired this design
• Open source community for amazing tools

Built by

Chun-Huan Lee

---

⭐ Star this repo if you found it helpful!

🔗 GitHub Repository • 🌐 Live Demo

_{Copyright © 2025 Chun-Huan Lee. All rights reserved.}