StackTracer

10xDev needed to build an application to help keep track of all the services, APIs, third party integrations, and tech used across our projects. We decided to build a full-stack SaaS application called StackTracer.

How Does StackTracer Work?

StackTracer allows users to create and manage projects, add services and technologies, and generate tech stack diagrams using AI. Users can view their entire portfolio of projects in a clean, intuitive dashboard, and share stack information across a team.

Project Planning

The project was broken down into several phases. First, we had to decide which database and authentication provider to use. We decided to use Supabase because of its built in authentication and secure database capabilities with RLS. Supabase also integrates easily with Google OAuth and GitHub OAuth, which helped reduce friction during signups.

The next step was to decide which frontend framework to use. We decided to use Next.js because of its built in support for server-side rendering and static site generation, which helped improve SEO and performance. The application would rely heavily on database queries, so we leveraged TypeScript and Supabase's typed table schemas to help accelerate Next.js development. Since we were using Next.js, we also decided to use Vercel for hosting and deployment. Vercel allowed us to easily deploy preview builds of the application for testing before deploying to production, and we wanted to leverage their global CDN, static site generation, and serverless functions to help improve performance.

More Integrations

In order to collect user feedback, our Next.js backend integrated Resend as an email service to allow users to send feedback directly to our inbox. We also integrated OpenAI's API to allow users to generate tech stack diagrams using AI. Users were able to list the services and technologies used in a project, and the AI would generate a diagram based on the information provided. These diagrams were built using React Flow, a library that allows for easy drag and drop creation of diagrams.

To prevent misuse of the AI diagram generation, we implemented a Redis rate limiter through Upstash. This rate limiter monitored requests per IP address and blocked requests after a threshold was reached. Finally, the wrap up the integrations, we used Stripe as a payment processor to allow users to purchase a subscription to the application.

Emphasis on Security

Since users would be sharing sensitive information about their projects, we needed to ensure that their data was encrypted at rest. We implemented AES-256-CBC encryption on project details, and locked down the database with full row level security.

The Results

The application was built and launched in just under 2 months. 10xDev uses StackTracer to keep track of its projects, and the application gained around 25 new users in the first month.