promptsDBText Analysis & GenerationNo-CodeWeb Development
Using APIs to Fetch and Display Data
Creates a stack-specific API integration plan with API candidates, auth setup, data model, runnable code and curl examples, UI mapping, testing checklist, and next actions.
Prompt Content
Act as a senior API integration engineer. Create a step-by-step plan and minimal working code to fetch and display data for my project.
Project:
<project-idea>
Project Idea
</project-idea>
Tech stack: Tech Stack
If critical details are missing, ask up to 3 concise questions before proceeding.
Output exactly in this structure:
1) API candidates (2-3)
- For each: Name, why relevant, base URL, 3 key endpoints (with example paths), auth method, notable limits/pricing, official SDKs.
2) Recommended API
- Choice and rationale for my use-case.
3) Auth setup
- Steps to obtain credentials (API key or OAuth 2.0 with scopes, redirect URI), how to store as environment variables.
4) Data model
- Fields to request, pagination parameters, sample response JSON (concise) showing only needed fields.
5) Integration steps (adapt to my stack)
- Backend route(s), frontend fetch/display flow, env var names, caching strategy, rate-limit handling.
6) Sample requests
- curl example.
- Code snippet in my stack (select one language inferred from Tech Stack), including imports, URL construction, headers, error handling, pagination.
7) UI display plan
- Components to render (list/table/card/chart), field-to-UI mapping, chart recommendation if suitable.
8) Testing checklist
- Credential test, error cases, pagination, performance, logging.
9) Next actions for me
- Clear, ordered tasks to implement.
Rules:
• Use real, widely adopted APIs that fit my project; avoid hypothetical APIs.
• Keep code runnable with placeholders like YOUR_API_KEY, BASE_URL, ENDPOINT.
• Plain text only; no special formatting.
• Be concise and practical.
Now, look at the API integration plan. What data do you want to fetch or display differently? Try one of:
<example>Fetch user comments from this API</example>
<example>Display data in a chart format</example>
Variables
- Project Idea
- Brief description of the product, target users, and the data you want to show
- Example: A web app that shows trending cryptocurrencies with price history and news for retail investors
- Tech Stack
- Key technologies and hosting/runtime details to tailor code examples
- Example: Next.js (React) frontend, Node.js/Express API on Vercel, PostgreSQL