RecipeAPP - Fullstack individual project

This project aims to develop a recipe app that allows users to search for recipes and filter the results. Both backend and frontend components of the application will be developed and deployed, and they will be seamlessly integrated to work together.

Project Requirements

• To be able to get a suggestion list of recipes.

• Home page - getting random hits of recipes

• To filter the recipe suggestions by both meal type and allergens:

• Starter, main course, or dessert (minimum, more meal types can be implemented).

• In the navbar. Main Course as (main), starters and route.

• Allergens and dietary choices (e.g., gluten, nuts, vegetarian, etc.), so in addition to being able to filter by starter, main course, and dessert, at least 3 extra filtering options related to allergens or other should be included.

• Search function with a dieatry prefences search (switch buttons): Gluten, vegeterian, Nutsfri and Egg-free

To be able to click on a recipe to see its (more detailed) information (own route).

• With the specifik ID of the recipe. Recipe component.

Technical Information (frameworks/library and creds)

• Angular Version: 17.3.1
• Tailwind - CSS
• Flowbite
• Edamam API
• Laravel Sanctum API for authentication and authorization
• Insomnia for mockup data - increase the PAI requests consider many of the free APIs have limieted number of tequests

API

Recipe API: The application will utilize the Edaman API to fetch recipe information.

For authentication and authorization: Laravel Sanctum API

Deployment

Frontend and backend components will be deployed separately. Frontend: Netlify - https://flavoryy.netlify.app/ Backend:

• Cloud: Aiven
• Backend: Render - https://flavory-recipe-app.onrender.com/

The frontend and backend will be connected to ensure smooth operation in the production environment.

Skills

HC: Web development responsively and browser-adapted using HTML and CSS according to current web standards.

JS: Develop web solutions using JavaScript.

JS: Utilize JavaScript frameworks and libraries.

JS: Incorporate existing APIs as a component in your own app.

BE: Web development with object-oriented PHP.

BE: Create web solutions using an MVC framework.

BE: Utilize existing APIs.

BE: Build your own simple REST APIs.

Competencies

• Work as a full-stack web developer with JavaScript.
• Work as a full-stack web developer with backend development.

** Shaker Nasser 2024 **