feat [#8]: add live demo on landing

[prince0xdev]

Caution

Don't merge now

PR: Add Interactive Demo Page for Testing Library Methods

Overview

This Pull Request implements the interactive demo requested in Issue #8.
The goal of the issue was to provide developers with a way to test the library directly on the landing page or a dedicated demo page, allowing them to quickly verify states, capitals, LGAs, towns, and other data provided by the package.

This PR adds a complete, functional demo interface that covers all available methods of the library.

---

What This PR Adds

Full Demo Tester Component

A new interactive UI where developers can:

• List all states

• View state–capital pairs

• Select a state to view:

  • LGAs
  • Towns
  • Capital
  • Full state object

• Inspect the full getStatesData() output

The demo mirrors all library methods, making it easy for developers to validate the data in real time.

---

UI/UX Enhancements

To keep the demo clean and easy to use:

• Added responsive tabs
• Wrapped large outputs in scrollable containers
• Used Material UI for a clean and consistent interface
• Reduced excessive vertical scrolling
• Ensured a smooth experience on both desktop and mobile

---

Why This Feature Matters

This demo:

• Helps developers quickly confirm that the library fits their needs
• Improves the onboarding experience
• Makes the documentation more interactive
• Provides transparency about the dataset

This aligns directly with the goal of the issue:

“Implementing the library on the landing page or a demo page where developers can test the state, capital, or town directly on the page to verify the data.”

---

Files Added / Updated

• components/DemoTester.jsx
• App.jsx

[vercel]

Someone is attempting to deploy a commit to the Ayodele Aransiola's projects Team on Vercel.

A member of the Team first needs to authorize it.