Skip to content

Latest commit

 

History

History
115 lines (81 loc) · 4.18 KB

README.md

File metadata and controls

115 lines (81 loc) · 4.18 KB

☕ Artisan Coffee - Your Coffee Explorer

Welcome to Artisan Coffee, a platform where coffee enthusiasts can explore a variety of coffee types, manage their shopping cart, and wishlist their favorites. This project is designed with dynamic routing, local storage management, and a responsive layout, providing a seamless user experience.

🚀 Live Website Link

Check out the live version of the website here: Artisan Coffee Live (https://soft-faun-318037.netlify.app/).

🛠️ Features & React Fundamentals

React Concepts Used:

  • React Components: Reusable components for Navbar, Coffee Cards, and Coffee Details.
  • React Router (v6): Dynamic routing for pages like Home, Coffee Details, and the Dashboard.
  • useState & useEffect: Managing component states and lifecycle events for dynamic UI updates.
  • LocalStorage: Persistent data storage for user-added cart and wishlist items.
  • Conditional Rendering: Displaying content dynamically based on user interactions.

🌟 Key Features of Artisan Coffee

Here are the standout features of Artisan Coffee:

  1. Dynamic Coffee List

    • Displays a grid of coffee cards. Clicking "View Details" redirects users to a dynamic Coffee Details page.

  2. Interactive Coffee Details

    • Users can view coffee descriptions, making processes, and nutritional info. Options to "Add to Cart" or "Add to Wishlist" are available.

  3. Dashboard Page

    • A dedicated page for users to view and manage their cart and wishlist items, persisted via LocalStorage.

  4. Sorting Options

    • Users can sort coffees by popularity and ratings on the dashboard for an organized experience.

  5. Responsive Design

    • Fully responsive layout for both desktop and mobile, ensuring seamless browsing on all devices.

📋 Implementation Details

Main Pages:

  1. Home Page:

    • A welcoming banner with a CTA button.
    • Coffee cards with details like name, category, tags, and a "View Details" button.

  2. Coffee Details Page:

    • Detailed coffee information, including making process, ingredients, and nutrition.
    • Buttons for adding items to the cart or wishlist.

  3. Dashboard Page:

    • Displays lists of items added to the cart and wishlist, with options to manage them.
    • Sorting options for filtering items by popularity and rating.

  4. 404 Page:

    • A "Page Not Found" route to handle invalid URLs gracefully.

📈 Key Functionalities

  1. Add to Cart/Wishlist

    • Users can add coffee items to the cart or wishlist with buttons on the Coffee Details page.

  2. Persistent Storage

    • Data stored in LocalStorage ensures that cart and wishlist items remain intact across sessions.

  3. Dynamic Routing

    • Routes are dynamically created for coffee details, ensuring seamless navigation.

  4. Sort & Filter

    • Options to sort coffee items based on popularity and rating for better user experience.

  5. Responsive Design

    • The website is fully responsive, with layouts optimized for both desktop and mobile devices.

🚀 How to Use the Website:

  1. Explore Coffee Options

    • Browse the coffee list on the homepage and click "View Details" for more information.

  2. Add to Cart or Wishlist

    • Use the buttons on the Coffee Details page to save items to your cart or wishlist.

  3. Manage Your Favorites

    • Access your saved items on the Dashboard page, where you can view, sort, or remove items.

  4. Dynamic Navigation

    • Enjoy seamless navigation between pages using the Navbar.

📋 Project Requirements Checklist

  • [✅] Navbar with active routes
  • [✅] Banner section with redirect button
  • [✅] Dynamic Coffee Cards grid
  • [✅] Dynamic Coffee Details page
  • [✅] Cart and Wishlist functionality with persistent storage
  • [✅] Dashboard page with sorting options
  • [✅] 404 error page
  • [✅] Fully responsive design

👨‍💻 Tech Stack

  • React.js
  • Tailwind CSS
  • DaisyUI
  • React Router (v6)
  • LocalStorage

Feel free to share feedback or contribute to the project. Happy coding! 🎉