Skip to main content
Prompts Recipe Finder Web App with Food API

developer coding user risk: low

Recipe Finder Web App with Food API

Create a recipe finder application using HTML5, CSS3, JavaScript, and a food API with features including advanced search, user ratings, nutritional information, recipe saving, meal…

PROMPT 

Create a recipe finder application using HTML5, CSS3, JavaScript and a food API. Build a visually appealing interface with food photography and intuitive navigation. Implement advanced search with filtering by ingredients, cuisine, diet restrictions, and preparation time. Add user ratings and reviews with star system. Include detailed nutritional information with visual indicators for calories, macros, and allergens. Support recipe saving and categorization into collections. Implement a meal planning calendar with drag-and-drop functionality. Add automatic serving size adjustment with quantity recalculation. Include cooking mode with step-by-step instructions and timers. Support offline access to saved recipes. Add social sharing functionality for favorite recipes.

EXPECTED OUTPUT

Format
code

SUCCESS CRITERIA

  • Create recipe finder using HTML5 CSS3 JavaScript and food API
  • Build visually appealing interface with food photography and navigation
  • Implement advanced search with filters by ingredients cuisine diet and time
  • Add user ratings reviews with stars
  • Include nutritional info with visuals for calories macros allergens
  • Support recipe saving and collections
  • Implement meal planning calendar with drag-and-drop
  • Add serving size adjustment
  • Include cooking mode with steps and timers
  • Support offline saved recipes
  • Add social sharing

FAILURE MODES

  • Scope too broad leading to incomplete app
  • No specific food API causing integration issues
  • Complex features like drag-and-drop or offline may be omitted
  • User features like ratings may require unmentioned backend

CAVEATS

Dependencies
  • Suitable food API such as Spoonacular or Edamam
Missing context
  • Choice of food API and API key handling
  • User authentication or local storage details
  • Responsive design and accessibility requirements
  • Deployment or hosting instructions
Ambiguities
  • No specific food API identified.
  • 'Visually appealing interface' is subjective without design guidelines.
  • User features like ratings and saving imply persistence but no backend specified.

QUALITY

OVERALL
0.60
CLARITY
0.95
SPECIFICITY
0.60
REUSABILITY
0.20
COMPLETENESS
0.50

IMPROVEMENT SUGGESTIONS

  • Specify a particular food API (e.g., Spoonacular) with example endpoints and key acquisition steps.
  • Prioritize features into MVP and nice-to-have to manage scope.
  • Add required file structure and code organization guidelines.
  • Include mockups or wireframes for key UI components.

USAGE

Copy the prompt above and paste it into your AI of choice — Claude, ChatGPT, Gemini, or anywhere else you're working. Replace any placeholder sections with your own context, then ask for the output.

MORE FOR DEVELOPER