Added API Explorer wireframe and documentation

This commit is contained in:
Aakarsh Gopishetty
2025-03-27 23:48:42 +05:30
parent df7f4f8cdc
commit 0f2cfcf28b
2 changed files with 54 additions and 0 deletions

View File

@@ -0,0 +1,54 @@
# API Explorer Wireframe
## 📌 Overview
This document presents the wireframe design for the **API Explorer** feature in API Dash. The API Explorer will allow users to:
- **Discover public APIs** across various categories.
- **View API details**, including authentication methods and sample requests.
- **Import APIs into their workspace** for seamless testing.
---
## 🎨 Wireframe Design
The wireframe includes three main sections:
### **1⃣ Homepage (API Listing Page)**
- **🔍 Search Bar**: Users can search for APIs.
- **📂 Category Filters**: AI, Finance, Weather, etc., to filter APIs.
- **📌 API Cards**: Displays API name, short description, category, and a "View Details" button.
- **➡️ Navigation**: Clicking “View Details” opens the API Details Page.
### **2⃣ API Details Page**
- **📌 API Name & Description**
- **🔑 Authentication Info** (API key required or not).
- **📂 API Endpoints & Sample Requests**
- **📋 "Copy API Key" Button**
- **📥 "Import API to Workspace" Button**
### **3⃣ Sidebar (Optional)**
- **📂 Saved APIs List** (Previously imported APIs).
- **⭐ Ratings & Reviews Section** (User feedback if implemented).
---
## 🖼️ Wireframe Link
🔗 **View the wireframe on Excalidraw**:
[API Explorer Wireframe](https://excalidraw.com/#json=71K2EyrjsTEv1HXRMTRqB,iw86qFoQz9coZwkuAcXPUQ)
*(Optional: If you exported an image, add it here)*
![Wireframe Preview](./wireframe.png)
---
## 🚀 Next Steps
1. **Review the wireframe and suggest changes (if any).**
2. Once approved, start coding the **frontend UI** (homepage, details page, sidebar).
Looking forward to feedback! 🔥

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 111 KiB