Pub Apis

pub-apis is a Next.js starter template that builds a public API discovery and directory web app, pulling its data from the free publicapis.org API.

What is pub-apis?

pub-apis is an open-source Next.js application template designed to display and search public APIs. It consumes the publicapis.org dataset (maintained by davemachado) and renders an interactive directory interface. The project uses TypeScript for type safety, Chakra UI for styling, and runs on a standard Next.js development server.

Key Features

• Next.js framework — A React-based page router structure with a src/pages/index.js entry point that hot-reloads during development.
• Chakra UI styling — The interface is built with Chakra UI components, giving you an accessible React component library out of the box.
• TypeScript support — The template is configured for TypeScript, so you can write typed code from the start.
• SWR data fetching — Uses SWR to fetch and cache API data from publicapis.org, enabling fast client-side updates.
• Formik forms — Formik is included for building forms, such as search or filter inputs, with validation.
• PWA readiness — The repository metadata lists PWA as a topic, indicating the template is set up to become a progressive web app.
• Quality monitoring — SonarCloud badges track bugs, code smells, coverage, duplicated lines, and security ratings directly in the README.

Who is it for?

• Frontend developers learning Next.js: they can study a real project that wires Chakra UI, TypeScript, and SWR together.
• Indie hackers who need a quick API directory: they can clone the repo, run pnpm dev, and adapt the page to their own API listing.
• Developers who want a PWA starter: the PWA topic suggests they can turn the template into an installable app.

Use cases

• API enthusiasts: build a browsable directory of public APIs categorized by the data from publicapis.org.
• Portfolio projects: replace the default data source with a custom API to showcase a clean Chakra UI interface.
• Hackathon starters: use the preconfigured tooling to scaffold a functional frontend in minutes.

How does pub-apis work?

To get started, install dependencies with pnpm, then run pnpm dev. Open http://localhost:3000 to see the result; edits to src/pages/index.js will auto-update the page in development.

FAQ

Is pub-apis free?

Yes, the repository is open source and the underlying publicapis.org API is free to use for public API data.

What tech stack does pub-apis use?

It uses Next.js with TypeScript, styled with Chakra UI, and integrates SWR for data fetching and Formik for forms.

How do I customize the template?

Edit src/pages/index.js to change the main page; the development server hot-reloads changes. You can also adjust the styling through Chakra UI theme files.