🚀 APIHub

✨ About

• A Hub of APIs where users can display their APIs and share it with others to use it and create a nice website on top of their APIs.
• A Playground is created for users to test an api by passing headers, body , and query paramters along with the api url.
• Project also contains a Background Remover application to remove background of an image(uses remove.bg api).
• Background Remover application is presented as an example for other users to create an web app by taking inspiration from apis present on the explore page.

Live Website - APIHub

YouTube Video - YT

✨ Tech Stack:

Frontend: React, Sass, React Router

Backend: Nodejs, Express, MongoDB

Deployment & Testing: Vercel, Heroku, Postman

✨ Snapshots 💫💫

Explore Page(Home Page)

API Playground

Background Remover WebApp

LogIn

SignUp

Add an API

All User APIs

Edit or Delete User APIs

✨ Folder Structure

backend
    src
        middlewares -> contains the middleware functions
        models -> contains the models/schemas
        routes -> contains the apis
        startup -> contains startup files
        utils -> contains utility functions

frontend
    src
        assets -> contains logos, images, etc.
        components -> react components
        pages -> contains the web pages
        utils -> utility functions

✨ Usage

Prerequisites

• Git
• Node & npm
• MongoDB

Clone the repository

$ git clone https://github.com/jainaayush01/apihub/ 

Client Side (PORT: 3000)

1. Run following commands:

   $ cd frontend
   $ npm install
   

2. Copy & rename .env.example to .env

3. Add following environment variables:

   SKIP_PREFLIGHT_CHECK=true
   REACT_APP_BACKEND_URL=http://localhost:8001
   

4. start and you are ready to go

   $ npm run start
   

Server Side (PORT: 8001)

1. Open another terminal and run following commands:

   $ cd backend
   $ npm install
   

2. Copy & rename .env.example to .env

3. Add following environment variables:

   MONGODB_URI=
   PORT=
   JWT_SECRET= // random string
   BGREMOVER_API_KEY= // go to remover.bg and get your api key
   

4. start and you are ready to go

   $ npm run dev
   ``
   
   

Creator/Author

Aayush Jain