API HUB 🔗

The API portal
Explore the docs »
• Report Bug • Request Feature •

🛡️ Features

The key features of API Hub W include:

• Rate Limited API routes ⏳
• Protection of sensitive routes 🔒
• Google Authentication 🔑
• A complete API key system to create & revoke user keys 🔑

Additionally, the application boasts a visually appealing UI, thanks to the use of Radix UI Primitives, Tailwind CSS, fonts from next/font, and icons from Lucide. The dark mode, powered by next-themes, enhances the user experience further.

💡 Inspiration

The inspiration behind this project, API Hub, came from the need for a centralized interface that allows users to obtain API keys easily and perform various tasks with different input formats. We wanted to create a platform that provides historical data tracking, triggers, and API invocation counts, empowering users to generate unique results and gain valuable context for their API usage.

📌 About the Product

API Hub is a feature-rich web application built using Next.js, TypeScript, Prisma, and Planetscale. It serves as a centralized portal for managing API keys and provides several essential functionalities to enhance the API usage experience.

🤔 What it does do?

API Hub offers the following key features:

• Rate Limited API routes to control the number of requests made to the API.
• Protection of sensitive routes to secure critical endpoints from unauthorized access.
• Google Authentication for users to log in securely using their Google accounts.
• Typescript for type safety and enhanced code maintainability.
• A complete API key system to create and revoke user keys for accessing different APIs.

The project also leverages Radix UI Primitives, Tailwind CSS, fonts from next/font, and icons from Lucide to ensure a visually appealing and user-friendly interface. It offers a beautiful dark mode powered by next-themes for added convenience.

Additionally, various tailwindcss plugins like tailwind-merge, tailwindcss-animate, clsx for conditional classes, and class-variance-authority for handling variants are utilized to streamline the UI development process.

⚒️ How we built it?

Frontend

The front end of API Hub is developed using Next.js, a powerful React framework known for its server-side rendering capabilities and excellent developer experience. TypeScript is employed to catch type-related errors early and improve code maintainability.

Backend

For the backend, we utilized Prisma, an efficient and type-safe ORM (Object-Relational Mapping) tool. Prisma simplifies database interactions and ensures data consistency and security.

Security

Security is a top priority for API Hub. We have implemented rate limiting on API routes to prevent abuse and protect the server from excessive requests. Sensitive routes are safeguarded to ensure that only authorized users can access critical endpoints. Google Authentication is implemented to provide a secure and seamless login experience.

📚 What we learned

Throughout the development of API Hub, our team gained valuable insights into building complex web applications. We deepened our understanding of Next.js, TypeScript, Prisma, and Planetscale while integrating various UI libraries and tailwindcss plugins to create an aesthetically pleasing and functional interface.

Revenue Streams 💰

The project provides opportunities for potential revenue streams, such as offering premium features or subscription plans for advanced API usage or enhanced support.

Getting Started

To get a local copy up and running follow these simple steps.

Prerequisites

In order to get a copy of the project you will require you to have Node.js (v14+) and the NPM package manager installed. If you don't have it, you can download the latest version of Node.js from the official website which also installs the NPM package manager by default.

📥 Clone the repository:

1. Open the terminal in the folder in which you wish to clone the repository and enter the following command:

git clone https://github.com/pranjal6314/text-number-api.git
cd text-number-api

2. 📦 Install dependencies:

npm i

3. ⚙️In order to run :

npm run dev

4. 🌐 Open your browser and go to http://localhost:3000 to access LearnUP.

Get Involved 👥

We welcome contributions from developers and designers Here's how you can get involved:

1. 👩‍💻 Developers: If you're a developer, you can contribute to the growth and enhancement of API Hub W. Whether it's fixing bugs, adding new features, or optimizing performance, your skills are valuable to us. Check out our Contributor's Guide for details.
2. 🎨 Designers: You can help improve the visual aspects of the website, ensuring it is intuitive and visually appealing.

Feedback 💬

Your feedback is valuable to us! If you encounter any issues or have suggestions for improvement, please submit an issue.

Acknowledgements

• Awesome UI Components

License

MIT