Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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


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

daisy-ui localstorage react react-router taiwlind

Last synced: 3 days ago
JSON representation

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