https://github.com/bilalm04/recipe-finder

Recipe Finder Web Application created using React, Node, and Express.
https://github.com/bilalm04/recipe-finder

css expressjs firebase github-pages javascript mongodb nodejs reactjs

Last synced: 5 days ago
JSON representation

Recipe Finder Web Application created using React, Node, and Express.

• Host: GitHub
• URL: https://github.com/bilalm04/recipe-finder
• Owner: BilalM04
• Created: 2023-12-23T20:00:35.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-09-11T01:40:29.000Z (4 months ago)
• Last Synced: 2024-11-08T12:15:07.267Z (about 2 months ago)
• Topics: css, expressjs, firebase, github-pages, javascript, mongodb, nodejs, reactjs
• Language: JavaScript
• Homepage: https://bilalm04.github.io/recipe-finder/
• Size: 7.76 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Recipe Finder Web Application

Welcome to the Recipe Finder web application, a dynamic and intuitive solution for discovering and managing your favorite recipes. This project is developed using JavaScript, React.js, Node.js, Express.js, CSS, Firebase, and MongoDB.

**Check it out:** [Recipe Finder](https://bilalm04.github.io/recipe-finder/)



![](https://github.com/user-attachments/assets/54f115be-c303-4e88-87a5-ed7f2727b77f)

![](https://github.com/user-attachments/assets/3bd1bb7f-d730-40a4-a0b0-6c7486bbe5ee)



## Features

- **Recipe Discovery:** Explore a diverse range of recipes based on user-inputted ingredients, thanks to the integration of the [Edamam](https://www.edamam.com/) API.

- **User Authentication:** Save and manage your favorite recipes securely. [Firebase](https://firebase.google.com/) authentication ensures a seamless and protected user experience.

- **Database Integration:** Utilize MongoDB to securely store and retrieve recipes saved by authorized users.

## Technologies Used

- **Frontend:** React.js, CSS

- **Backend:** Node.js, Express.js

- **Authentication:** Firebase

- **Database:** MongoDB

## Getting Started

1. **Clone the Repository:**

   ```bash

   git clone https://github.com/your-username/recipe-finder.git

2. **Navigate to the Frontend:**

   ```bash

    cd recipe-finder

   

3. **Install Dependencies:**

   ```bash

    npm install

4. **Configure Environment Variables:** Create a `.env` file and fill in the following variables with your own credentials.

   ```env

   REACT_APP_FIREBASE_API_KEY=

   REACT_APP_FIREBASE_AUTH_DOMAIN=

   REACT_APP_FIREBASE_PROJECT_ID=

   REACT_APP_FIREBASE_STORAGE_BUCKET=

   REACT_APP_FIREBASE_MESSAGING_SENDER_ID=

   REACT_APP_FIREBASE_APP_ID=

   REACT_APP_FIREBASE_MEASUREMENT_ID=

   REACT_APP_RECIPE_API_URL=

   REACT_APP_EDAMAM_APP_ID=

   REACT_APP_EDAMAM_APP_KEY=

   ```

6. **Run the Application:**

   ```bash

    npm start

7. The application will be accessible at .

## Backend

The backend for the Recipe Finder web application is built with Node.js and Express.js, providing a robust API for managing user data and recipes. This API interacts with a MongoDB database to handle user authentication and recipe storage. You can find the source code for the backend [here](https://github.com/BilalM04/recipe-finder-backend).

## Demo

Explore the live demo: [Recipe Finder](https://bilalm04.github.io/recipe-finder/)