Good Taste (A Recipe-Application)

A delightful recipe application for food enthusiasts.

A full stack web project

Objective

The objective of creating this website was to utilize all the skills that we learned.

## Demo

Check out the live demo here.

Backendlink-https://recipebackend-f3me.onrender.com

Tech Stack

Frontend

• React
• Redux
• ChakraUI
• MaterialUI
• Axios
• HTML
• CSS
• JavaScript

Backend

• Node.js
• Express
• Mongodb

Features which are working or built:-

• Homepage/Landingpage
• Recipe Page
• Single Page (for detailed information)
• Favourate Page
• Authentication

Description/view of different pages

Homepage

1.

Highlighted Features :

• Notice the search bar at the top, allowing users to search for recipes by keywords.
• We've included featured recipes that users can explore right on the homepage.
• The 'Sign In' and 'Sign Up' buttons in the top-left corner provide quick access to user authentication.

User Interaction:

• Users can enter search terms in the search bar and hit 'Enter' to initiate a recipe search.
• Clicking on a button (MoreDetails) a featured recipe card will take users to the recipe details page.

Visual Elements:

• We've used a clean and modern design with vibrant food images to make the homepage visually appealing.
• The navigation menu at the top provides easy access to different sections of the application.

Authentication

1.SignUp

Key Elements:

• For Signup, users can see input fields for name ,email and password, allowing them to enter their credentials.
• We've included a 'Login' button that users can click to initiate the login process.

User Interaction:

• To sign in, users should enter their details like name ,email and password and click the 'submit' button.

Visual Elements:

• The login page features a clean and user-friendly design .

Error Handling:

• If a user enters incorrect login credentials, the login page displays an error message to inform them.

2.SignIn

Key Elements:

• For login, users can see input fields for email and password, allowing them to enter their credentials.
• We've included a 'submit' button that users can click to initiate the login process.

User Interaction:

• To log in, users should enter their registered email and password and click the 'submit' button.

Visual Elements:

• The login page features a clean and user-friendly .

Error Handling:

• If a user enters incorrect login credentials, the login page displays an error message to inform them.

Recipe Page

Key Elements:

• On the recipe details page, users can see the recipe title, a list of recipes, and a button "moredetails".
• When a user click on moredetails button this will take him to detailed information page .

User Interaction:

• To view a recipe's details, users can click on a moredetails button or search result.
• Users can scroll through the list .

Visual Elements:

• The recipe details page features mouth-watering images of the dish to entice users.
• We've designed the page to provide an intuitive and user-friendly experience.

Single (Detailed page)

Key Elements:

• On the detailed recipe page, users can explore the recipe's title, a list of ingredients, step-by-step cooking instructions, and nutritional facts.
• We've included a 'Save Recipe' button that allows users to store this specific recipe in their saved recipes.

Visual Elements:

• The detailed recipe page features appetizing images of the dish to engage users visually.
• We've designed the page to provide an informative and visually appealing experience.

Favourate Page

Key Elements:

• On the 'My Favorites' page, users can see a list of their saved recipes, including recipe titles and images.
• We've provided a 'Remove from Favorites' button that allows users to unsave recipes.

User Interaction:

• To access their saved recipes, users can click on the ' Favorites' option in the navigation menu.
• Users can click the 'Remove from Favorites' button to unsave a recipe they no longer wish to keep.

Visual Elements:

• The favorites page features a user-friendly and organized design to make it easy for users to manage their saved recipes.

Additional Features:

• Users can sort their saved recipes by various criteria, such as date added or cuisine type.

Getting Started

To get started with this recipe application, follow these simple steps:

1. Clone this repository.

2. Install the required dependencies.

3. Start the application locally by running the following command:

   npm start
   

Contact

For questions or feedback, don't hesitate to reach out to us:

• Email: sonuparjapat.connect@gmail.com
• GitHub: sonuparjapat