https://github.com/raiyanjiyon/coffee-shop

A dynamic platform for coffee enthusiasts to explore various coffee types, manage their cart, and wishlist. Features include responsive design, local storage management, dynamic routing, and sorting options for an enhanced user experience
https://github.com/raiyanjiyon/coffee-shop

daisy-ui localstorage react react-router taiwlind

Last synced: about 2 months ago
JSON representation

A dynamic platform for coffee enthusiasts to explore various coffee types, manage their cart, and wishlist. Features include responsive design, local storage management, dynamic routing, and sorting options for an enhanced user experience

• Host: GitHub
• URL: https://github.com/raiyanjiyon/coffee-shop
• Owner: RaiyanJiyon
• Created: 2024-11-13T05:41:31.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2024-11-29T15:31:20.000Z (over 1 year ago)
• Last Synced: 2025-04-06T09:53:29.305Z (about 1 year ago)
• Topics: daisy-ui, localstorage, react, react-router, taiwlind
• Language: JavaScript
• Homepage: https://soft-faun-318037.netlify.app/
• Size: 2.65 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# ☕ 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! 🎉