🚀 Rapid API Hub

A Modern API Discovery Platform

Discover, integrate, and manage APIs with ease

🌟 Live Demo • 📖 Documentation • 🐛 Report Issues • ✨ Request Features

---

📖 About The Project

Rapid API Hub is a modern, full-featured clone of the popular RapidAPI platform, built with cutting-edge technologies. This project demonstrates advanced web development techniques, including authentication, real-time data, responsive design, and modern UI/UX patterns.

---

🛠️ Tech Stack

Frontend

• Framework: Next.js 15.2.4 - React framework with App Router
• Language: TypeScript - Type-safe development
• Styling: Tailwind CSS - Utility-first CSS framework
• UI Components: Radix UI - Unstyled, accessible components
• Icons: Lucide React - Beautiful & customizable icons
• Fonts: Geist - Modern, readable typography

Backend & Authentication

• Database: Supabase - Open source Firebase alternative
• Authentication: Supabase Auth - Email/password and OAuth
• Real-time: Supabase Realtime - Live data synchronization

Developer Experience

• Type Safety: Full TypeScript coverage
• Code Quality: ESLint + Prettier
• Development: Hot reload with Turbopack
• Deployment Ready: Optimized for Vercel

---

🚀 Quick Start

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v18.0 or higher)
• npm or pnpm or yarn
• Git

Installation

1. Clone the repository

   git clone https://github.com/yourusername/rapid-api-hub.git
   cd rapid-api-hub

2. Install dependencies

   npm install
   # or
   pnpm install
   # or
   yarn install

3. Set up environment variables

   cp env.example .env.local

   Fill in your Supabase credentials:

   NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
   NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

4. Run the development server

   npm run dev
   # or
   pnpm dev
   # or
   yarn dev

5. Open your browser

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

---

🔧 Configuration

Supabase Setup

1. Create a Supabase account at supabase.com

2. Create a new project

   • Choose your organization
   • Set project name and database password
   • Select your region

3. Get your credentials

   • Go to Settings → API
   • Copy your Project URL and anon public key

4. Set up authentication

   • Enable email/password authentication
   • Configure redirect URLs for your domain

Environment Variables

Create a .env.local file in the root directory:

# Supabase Configuration
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

# Optional: Analytics
NEXT_PUBLIC_GA_ID=your-google-analytics-id

---

📁 Project Structure

rapid-api-hub/
├── 📁 app/                    # Next.js App Router
│   ├── 📁 login/             # Login page
│   ├── 📁 signup/            # Registration page
│   ├── 📁 categories/        # API categories
│   ├── layout.tsx            # Root layout
│   ├── page.tsx              # Homepage
│   └── globals.css           # Global styles
├── 📁 components/            # Reusable components
│   ├── 📁 ui/               # UI primitives
│   ├── header.tsx           # Navigation header
│   ├── sidebar.tsx          # Navigation sidebar
│   └── ...                  # Other components
├── 📁 hooks/                # Custom React hooks
│   ├── use-auth.tsx         # Authentication logic
│   ├── use-loading.tsx      # Loading states
│   └── use-toast.ts         # Toast notifications
├── 📁 lib/                  # Utility functions
│   ├── supabase.ts          # Supabase client
│   └── utils.ts             # Helper functions
├── 📁 public/               # Static assets
│   ├── Rapid_Logo_Primary.png
│   ├── favicon.ico
│   └── manifest.json
└── 📄 Configuration files

---

🎨 Design System

Color Palette

• Primary: #0056E0 - Rapid Blue
• Secondary: #6B7280 - Cool Gray
• Success: #10B981 - Emerald
• Warning: #F59E0B - Amber
• Error: #EF4444 - Red

Typography

• Primary Font: Geist Sans
• Monospace: Geist Mono
• Scale: Tailwind's default type scale

Components

• Built with Radix UI primitives
• Styled with Tailwind CSS
• Dark mode support throughout
• Accessibility features included

---

🚀 Deployment

Vercel (Recommended)

1. Connect your repository to Vercel
2. Set environment variables in Vercel dashboard
3. Deploy - Vercel will automatically build and deploy

Manual Deployment

1. Build the application

   npm run build

2. Start the production server

   npm start

Docker

FROM node:18-alpine AS deps
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production

FROM node:18-alpine AS builder
WORKDIR /app
COPY . .
COPY --from=deps /app/node_modules ./node_modules
RUN npm run build

FROM node:18-alpine AS runner
WORKDIR /app
COPY --from=builder /app/public ./public
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json

EXPOSE 3000
CMD ["npm", "start"]

---

📄 License

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

---

📞 Contact & Support

Built with ❤️ by Saba Siddique

🌐 Portfolio

---

Show your support

⭐ Star this repository if you find it helpful!

---

"The best way to learn is by building."