An editorial-grade API Marketplace & Developer Monitoring Workspace built for modern engineering teams. Apiverse provides a refined, intentional frontend for discovering, comparing, and tracking external API integrations (like OpenAI, Stripe, AWS, and Twilio) all from a single dashboard.
It features a warm, typography-driven UI, real-time latency and uptime charting, secure provider credential sync, and client-side API key management.
Here is a showcase of the key product interfaces (stored in your repository under public/assets/screenshots/).
- Curation-First Directory: Highly detailed API catalog cards grouped by functional categories (AI, Payments, Messaging, Identity, Maps, etc.).
- Side-by-Side Compare: Add multiple APIs to a comparison tray to compare their authorization methods, pricing models, latencies, and features side-by-side.
- AI API Planner: Describe your project requirements and receive a recommended stack of top-performing API integrations instantly.
- Secure Key Storage: Securely connect and configure external API accounts (e.g. OpenAI, Stripe, AWS, Twilio, Sendgrid) for sandbox or live environments.
- Automated Usage Sync: Track estimated spend, request counts, and quota usage quantities per connected provider.
- Sandbox & Live Key Rotation: Generate, label, and revoke scoped API keys with a cryptographically hashed backend database representation.
- Request Logging: View audit trails and request history for each client workspace key.
- Dynamic Analytics: Powered by Recharts to display request metrics, avg latency, and status code distributions over time.
- Cron-Enabled Pings: Automated monitor runs ping API health endpoints and surface warnings/critical statuses immediately.
- Quota Alert Banners: Visual indicators warn team members when quotas approach their limit.
- Frontend: Next.js 16 (App Router), React 19, TypeScript
- Styling: Tailwind CSS v4, PostCSS, Lucide Icons
- Database & Auth: Supabase (PostgreSQL with Row Level Security policies enabled, custom SQL schemas, and server-side session management)
- Visual Charts: Recharts (fully responsive usage and error distribution charts)
- Toast Alerts: Sonner
apiverse/
├── public/ # Static assets, logos, and UI screenshots
├── src/
│ ├── app/ # Next.js App Router Pages and API Endpoints
│ │ ├── api/ # Serverless routes for Monitoring, Auth, Connections, and API Planner
│ │ ├── api-marketplace/# Marketplace explorer, category filters, and detailed view pages
│ │ ├── developer-dashboard/ # Metrics, Analytics, Projects, Keys, and Billing workspace
│ │ ├── landing-page/ # Rich editorial home page with key modules and metrics
│ │ └── pricing/ # Pricing plans comparison
│ ├── components/ # Global reusable components (CartDrawer, CodeSnippetCard, LandingNav)
│ │ └── ui/ # Core UI icons and branding assets (AppLogo, AppIcon, AppImage)
│ ├── context/ # Global React Contexts (ThemeContext, CartContext)
│ ├── lib/ # Database repositories, business logic services, and API clients
│ └── styles/ # Global CSS and Tailwind directives
├── supabase/ # SQL schema migrations
└── package.json # Dependencies, scripts, and dev config
All tables are created in the public schema in PostgreSQL and secured with Row Level Security (RLS). Policies ensure users can only interact with their own workspace resources.
| Migration File | Table Name | Purpose |
|---|---|---|
20260418_provider_connections.sql |
api_connections |
Holds credentials, estimated spends, sync logs, and environment configurations for third-party developer integrations. |
20260418_provider_connections.sql |
api_usage_snapshots |
Log of historical usage metrics per connection. |
20260421_apiverse_workspace_keys.sql |
workspace_api_keys |
Keys created by users for accessing client-scoped routes. Stored as hashes using SHA-256 equivalent hashing. |
20260421_apiverse_workspace_keys.sql |
workspace_api_usage_events |
Logs of actual API calls made using workspace keys. |
20260421_workspace_api_monitoring.sql |
workspace_monitored_apis |
Catalog of internal/external endpoints monitored for uptime, latency, and quota remaining. |
20260421_workspace_api_monitoring.sql |
workspace_api_monitor_checks |
Logs of status and latency checks performed by automated cron ping routines. |
20260421_workspace_api_monitoring.sql |
workspace_api_alerts |
Alerts generated from failed checks or exceeded quotas. |
20260529_workspace_projects.sql |
workspace_projects |
Logical grouping of monitored APIs and workspaces. |
20260610_marketplace_schema.sql |
apis, api_categories, etc. |
Marketplace directory data (available APIs, tags, pricing tiers, SDK support, ratings, and reviews). |
Copy .env.example to .env and configure the following variables:
# Supabase Public Keys
NEXT_PUBLIC_SUPABASE_URL=your-supabase-project-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anonymous-key
# Supabase Service Role Key (Used only on server-side APIs/crons)
SUPABASE_SERVICE_ROLE_KEY=your-supabase-service-role-key
# Application Settings
NEXT_PUBLIC_SITE_URL=http://localhost:4028git clone https://github.com/your-username/apiverse.git
cd apiverse
npm install- Create a new project in your Supabase Dashboard.
- Open the SQL Editor in Supabase.
- Copy and run the migration scripts inside
supabase/migrations/sequentially:20260418_provider_connections.sql20260421_apiverse_workspace_keys.sql20260421_workspace_api_monitoring.sql20260529_workspace_projects.sql20260610_marketplace_schema.sql20260610_pricing_page_tracking.sql
- Set up your authentication settings to support Email/Password sign-ups.
Start the development server:
npm run devOpen http://localhost:4028 in your browser.
npm run dev: Starts the local Next.js dev server with forced IPv4 DNS lookup order to ensure local API connectivity.npm run build: Compiles the application for production.npm run start: Runs the built production server locally.npm run lint: Analyzes code patterns and typescript rules.
This project is licensed under the MIT License - see the LICENSE file for details.