StoveStories is a vibrant recipe book website crafted to spark culinary passion and community engagement. It empowers users to share, explore, and save a wide array of recipes, connecting food lovers through their cooking journeys. Featuring user-generated content, personalized recipe collections, and intuitive tools, StoveStories simplifies meal planning, inspires creative cooking, and celebrates the unique stories behind each dish, fostering a dynamic platform for culinary discovery and shared storytelling.
(https://stovestories-1a7e6.web.app/)
- Swiper JS Carousel: A 3D coverflow carousel showcasing the top 6 most-liked recipes with 3 slides visible, centered, and auto-playing for an engaging presentation.
- Responsive Design: A clean, user-friendly layout with sections for a header, and footer.Seamless browsing with React and React Router.
- Top 6 Recipes Lists: Displays the 6 most-liked recipes in a dedicated section.
- Like-Based Ranking: Recipes sorted by likes for easy discovery.
- User-Generated Recipes: Upload recipes with images, preparation times, and categories.
- Interactive Recipe Cards:Like, edit, or delete recipes with real-time updates.
- Personalized Collections: Filter recipes by user ID.
- swiper: Used for creating the interactive carousel with coverflow and autoplay effects (
npm install swiper). - react: The core library for building the user interface (
npx create-react-app). - react-dom: Supports rendering React components in the DOM (included with Create React App).
- sweet-alert: Provides a customizable, modern popup library for alerts and confirmations in web applications. Easily integrated with React to enhance user interactions with styled, animated dialogs, replacing basic browser alerts.
- react-icons: Offers a collection of popular icon libraries (e.g., Font Awesome, Material Icons) as React components. Simplifies adding scalable, customizable icons to React apps, enhancing UI with minimal setup.
- react-awesome-reveal:: Adds smooth fade animations to recipe cards, creating an engaging user experience (npm install react-awesome-reveal).
- react-tooltip:: Enables tooltips on interactive elements like delete buttons, improving usability (npm install react-tooltip).
- styled-components:: Facilitates reusable, scoped CSS styling for recipe cards and buttons, ensuring maintainable and consistent design (npm install styled-components).