From Business Student to Frontend Developer: Building My First Open-Source Project

Two years ago, I was a business student following the “safe” path. But something didn’t feel right — I wanted to build things, not just study them. So I took a leap, switched careers, and started teaching myself web development.

Fast forward to today, I’m excited to share my first open-source project on npm:

👉 filters-query-params
A lightweight TypeScript library for effortless URL state management in web apps.

---

🌱 My Journey in a Nutshell

• Quit my business career to pursue software development.
• Learned the fundamentals through tutorials, docs, and small projects.
• Got my first chance as an intern.
• Thanks to amazing mentorship from from my seniors, I learned not just coding but problem-solving.
• Earned a promotion and officially kickstarted my development career.

---

⚡ The Problem I Wanted to Solve

Managing URL query parameters for filters (think search filters, dashboards, e-commerce, etc.) can get messy:

• Syncing state with the URL
• Validating query parameters
• Debouncing to avoid unnecessary calls
• Keeping code clean and maintainable

I wanted a framework-agnostic, TypeScript-first solution that just works.

---

🛠️ Introducing filters-query-params

A simple but powerful library to handle URL filters in your applications.

Features:

• ✅ Sync filters with URL query parameters automatically
• ✅ Full TypeScript support
• ✅ Built-in Zod validation for runtime safety
• ✅ Framework agnostic (works with React, Next.js, or vanilla JS)
• ✅ Automatic debouncing & smart data handling
• ✅ Zero configuration for quick adoption

---

🚀 Installation & Usage

npm install filters-query-params zod

Example with React + Zod

import { useFilters } from "filters-query-params";
import { z } from "zod";

const schema = z.object({
  search: z.string().optional(),
  category: z.string().optional(),
});

export default function App() {
  const { filters, setFilter } = useFilters(schema);

  return (
    <div>
      <input
        value={filters.search || ""}
        onChange={(e) => setFilter("search", e.target.value)}
        placeholder="Search..."
      />
      <button onClick={() => setFilter("category", "books")}>
        Books
      </button>
    </div>
  );
}

That’s it — your filters now sync with the URL and validate automatically!

---

💡 Why This Project Matters to Me

This isn’t just about code.
Every function, every test, and every line represents my journey:
from a business student ➝ frontend developer ➝ open-source contributor.

It’s proof that with passion, persistence, and mentorship, you can reinvent yourself.

---

🙌 How You Can Help

If you find this useful, I’d love your support:

• ⭐ Star it on GitHub
• 🔄 Try it in your project
• 💬 Share feedback, issues, or suggestions

Together, let’s make filter state management simple for everyone.