This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.
Explore the docs »
View Demo
·
Report Bug
NOTE: PLEASE NOTE THAT THE EDAMAM FREE API ONLY ALLOWS 10 THROTTLING CALLS/MIN HENCE THE 429 Error – Too Many Requests AFTER 10 CALLS/MIN!
A food recipe app for looking up recipes, see details about a recipe, search for a recipe, sign up, sign in to add favorite recipes to admin page.
To get a local copy up and running follow these simple steps.
- npm
npm install npm@latest -g
- Clone the repo
git clone https://github.com/ChristianPredoianu/food-app-vue.git
- Install NPM packages
npm install
- Serve with hot reload at localhost
npm run dev
- Build for production
npm run build
The user is given some default recipes from the Edamam recipe Api when the home page loads. The user can either search for recipes in the navigation or the search box. When clicking the filter button a modal shows up where the user can filter recipes and also view details about the recipe, like nutrients, tags and other relevant information. When the user reaches the bottom of the page, additional recipes are loaded (infinite scroll) with some limitations (scrolling 3 times max) because of limit from the Edamam recipe API free plan. You can add recipes to your favorites. If the user tries to add a recipe without being authenticated the user is redirected to the sign in page. If the user is not a member he/she can become one by filling out a form that uses validation to give information to the user what inputs are incorrect/correct. After being authenticated (Firebase auth) the user can add or remove favorite recipes to the admin page. The app uses Firebase realtime database to store a users favorite recipes.
To try out the app just sign up with a username, email and password. The email doesn't have to be a real one as long as it follows the format of an email.
Distributed under the MIT License. See LICENSE for more information.
Christian Predoianu - @linkedin - christianpredoianu@yahoo.com
Project Link: https://github.com/ChristianPredoianu/food-app-vue