https://github.com/shahrintarin/stovestore
StoveStories is a vibrant recipe book website crafted to spark culinary passion and community engagement.
https://github.com/shahrintarin/stovestore
css expressjs firebase html5 javascript mongodb nodejs react
Last synced: 3 months ago
JSON representation
StoveStories is a vibrant recipe book website crafted to spark culinary passion and community engagement.
- Host: GitHub
- URL: https://github.com/shahrintarin/stovestore
- Owner: ShahrinTarin
- Created: 2025-06-25T15:49:42.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-25T21:36:10.000Z (about 1 year ago)
- Last Synced: 2025-06-25T22:33:47.526Z (about 1 year ago)
- Topics: css, expressjs, firebase, html5, javascript, mongodb, nodejs, react
- Language: JavaScript
- Homepage: https://stovestories-1a7e6.web.app/
- Size: 78.1 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# StoveStories
## Purpose
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.
## Live URL
(https://stovestories-1a7e6.web.app/)
## Key Features
- **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.
## NPM Packages Used
- **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).
---