Conversation
Landing Page: - Update Hero with API-focused headline and documentation CTA - Update Features section with API capabilities (REST API, Halal Certified, etc) - Update Problem/Solution for developer pain points - Update How It Works with API integration steps - Update final CTA to promote API access API Docs: - Replace curl examples with Get Your API Key banner - Add editable input field for Try it feature - Add demo API key support via NEXT_PUBLIC_DEMO_API_KEY - Add X-API-Key header to Try it requests - Clean up unused curl examples code
📝 WalkthroughWalkthroughThis pull request transitions the frontend from a consumer nutrition-tracking application to a developer-focused API platform. Changes include enabling demo API key functionality for interactive "Try it" features in the API docs, reworking the API documentation UI, and rebranding all landing page components with API-centric messaging, icons, and navigation targets. Changes
Sequence Diagram(s)sequenceDiagram
participant User as User (Browser)
participant UI as API Docs UI
participant Client as client.tsx
participant Env as Browser Env
participant API as API Endpoint
User->>UI: Click Run button for endpoint
activate UI
UI->>Client: tryEndpoint(endpointId, try URL)
deactivate UI
activate Client
Client->>Env: getDemoApiKey()
activate Env
Env-->>Client: demo-api-key-value
deactivate Env
rect rgb(220, 240, 220)
Note over Client,API: Prepare authenticated request
Client->>Client: Build headers<br/>with X-API-Key
end
Client->>API: POST/GET with X-API-Key header
activate API
API-->>Client: response data
deactivate API
Client-->>UI: Display response
deactivate Client
UI->>UI: Render result in UI
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/kal-frontend/src/app/api-docs/client.tsx (1)
393-396: Correct the API authentication requirement statement.The message at line 396 is inaccurate. All endpoints require API key authentication via the
X-API-Keyheader (enforced byvalidateApiKeyMiddlewarein the backend). The current message stating "All endpoints are public and require no authentication" contradicts both the actual implementation and the banner below that prompts users to sign in for an API key.Update line 396 to:
-All endpoints are public and require no authentication. +All endpoints require authentication via a free API key. Sign in to get started.
🧹 Nitpick comments (2)
packages/kal-frontend/.env.example (1)
3-3: Document that the demo API key is publicly exposed.Since
NEXT_PUBLIC_DEMO_API_KEYuses theNEXT_PUBLIC_prefix, it will be exposed in the browser bundle. Ensure this key has appropriate rate limits and consider adding a comment in the.env.examplefile to clarify that this is a public demo key.💡 Suggested documentation addition
# API NEXT_PUBLIC_API_URL=http://localhost:4000 +# Demo API key for "Try it" feature (publicly exposed in browser) NEXT_PUBLIC_DEMO_API_KEY=your-demo-api-key-for-try-it-featurepackages/kal-frontend/src/app/api-docs/client.tsx (1)
264-278: Consider adding URL validation for better UX.The editable input field for "Try it" URLs has no validation. While this is acceptable for a developer tool, consider adding basic validation (e.g., checking if the URL starts with
/api/) or showing a warning for potentially invalid URLs to improve the user experience.💡 Example validation approach
<input type="text" value={getTryUrl(endpoint.id, endpoint.example)} onChange={(e) => setTryUrl(endpoint.id, e.target.value)} className="flex-1 bg-[#0a0a0a] border border-[#262626] rounded-lg px-3 py-2 font-mono text-sm text-[#a3a3a3] focus:outline-none focus:border-[#10b981] transition-colors" placeholder={endpoint.example} + pattern="/api/.*" + title="URL must start with /api/" />
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
packages/kal-frontend/.env.examplepackages/kal-frontend/src/app/api-docs/client.tsxpackages/kal-frontend/src/app/api-docs/page.tsxpackages/kal-frontend/src/components/landing/CTA.tsxpackages/kal-frontend/src/components/landing/Features.tsxpackages/kal-frontend/src/components/landing/Hero.tsxpackages/kal-frontend/src/components/landing/HowItWorks.tsxpackages/kal-frontend/src/components/landing/ProblemSolution.tsx
💤 Files with no reviewable changes (1)
- packages/kal-frontend/src/app/api-docs/page.tsx
🧰 Additional context used
🧬 Code graph analysis (3)
packages/kal-frontend/src/components/landing/ProblemSolution.tsx (2)
packages/kal-frontend/src/components/ui/Container.tsx (1)
Container(7-24)packages/kal-frontend/src/components/ui/SectionHeading.tsx (1)
SectionHeading(8-26)
packages/kal-frontend/src/components/landing/CTA.tsx (1)
packages/kal-frontend/src/components/ui/Button.tsx (1)
Button(12-53)
packages/kal-frontend/src/components/landing/Hero.tsx (1)
packages/kal-frontend/src/components/ui/Button.tsx (1)
Button(12-53)
🔇 Additional comments (10)
packages/kal-frontend/src/components/landing/HowItWorks.tsx (1)
3-27: LGTM! Clean transition to API-focused workflow.The updated steps clearly communicate the API integration process. The icon changes (Key, Code, Zap) are semantic and align well with the new messaging.
packages/kal-frontend/src/components/landing/Hero.tsx (2)
4-8: LGTM! Stats effectively communicate API value proposition.The updated stats ("100+ Malaysian Foods", "Free API Access", "<50ms Response Time") clearly convey the API's capabilities and performance.
25-45: LGTM! CTA hierarchy properly guides users.The primary CTA now routes to
/api-docsfor documentation, while the secondary CTA allows users to try the search interface. This creates a clear path for both API integration and casual exploration.packages/kal-frontend/src/components/landing/Features.tsx (1)
8-39: LGTM! Feature set effectively targets API developers.The updated features clearly communicate API capabilities (Fast REST API, Rich Food Data, Simple Integration, etc.) while highlighting unique value propositions like JAKIM halal certification. The icon choices are semantic and appropriate.
packages/kal-frontend/src/components/landing/ProblemSolution.tsx (1)
4-25: LGTM! Problem/solution framing resonates with developer audience.The updated content effectively articulates developer pain points (scattered data sources, missing Malaysian-specific info, complex integrations) and presents the API as a clear solution (unified REST API, authentic Malaysian foods, simple JSON responses).
packages/kal-frontend/src/app/api-docs/client.tsx (4)
18-24: LGTM! Browser-only check is appropriate.The
getDemoApiKeyfunction correctly checks for browser environment before accessingprocess.env. This prevents SSR/build-time issues.
151-167: LGTM! Per-endpoint URL management is well-structured.The addition of
tryUrlsstate and helper functions (getTryUrl,setTryUrl) enables users to customize the "Try it" URL for each endpoint independently. The use of the nullish coalescing operator (??) for fallback is appropriate.
169-192: LGTM! Conditional API key header is correctly implemented.The
tryEndpointfunction properly includes theX-API-Keyheader only when a demo key is available. Error handling is appropriate for the "Try it" feature.
151-151: All callers have been properly updated. The singleAPIDocsClientusage inpackages/kal-frontend/src/app/api-docs/page.tsxpasses only the four expected props (isAuthenticated,userEmail,onSignIn,onSignOut) and does not reference the removedcurlExamplesprop. No remaining references tocurlExamplesexist in the codebase.packages/kal-frontend/src/components/landing/CTA.tsx (1)
9-20: LGTM! Final CTA reinforces API-first positioning.The updated CTA ("Ready to build?", "Get Started with the API") creates a clear call-to-action for developers and routes appropriately to
/api-docs, maintaining consistency with the Hero section's primary CTA.
1 participant
Landing Page:
API Docs:
📝 Description
Brief description of what this PR does.
🔗 Related Issue
Fixes #(issue number)
🏷️ Type of Change
✅ Checklist
dev(notmain)pnpm lint:fixpnpm typecheck📸 Screenshots (if applicable)
Add screenshots to help explain your changes.
🧪 How to Test
Steps to test this PR:
📝 Additional Notes
Any additional information reviewers should know.
Summary by CodeRabbit
Release Notes
New Features
Changes
✏️ Tip: You can customize this high-level summary in your review settings.