DEV Community: Devansh Baghel

My Experience with the OSS.GG Hackathon: Diving into Open Source with Twenty, Unkey, and Formbricks

Devansh Baghel — Thu, 31 Oct 2024 11:27:36 +0000

When I first heard about the OSS.GG hackathon, I saw it as a perfect way to blend my love for open-source with the challenges of Hacktoberfest. Open-source events are always exciting, but OSS.GG felt especially unique. Not only was I working with awesome projects and learning new tools, but I was also part of a community rallying to build and improve open-source software together.

As I reflect on the past few weeks, I realize how much I’ve grown, both as a developer and as a contributor. Let me walk you through my journey at OSS.GG — from the thrill of fixing issues to the deep satisfaction of building templates and sharing knowledge.

Jumping In: Why OSS.GG Stood Out to Me

I’ve always been fascinated by open-source projects because they bring together a collective brainpower that’s just not possible anywhere else. There’s an unspoken thrill in finding issues, suggesting fixes, and knowing that someone out there will actually use your code to make their life easier. OSS.GG intrigued me from the start because it offered a structured way to contribute and provided specific side quests and challenges that added a sense of adventure to the process.

But more than that, OSS.GG allowed me to work with tools I had little prior experience with, like Unkey and Formbricks. Each project, whether big or small, felt like a piece of a much larger puzzle — and I couldn’t wait to start contributing.

The Journey Begins: My Contributions at OSS.GG

1. Fixing Bugs in the Twenty Repository

One of my first contributions was to Twenty, a repository with documentation and resources that were a bit tangled up. Some files in the twenty-side-quest directory contained leftover content from another project, which referenced a different Twitter account. It may seem like a small fix, but getting the documentation right is so important. Clean, accurate instructions are the backbone of a smooth developer experience.

The challenge: To make sure every single file referenced Twenty’s Twitter account accurately and was in sync with the project’s Notion documentation. It was a chance to focus on the less glamorous, yet super important part of open-source — maintaining clear and consistent documentation. This process showed me that even small contributions can have a ripple effect, especially when they enhance the readability and accuracy of a project.

2. Diving into Unkey’s Rate Limiting: My Favorite Side Quest

If there’s one skill that every developer should master, it’s understanding rate limiting. It’s the kind of problem that often flies under the radar until it doesn’t — and by then, it’s usually too late. OSS.GG offered me a challenge to integrate Unkey's rate limiting into different setups, and I was hooked.

Creating an Oak Server Template with Deno: I began with Deno, a runtime I hadn’t explored deeply before. Using Oak, I created a server that had two types of routes — one public, and another rate-limited. With Unkey, I set the rate limit to allow only two requests in a 30-second window on the /secret route, ensuring that users would get rate-limited if they exceeded the limit. It was a fun way to showcase Unkey's functionality and really brought to life the concept of throttling requests.

Hono Server with Cloudflare Workers: Next, I took the challenge up a notch by building a Hono server deployed on Cloudflare Workers. This time, setting up rate limiting for a distributed environment added an extra layer of complexity. Unkey handled the rate limiting flawlessly, and the experience opened my eyes to how rate limiting can be easily implemented in different environments.

Integrating Unkey’s Rate Limiter into CodeStash: This one was close to my heart. My project, CodeStash, features an AI-powered code explanation tool that users can activate with an "Explain this" button. Without proper rate limiting, this feature could easily become overloaded. By integrating Unkey’s rate limiter, I was able to control the load on this feature, making it a smoother experience for everyone. Writing a technical blog on the process helped me articulate the steps and solidify my understanding of API security.

These Unkey contributions were some of the most fulfilling parts of OSS.GG for me. They weren’t just technical tasks; they were opportunities to learn, experiment, and make tangible improvements to projects I care about.

3. Formbricks: Building for Feedback-Driven Development

Toward the end of the hackathon, I got the chance to work with Formbricks. CodeStash is all about sharing knowledge and empowering developers, so I wanted to understand how users felt about the AI explanations feature. Integrating Formbricks allowed me to gather this user feedback seamlessly, and it was eye-opening.

Writing a technical article about my Formbricks integration was both challenging and rewarding. I detailed the step-by-step process, from setting up Formbricks to embedding the surveys in CodeStash, and shared the insights I gained. This experience taught me the power of feedback-driven development and has inspired me to make it a core part of future projects.

What OSS.GG Taught Me

The Value of Small Fixes: Whether it’s fixing typos or adjusting references, small contributions matter. They’re often overlooked, but they’re the glue that holds projects together, making them accessible to more people.

The Importance of API Security: Rate limiting has become a core part of my development toolkit, thanks to Unkey. It’s not just about setting request limits; it’s about protecting resources and ensuring a reliable experience for everyone.

Feedback is Key: Formbricks reminded me how essential user feedback is. Even the best features need feedback loops to become truly great. This has reshaped my approach to development, pushing me to prioritize user experience and continuous improvement.

The Power of Community: Throughout OSS.GG, I was in touch with other contributors, exchanging ideas and troubleshooting together. It reminded me of the open-source ethos — we’re all here to make things better, and there’s immense value in sharing knowledge along the way.

Final Thoughts: Why You Should Dive into Open Source
OSS.GG was much more than a contest for me; it was an invitation to connect with the open-source community and give back. Every contribution, no matter how small, taught me something valuable. And in return, I felt a deep sense of belonging in a global community of passionate developers.

If you’ve been considering open-source contributions but haven’t taken the plunge yet, I can’t recommend it enough. Start with something small. The challenges may feel intimidating at first, but each success brings a huge sense of accomplishment. Whether it’s fixing a bug, creating templates, or writing documentation, every contribution counts — and the community will always be there to support you.

Looking Ahead

As OSS.GG wraps up, I’m already excited about future hackathons and contributions. This journey has strengthened my resolve to keep building and sharing, and I hope to inspire others to join the world of open-source as well. To all the maintainers, contributors, and organizers at OSS.GG — thank you for making this such an unforgettable experience.

Here’s to many more contributions, collaborations, and community-driven projects. Open source is for everyone, and I’m grateful to be part of it.

Surveying AI Satisfaction with Formbricks in CodeStash

Devansh Baghel — Tue, 29 Oct 2024 04:20:00 +0000

Introduction

So, I’ve been working on CodeStash, this platform for sharing and discussing code snippets, kind of a cross between Reddit and Stack Overflow. The cool part? There’s a built-in AI that explains code snippets, powered by Google Gemini. Whether it's some gnarly JavaScript or Python code, CodeStash lets users request an AI explanation on demand. But… AI explanations can be a bit hit-or-miss. Some users might find the response super helpful, while others? Not so much. That’s where Formbricks comes in.

In this post, I’ll show you how I added Formbricks to survey users after they get an AI answer, checking if they found it useful. If you’re curious about in-app feedback or just want to see how Formbricks can fit into your projects, stick around!

Why Bother with Surveys?

AI is impressive, but let’s face it—sometimes it misses the mark. By asking users directly if an explanation helped, I get honest, in-the-moment feedback that I can use to fine-tune CodeStash. And Formbricks makes it super simple to add these quick, no-fuss surveys directly into the app. Win-win.

Adding Formbricks into CodeStash (w/ Next.js)

Adding Formbricks was straightforward, and the setup took less than 10 minutes. So if you're thinking, "I don't have time to add all this survey stuff," trust me, it's quicker than you think. Here’s a breakdown:

Step 1: Create Formbricks Account

Follow the steps in this quickstart guide to get started with Formbricks.

Step 2: Install Formbricks

You’ll first need the Formbricks package. Run this command to install it, then follow the steps at :

npm install @formbricks/js zod

Now, create a app/formbricks.tsx file

"use client";

import { usePathname, useSearchParams } from "next/navigation";
import { useEffect } from "react";
import formbricks from "@formbricks/js";

export default function FormbricksProvider() {
  const pathname = usePathname();
  const searchParams = useSearchParams();

  useEffect(() => {
    formbricks.init({
      environmentId: "<environment-id>",
      apiHost: "<api-host>",
      userId: "<user-id>", //optional
    });
  }, []);

  useEffect(() => {
    formbricks?.registerRouteChange();
  }, [pathname, searchParams]);

  return null;
}

Now, update your app/layout.tsx file.

// other imports
import FormbricksProvider from "./formbricks";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <FormbricksProvider />
      <body>{children}</body>
    </html>
  );
}

Step 3: Embed the Survey

After an AI explanation is served, a survey pops up asking users how they liked it. Here’s how to embed the survey component right in the response.

In your Formbricks account, create a new survey and in the survey trigger under settings add a code trigger with the key "ai_answer".

Now we can use formbricks.track("ai_answer") method anywhere in our code to programmatically trigger a survey.

For example...

import formbricks from "@formbricks/js";
import axios from "axios";

await axios
  .get("/ai/explain")
  .then((res) => {
      formbricks.track("ai_answer");
});

Step 4: Customize the Survey Questions

In the Formbricks dashboard, tweak the survey to fit what you’re looking for. I went with questions like:

“Was this explanation helpful?” (Yes, No)
“How can we improve AI explanations?” (Optional)

I kept the survey short and simple so that users aren't too distracted by the survey.

The best part? You can set the survey to appear every so often, so you’re not spamming users every time they ask for an explanation.

Screenshots

Seeing the Feedback in Action

Once responses start rolling in, Formbricks gives you the data all nice and neat. Now I can see what’s working, what’s confusing, and what needs a tweak or two.

Wrapping It Up

Adding Formbricks to CodeStash made it easy to capture honest feedback without interrupting the user experience. So if you’re building with user feedback in mind, give Formbricks a try!

Thanks for reading, and if you’re into these tools as much as I am, don’t forget to star Formbricks’ GitHub repo ⭐—and if you like CodeStash, give that a star too!

References

Enhancing CodeStash with Unkey’s Ratelimiter

Devansh Baghel — Fri, 11 Oct 2024 20:49:53 +0000

Recently, I made a platform called CodeStash that allows developers to upload, store, and share code snippets. It combines the best of Reddit and Stack Overflow with features like voting, commenting, and AI-driven code explanations.

I am getting these AI generated code explanations from Google Gemini 1.5 flash that only allows me to make 15 requests per minute in the free tier (not a problem for my zero user app), but I still thought it would be pretty neat if I could implement a basic level of rate-limiting on that specific route.

In this blog post, I'll show you how to add rate-limiting to your express app using Unkey's ratelimiter.

Overview of the AI feature

User goes to the post that they want the AI explanation of (Bubble sort in Java snippet in this case) and clicks the "Explain this" button.

Then a request is made to the backend endpoint /api/v1/ai/explain and the controller that handles that request looks something like:

export const getAiAnswer = asyncHandler(async (req: UserRequest, res) => {
  const { postId } = req.query;

  if (!postId) return new ApiError(400, "Post id is required to get comments");

  const post = await Post.findById(postId);

  if (!post) throw new ApiError(404, "Post with this id does not exist");

  const apiKey = process.env.GEMINI_API_KEY!;
  const genAI = new GoogleGenerativeAI(apiKey);

  const model = genAI.getGenerativeModel({
    model: "gemini-1.5-flash",
  });

  const generationConfig = {
    temperature: 1,
    topP: 0.95,
    topK: 64,
    maxOutputTokens: 8192,
    responseMimeType: "text/plain",
  };

  const chatSession = model.startChat({
    generationConfig,
    // safetySettings: Adjust safety settings
    // See https://ai.google.dev/gemini-api/docs/safety-settings
    history: [],
  });

  const prompt = `I am providing you a code snippet, please explain me this code snippet, only give small and consice explanation, only give answers in valid markdown format, make sure to use markdown format extensively, if possible use indenting in the markdown in bullet points etc. The code snippet is: ${post.content}`;

  const result = await chatSession.sendMessage(prompt);
  const aiAnswer = result.response.text();

  return res
    .status(200)
    .json(new ApiResponse(200, { aiAnswer }, "AI answer sent successfully"));
});

And this endpoint then sends a response which we display to the user.

Integrating Unkey's ratelimiter

First we need to install @unkey/ratelimit package.

pnpm add @unkey/ratelimit

Then we need to set our root key.

UNKEY_ROOT_KEY="YOUR_KEY"

Then create a new file utils/ratelimit.ts.

import { Ratelimit } from "@unkey/ratelimit";

if (!process.env.UNKEY_ROOT_KEY) {
  throw new Error("UNKEY_ROOT_KEY is not set");
}

export const limiter = new Ratelimit({
  namespace: "codestash",
  limit: 10,
  duration: "60s",
  rootKey: process.env.UNKEY_ROOT_KEY,
});

Replace the namespace, limit and duration with whatever you want.

Now all we need to do is add these 3 lines into any endpoint that you want to be ratelimited.

const identifier = req.ip;

const ratelimit = await limiter.limit(identifier);
if (!ratelimit.success) throw new ApiError(429, "Too many requests");

So in my case I added it to /api/v1/ai/explain.

export const getAiAnswer = asyncHandler(async (req: UserRequest, res) => {
  const { postId } = req.query;
  const identifier = req.ip;

  const ratelimit = await limiter.limit(identifier);
  if (!ratelimit.success) throw new ApiError(429, "Too many requests");

  if (!postId) return new ApiError(400, "Post id is required to get comments");

  const post = await Post.findById(postId);

  if (!post) throw new ApiError(404, "Post with this id does not exist");

  const apiKey = process.env.GEMINI_API_KEY!;
  const genAI = new GoogleGenerativeAI(apiKey);

  const model = genAI.getGenerativeModel({
    model: "gemini-1.5-flash",
  });

  const generationConfig = {
    temperature: 1,
    topP: 0.95,
    topK: 64,
    maxOutputTokens: 8192,
    responseMimeType: "text/plain",
  };

  const chatSession = model.startChat({
    generationConfig,
    // safetySettings: Adjust safety settings
    // See https://ai.google.dev/gemini-api/docs/safety-settings
    history: [],
  });

  const prompt = `I am providing you a code snippet, please explain me this code snippet, only give small and consice explanation, only give answers in valid markdown format, make sure to use markdown format extensively, if possible use indenting in the markdown in bullet points etc. The code snippet is: ${post.content}`;

  const result = await chatSession.sendMessage(prompt);
  const aiAnswer = result.response.text();

  return res
    .status(200)
    .json(new ApiResponse(200, { aiAnswer }, "AI answer sent successfully"));
});

And done, That's it! We have successfully added rate-limiting to our express API.

Thanks for reading! I hope this post gave you insight into how you can leverage Unkey’s ratelimiter to enhance your own applications.

For more information on Unkey, visit their official website.

Also leave a star on CodeStash's github repo if you like the project.