/Recipe-Hut

recipe hut, love at first byte

Primary LanguageJavaScript

🛡️ Introduction 🛡️

Recipe Hut is a Progressive Web Application , which provides a social media platform for food enthusiasts, who like to explore new recipes and share their knowledge with others by writing blogs

User will be provided with a random feed of recipes on their home screen, they can also search for recipes of their choice using natural language, the response of which can be obtained in two ways

  • a detailed article describing the recipe along with ingredients and steps
  • a video from youtube provided by top chefs

Once the user is signed in, they will be given access to two new sections 1) profile 2) blogs

Using the profile section they can setup their profile

Users can read daily blogs posted by other users and give feedback in the form of likes and comments 💌 . Users can make use of the write section to share their recipes 🥙🥗, any other relevant information in the form of blogs

This application is available as a website which is responsive to the desktop/laptop, tablet and mobile devices . This application can also be downloaded as an app on your devices by using google chromes " install app " feature

apk file is provided in the repo, just in case its required

Overview

📱🌐 Progressive Web Application 🌐📱

In simple words , Progressive Web Apps (PWAs) are web applications that are regular web pages or websites, but can appear to the user like traditional applications or native mobile applications. The application type attempts to combine features offered by most modern browsers with the benefits of a mobile experience. It works offline when you don't have an internet connection, leveraging data cached during your last interactions with the app'

✨ Features ✨

  • Signin using google
  • Sign in using email and password
  • Talk to the bot and ask nutritional information about various food items and ingredients, get random food trivia
  • Setup your profile upload your profile picture and be identified in the site,view others profile
  • Write blogs, share your views on others blogs by commenting on them
  • Add, remove recipes to your favourites to view them later
  • Track your search History
  • Get random feed of recipes
  • Search for particular recipes using natural language
  • Glassmorphic UI

Dual mode application

  • User mode
  • Admin mode : ability to modify and delete blogs

🛠️ Languages,tools and tech-features of the project 🛠️

  • Reactjs
  • Firebase
  • Sass
  • React-hooks
  • Axios
  • React-dom
  • REST API
  • speech-recognition
  • react-router
    Some additional features
  • Glassmorphic Ui
  • css-animation-effects
  • Svg Components
  • responsive-web-design
  • Pagination
  • Toastification

🏘️ Lighthouse report 🏘️

This application has recieved the following report from light house

{lost few points in accessibility for not placing lables for colorpicker and navbar tags, which was intentional }

🖼️ Some pictures of the project 🖼️