API Canvas

API Canvas is a modern, responsive web application that catalogs and showcases public APIs. It provides an intuitive interface for exploring, searching, and filtering APIs by various criteria.

Features

• Browse a comprehensive catalog of public APIs
• Search APIs by name or description
• Filter APIs by category, authentication requirements, HTTPS support, and CORS compatibility
• Detailed API information with usage examples
• Responsive design - works on desktop, tablet, and mobile devices
• Dark/light mode support

Tech Stack

• Frontend Framework: Next.js 14 (App Router)
• UI Library: React
• Styling: TailwindCSS
• UI Components: shadcn/ui
• API Data Handling: GraphQL with Apollo Client
• Icons: Lucide React
• Authentication: Firebase Authentication
• Data Source: Public APIs collection

Prerequisites

• Node.js 18.0.0 or higher
• npm or yarn package manager
• Git

Setup and Installation

1. Clone the repository

git clone https://github.com/Aswath-Senthilkumar/api-canvas.git
cd api-canvas

2. Install dependencies

npm install
# or
yarn install

3. Setup environment variables (optional for firebase)

Create a .env.local file in the root directory with the following variables:

NEXT_PUBLIC_FIREBASE_API_KEY=your_firebase_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_firebase_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_firebase_storage_bucket
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_firebase_messaging_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_firebase_app_id

4. Run the development server

npm run dev
# or
yarn dev

5. Open your browser

Navigate to http://localhost:3000 to see the application.

Building for Production

npm run build
# or
yarn build

Then start the production server:

npm run start
# or
yarn start

Project Structure

• /app - Main application pages and routes (Next.js App Router)
• /components - Reusable UI components
• /components/ui - shadcn/ui components
• /lib - Utility functions and configuration
• /data - API data files
• /public - Static assets

API Data

The application uses a curated collection of public APIs stored in data/full-public-apis.json. The data is served via a GraphQL API (implemented in /app/api/graphql/route.ts).

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.