Inspiration

Every developer has felt the pressure of pushing new code live. The biggest fear is not "will it work?" but rather, "is it secure?" I was inspired by this universal developer anxiety to create API Guardian. My goal was to build a tool that could answer that question with a single click, providing immediate, actionable security insights without needing a complex setup or an expensive enterprise tool.

What it does

API Guardian is a full-stack security and performance scanner for any web API. In its current, working MVP form, a user can:

  1. Enter any public API endpoint.
  2. Instantly receive a performance report, including the response time.
  3. View a professional Security Report Card that grades the API on the presence of critical security headers like Content-Security-Policy and X-Frame-Options.
  4. Every scan is automatically and silently saved to a scalable Supabase database, proving the application's readiness for future features like historical tracking and user accounts.

It transforms vague security worries into a concrete, actionable checklist.

How I built it

This project is a true hybrid of modern development techniques. It was initiated with Bolt.new for the initial UI scaffolding and then built out with a powerful combination of React, Vite, and TypeScript on the front-end.

The real challenge came in building the backend. The initial AI-generated setup was too complex for the deployment environment, which forced me to re-architect the entire application manually. I built a robust, production-ready backend using Netlify Serverless Functions and connected it to a Supabase PostgreSQL database for data persistence, creating a complete, full-stack application.

Challenges I ran into

This project was a trial by fire. I battled through every classic web development demon imaginable:

  • The "CORS Hell": The initial dual-server setup was impossible to debug, forcing me to re-engineer the entire development server using a custom Vite plugin.
  • The "White Screen of Death": My first deployment was a complete failure. I had to learn about production builds, .gitignore files, and how to properly configure environment variables for secret keys on Netlify to bring the site back to life.
  • The "Silent Database Failure": After fixing everything, my data still wasn't saving. This led me down a rabbit hole of debugging that ended with the discovery of Supabase's Row Level Security, the final bouncer I had to get past to make the database connection work.

With my AI tokens long gone, I overcame these challenges by manually reading documentation, analyzing error logs, and writing the code myself.

Accomplishments that I'm proud of

I am most proud of my resilience. As a beginner, it would have been easy to give up after the first, second, or tenth critical error. Instead, I treated each bug as a lesson. I didn't just build an app; I learned how to debug a full-stack architecture, from the front-end framework, to the deployment pipeline, to the serverless backend, and finally to the cloud database security rules. I am proud that I finished what I started.

What I learned

My biggest takeaway is that AI is a phenomenal accelerator, but the developer is still the pilot. I learned that understanding the fundamentals—how servers talk to clients, how environments work, how databases secure themselves—is the most valuable skill. I learned more about real-world deployment and debugging in the last 48 hours than in months of tutorials.

What's next for API Guardian

With this solid, scalable foundation, the future is incredibly exciting. The immediate next steps are:

  • Full User Authentication with Supabase.
  • A Dashboard to view historical scan data and track security score over time.
  • Scheduled Scans and Email Alerts for downtime.
  • Team Workspaces for collaborative API monitoring.

Built With

Share this project:

Updates