Coffee Shop Website

Welcome to the Coffee Shop Website! This project is a fully functional and beautifully designed coffee shop website built using modern web development tools and best practices.

Live Link: Live Demo Link

Features

Hero Section

• A stunning coffee image with welcoming text to create a warm and inviting first impression.

Products Section

• Display of coffee items with:
  • High-quality images
  • Product names
  • Descriptions
  • Prices
  • Add to Cart functionality

Shopping Cart

• Fully functional shopping cart with:
  • Product list
  • Quantity adjustment
  • Remove items
  • Total calculation
  • Checkout button

Footer

• Essential information about the coffee shop, including:
  • Business hours
  • Contact information
  • Location details

Technologies Used

Frameworks and Libraries

• Next.js 13 with App Router for robust and scalable web development
• Tailwind CSS for modern and responsive styling
• shadcn/ui components for prebuilt and customizable UI elements
• Lucide React icons for beautiful and scalable icons

Additional Resources

• High-quality images sourced from Unsplash

State Management

• React's useState hook to manage the state of the shopping cart seamlessly

Functionalities

Users Can:

1. Add products to the cart
2. Adjust product quantities in the cart
3. Remove items from the cart
4. View the total amount dynamically

How to Run the Project

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Setup

1. Clone the repository:

   git clone https://github.com/coderskamrul/Coffee-Shop-With-Nextjs.git

2. Navigate to the project directory:

   cd coffee-shop-website

3. Install dependencies:

   npm install
   # or
   yarn install

4. Run the development server:

   npm run dev
   # or
   yarn dev

5. Open the website in your browser at http://localhost:3000.

Folder Structure

coffee-shop-website/
├── public/               # Public assets (images, icons, etc.)
├── src/
│   ├── app/              # Next.js app router
│   ├── components/       # Reusable UI components
│   ├── styles/           # Tailwind CSS configuration
│   ├── utils/            # Utility functions
│   └── pages/            # Individual pages
└── README.md             # Project documentation

Deployment

To deploy the project, follow the official Next.js deployment guide:

• Next.js Deployment Documentation

Contributing

Contributions are welcome! If you'd like to contribute, please fork the repository and submit a pull request.

License

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

Acknowledgments

• Thanks to Unsplash for providing high-quality images.
• Inspired by the passion for great coffee and web development!

---

Coffee Shop Demo:

Home

Feel free to explore, modify, and enjoy the Coffee Shop Website! If you have any feedback or questions, don't hesitate to reach out.