https://github.com/sehansi-9/recipe-sharing-platform
Recipe Hub is an interactive recipe sharing site
https://github.com/sehansi-9/recipe-sharing-platform
bootstrap context-api reactjs
Last synced: 11 months ago
JSON representation
Recipe Hub is an interactive recipe sharing site
- Host: GitHub
- URL: https://github.com/sehansi-9/recipe-sharing-platform
- Owner: sehansi-9
- Created: 2025-04-07T17:01:32.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-09T16:03:33.000Z (about 1 year ago)
- Last Synced: 2025-05-16T16:13:40.445Z (about 1 year ago)
- Topics: bootstrap, context-api, reactjs
- Language: JavaScript
- Homepage:
- Size: 155 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Recipe Hub 🍽️ by Sehansi Perera
Welcome to **Recipe Hub** – the ultimate recipe app that brings you a world of culinary delights! With an easy-to-use interface, you can browse, filter, and favorite your favorite recipes, and even share them with your friends! Whether you're a seasoned chef or just getting started in the kitchen, Recipe Hub has everything you need.
---
## Features
- **Home Page**: Displays all available recipes from a mock dummy JSON API.
- **Recipe Filtering**: Easily filter recipes by meal type like Chicken, Vegetarian, etc.
- **Search Bar**: Find your favorite recipes by searching for ingredients or meal names.
- **Favorites**: Save your favorite recipes and access them easily via the "Favorites" tab on the navbar.
- **Recipe Details**: Clicking on a recipe takes you to a detailed page showing ingredients, step-by-step instructions, and a timer.
- **Interactive Timer**: Track your meal prep time for better kitchen management.
- **Social Sharing**: Share your recipes on social media platforms like Twitter, Facebook, and WhatsApp.
- **Interactive Rating System**: Add your rating to your favourite recipes
- **Printable Recipes**: Easily get your favourite recipes in print format
- **User Recipe Management**: Add, update, and delete your own recipes.
- **Local Storage**: User details, favorite meals, and personal recipes are stored in the browser's local storage.
- **React Router**: Smooth navigation throughout the app using React Router.
- **Context API**: Manage global states, such as user data and favorite recipes.
- **Bootstrap**: Fully responsive design with Bootstrap for a clean, modern look.
---
## Tech Stack
- **React**: For building the UI with reusable components.
- **Bootstrap**: To make the app fully responsive and stylish.
- **React Router**: For seamless navigation between pages.
- **Context API**: To manage the global state for user data and favorite recipes.
- **LocalStorage**: To persist user data and preferences.
- **Mock JSON API**: For fetching recipe data.
- **CSS**: For custom styling and making the app visually appealing.
---
## Flow
- User logins/signs up (The site blocks all routes and directs to auth page if no user credentials are available in local storage)
- Unfilled fields during auth process are instantly alerted
- User data, user favourites, and new recipes added by the user are stored in local storage; deleting and updating the added recipes are instantly updated in the local storage
- Error messages are displayed if fetching from API fails
- The logout button clears user data from local storage and redirects to auth page, blocking all routes.
## Screenshots
### Home Page with search bar
### Detailed Recipe Page with timer and social sharable options
### Printable Recipes
### Adding a new recipe
### Added Recipes that are editable
### Sign up mock-up
---
## Folder Structure
```plaintext
/src
├── /components # Reusable UI components like RecipeCard, RecipeDetails, etc.
├── /contexts # Global state management with Context API.
├── /css # Custom CSS files for styling.
├── /pages # Pages such as Home, RecipeDetails, Favorites, etc.
└── /services # Fetching data from the Mock API.
```
## How to Run the App
1. Clone the repository:
```bash
git clone https://github.com/sehansi-9/recipe-sharing-platform.git
```
2. Navigate to the project folder:
```bash
cd recipe-sharing-platform
```
2. Install the dependencies:
```bash
npm install
```
3. Start the app:
```bash
npm run dev
```
---
Now, you can open your browser and visit (http://localhost:3000) to check out the Recipe Hub!