🚀 API Showcase

A curated collection of 500+ free APIs across 47 categories for developers

🌐 Live Demo • Features • Installation • Categories • Contributing

---

📖 About

API Showcase is a modern web application that helps developers discover free APIs for their projects. Whether you're building a weather app, a crypto tracker, or a gaming dashboard, you'll find the right API here.

✨ Features

• 🎯 500+ Free APIs - Carefully curated and organized
• 📂 47 Categories - From Weather to Cyber Security, Crypto to AI
• 🌙 Dark/Light Mode - Easy on the eyes
• 📱 Responsive Design - Works on all devices
• ⚡ Fast & Modern - Built with Next.js 15
• 🎨 Beautiful UI - Glass morphism effects & smooth animations
• ⭐ Recommended APIs - Highlighted picks for each category
• 🔍 Rate Limits - Know the limits before you start
• 🎉 v2.0 Update Banner - Always stay informed about new additions

🖥️ Demo

Click to view live demo

🛠️ Tech Stack

Technology	Purpose
Next.js 15	React Framework (App Router)
TypeScript	Type Safety
Tailwind CSS	Styling
Framer Motion	Animations
next-themes	Theme Management
Lucide React	Icons

📁 Project Structure

api-showcase/
├── src/
│   ├── app/                    # Next.js App Router pages
│   │   ├── layout.tsx          # Root layout with theme provider
│   │   ├── page.tsx            # Home page
│   │   ├── globals.css         # Global styles
│   │   ├── not-found.tsx       # 404 page
│   │   └── category/
│   │       └── [id]/           # Dynamic category pages
│   │           ├── page.tsx
│   │           └── CategoryPageClient.tsx
│   │
│   ├── components/             # Reusable React components
│   │   ├── Header.tsx          # Navigation header
│   │   ├── Hero.tsx            # Landing hero section
│   │   ├── CategoryGrid.tsx    # Category cards grid
│   │   ├── UpdateBanner.tsx    # v2.0 sticky update banner
│   │   ├── ThemeProvider.tsx   # Theme context provider
│   │   └── ThemeToggle.tsx     # Dark/Light mode toggle
│   │
│   └── data/
│       └── apis.ts             # All API data (529+ APIs)
│
├── package.json
├── tailwind.config.js
├── tsconfig.json
└── next.config.js

🚀 Installation

Prerequisites

• Node.js 18+
• npm or yarn

Steps

1. Clone the repository

   git clone https://github.com/CanKStar0/API-SHOWCASE-APP.git
   cd API-SHOWCASE-APP

2. Install dependencies

   npm install

3. Start development server

   npm run dev

4. Open in browser

   http://localhost:3000
   

Build for Production

npm run build
npm start

📚 Categories

Category	APIs	Description
☁️ Weather	14	Weather forecasts, climate data, air quality
💰 Crypto	21	Cryptocurrency prices, blockchain data, Web3
🎮 Gaming	20+	Game databases, player stats, card games
🗺️ Maps	10+	Geocoding, routing, location services
🎬 Movies	10+	Film databases, streaming info
🎵 Music	10+	Music streaming, lyrics, audio analysis
📰 News	10+	News aggregation, headlines
💵 Finance	15+	Stock prices, exchange rates
🚀 Space	10+	NASA data, astronomy, satellites
🐾 Animals	10+	Pet photos, animal facts
🔒 Security	19	Cyber security, malware analysis, threat intel
🔑 Auth	8	Passwordless login, OAuth, access control
🤖 AI & ML	11	Computer vision, AI models, image recognition
🛒 E-Commerce	10	Shopping platforms, mock products, store data
...and 33 more!

🤝 Contributing

Contributions are welcome! Here's how you can help:

Adding a New API

1. Fork the repository
2. Edit src/data/apis.ts
3. Add your API to the appropriate category:

   {
     name: "API Name",
     url: "https://api-url.com",
     description: "What it does",
     rateLimit: "1000 requests/day",
     isRecommended: false,
     isNew: true  // optional
   }

4. Submit a Pull Request

Adding a New Category

1. Add the category to categories array in src/data/apis.ts
2. Add gradient color mapping in CategoryGrid.tsx and CategoryPageClient.tsx
3. Submit a Pull Request

📝 License

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

🙏 Acknowledgments

• All the amazing API providers who offer free tiers
• The open-source community for the awesome tools

---

⭐ Star this repo if you find it useful!

Made with ❤️ by CanKStar0