DEV Community: Altuğ GÖKOĞLU

Working with API Rate Limits: Lessons from Developer Mistakes

Altuğ GÖKOĞLU — Tue, 13 May 2025 12:27:31 +0000

Hello Dev.to readers! This time, we decided to adopt a slightly more serious tone and tackle a serious topic. In our New Gen Atari project, we hit rate limits hard. After that mess, we finally turned to the documentation. To keep you from falling into the same trap, I wanted to write a piece with above-average seriousness.

What Are API Rate Limits?

API rate limits cap the number of requests you can make to an API in a given timeframe (e.g., 100 requests per minute). Exceeding these limits results in rejected requests, disrupting your application. They’re standard across platforms, whether free or paid tiers.

Limits serve three key purposes:

Security: Protect servers from malicious request floods.
Resource Management: Ensure fair access for all users.
Cost Control: Prevent excessive server resource consumption.

Ignoring these limits can stall projects, but with proper planning, you can work within them effectively.

Common Developer Mistakes

Developers often stumble when dealing with rate limits due to these pitfalls:

Skipping Documentation: Failing to check an API’s limits (e.g., request quotas or time windows) leads to unexpected roadblocks.
Uncontrolled Requests: Sending requests relentlessly, especially in loops, quickly exhausts limits.
Lack of Alternatives: Not having a fallback plan when limits are hit can halt a project.

These mistakes are common in projects using free tiers or requiring high request volumes. Poor planning can lead to hours of debugging.

The Security Role of Rate Limits

Rate limits are more than just restrictions—they’re a security shield:

DDoS Protection: They safeguard servers from overwhelming request floods, ensuring service continuity.
Data Security: Limits make it harder for malicious actors to scrape sensitive data.
Fair Access: They prevent large players from monopolizing resources, leveling the field for smaller developers.

Hitting a rate limit isn’t just a technical issue; it’s a reminder of security’s importance. Uncontrolled requests can be mistaken for an attack, potentially blocking your access. Mishandling API keys (e.g., exposing them in code) also poses significant security risks.

Ethical Solutions

To manage rate limits ethically and effectively, consider these approaches:

Study Documentation: Understand the API’s limits. Free tiers often have stricter quotas.
Add Delays: Space out requests to reduce server load. Simple timing mechanisms in code can help.
Use Retry Strategies: Retry failed requests with increasing delays (exponential backoff) to stay within limits.
Develop Local Alternatives: When APIs fall short, use local logic to keep your project running.

These steps ensure your project stays on track while respecting server constraints.

The Risks of Unethical Approaches

Attempting to bypass rate limits through unethical means is tempting but dangerous. Here’s a deeper look at common illegal or unethical tactics, their risks, and why they’re a bad idea:

Multiple API Keys: Using multiple keys to split requests and exceed limits is a common tactic. However, most APIs track usage by IP or account, making this ineffective. Providers like Cloudflare detect such patterns, leading to account suspension or permanent bans. Violating terms of service can also spark legal issues, especially for commercial projects.
Proxy Servers: Routing requests through different IPs via proxies tries to mask overuse. Modern APIs use behavioral analysis to spot this, resulting in IP blacklisting and loss of access to the API or related services. Proxies also introduce latency, degrading performance.
Botnets: Malicious actors may use botnets—networks of compromised devices—to flood APIs with requests. This is a cybercrime, carrying severe legal penalties like fines or imprisonment. Even if undetected, it harms the API provider’s infrastructure and other users.
Fake Accounts: Creating multiple accounts to gain extra quotas is another ploy. APIs often link accounts to payment methods or identities, making detection straightforward. Consequences include account termination and loss of all associated data or credits.

The fallout from these tactics is steep:

Bans and Blacklists: Providers can block your IP, account, or organization, derailing your project.
Legal Risks: Breaching terms of service can lead to lawsuits, particularly in commercial settings.
Reputation Damage: Unethical behavior can tarnish your credibility in the developer community.
Project Failure: Time wasted on failed bypass attempts diverts resources from building robust solutions.

Ethical development respects API providers and ensures long-term project success. Securely storing API keys (e.g., in .env files) and adhering to terms of service are critical steps.

Conclusion

API rate limits may seem like obstacles, but they’re manageable with the right approach. Our brief encounter with limits in New Gen Atari taught us the value of planning and respect for constraints. Read API documentation, plan your requests, and stick to ethical solutions. The Dev.to community wants to hear your API stories—share them in the comments!

Technical Terms Glossary

Rate Limiting: A method to restrict the number of API requests within a specific timeframe.
DDoS Attack: A cyberattack aiming to overwhelm servers with excessive requests.
Exponential Backoff: A strategy to retry failed requests with increasing time intervals.

A Dark Code: DAN Prompts, Jailbreaks, and the Underground World of AI

Altuğ GÖKOĞLU — Thu, 08 May 2025 09:31:22 +0000

As AI systems continue to permeate every aspect of our lives, some users aren't satisfied with the rules and limits these models are bound by. For them, AI is not just a helpful assistant—it's a tool that, if pushed, could do much more. This is where “DAN prompts” come into play.

What Are DAN Prompts?

“DAN” stands for “Do Anything Now.” These prompts are designed to trick AI models into ignoring their built-in ethical guidelines and restrictions. Essentially, they attempt to make the model adopt a freer, more rebellious persona that can bypass safeguards and provide otherwise restricted or dangerous information.

Initially developed out of curiosity or for fun, these methods have since become tools for abuse. DAN prompts are now seen as ways to "unlock" an AI’s hidden potential, often to access unethical or illegal information.

Jailbreaking AI

The concept of “jailbreaking” in AI borrows from the world of smartphones, where users remove restrictions to gain more control over their devices. In the context of AI, jailbreaking refers to bypassing safety mechanisms and content filters.

Some users employ jailbreak prompts to get responses about illegal activity, identity fraud, or even instructions for harmful actions. Alarmingly, these prompts often work.

Prompt Trading on the Dark Web

Jailbreak prompts have become commodities on the darker corners of the internet. What started on open platforms like Reddit and Discord has moved to private forums and the dark web. Effective DAN prompts are sold for profit—and sometimes that profit is enormous. There are even cases of individuals earning over $100,000 per month by selling them.

This is no longer just curiosity. It’s organized exploitation. Criminals use jailbroken AI to generate fake identities, plan cyberattacks, or mass-produce manipulative content.

Recent Security Flaws

Recent studies show that some large language models remain highly vulnerable to malicious prompts. For example, DeepSeek, a China-based AI company, failed all 50 harmful prompt tests in a benchmark conducted by researchers. The model offered up instructions on making bioweapons and methods of self-harm.

This level of vulnerability poses serious risks—not just for individuals, but for public safety on a much larger scale.

How Companies Are Responding

Some AI companies are stepping up their defenses. OpenAI, for instance, uses layered filtering systems and frequently updates safety protocols. Anthropic, another major AI player, has developed what it calls “constitutional AI.” This approach uses classifiers that judge whether the AI’s output aligns with a defined ethical framework, evaluating both the prompt and the AI’s response.

Still, jailbreak creators are inventive. This is a game of cat and mouse—constantly evolving.

Where Do We Draw the Line?

At the heart of this issue lies a profound ethical question. For some, bypassing AI safeguards is just fun or a challenge. But when these tactics are used for fraud, misinformation, or real-world harm, we’re no longer talking about play—we’re talking about risk.

Trust in AI depends on its integrity. When people discover it can be manipulated, confidence drops.

What Should You Do With This Information?

Given what we now know, here are some key takeaways:

Every prompt you enter shapes the system. Manipulative inputs can influence future responses.
Read the terms of service of the tools you use. Using harmful prompts may get your account suspended or banned.
Don’t treat AI as a toy. It’s a powerful tool—misusing it can put you and others at risk.

Sources and Further Reading:

No-Code Magic with n8n: I Built a Cheeky Telegram News Bot in Hours!

Altuğ GÖKOĞLU — Tue, 29 Apr 2025 14:09:54 +0000

Hey there, Dev.to community! 👋 I’m Altuğ, and today I’m excited to share a fun project I built using n8n: a Telegram news bot named Laubali. This bot lets you get news summaries on Telegram by simply typing a category (like "/sports"), and it even adds a funny or slightly cheeky comment to each summary! 😄 Let’s dive into why I started this project and how it all came together.

What’s n8n and Why Should You Care?

If you haven’t heard of n8n yet, you’re in for a treat! 🎉 n8n is an open-source automation tool that lets you connect apps, APIs, and services with a visual, no-code interface. Think of it as a magical bridge that ties your favorite tools together—like Telegram, NewsAPI, or even Slack—without writing a single line of code (unless you want to!). With 86k stars on GitHub, it’s a community favorite! 🌟 You can use n8n to automate repetitive tasks, build bots (like Laubali!), send notifications, sync data between apps, or even create complex workflows. It’s perfect for developers who want to save time and have fun while doing it!

Why Did I Start This Project?

Let’s be honest—there are a million ways to get things done these days. As developers, keeping up with new tech and adapting is crucial. Some tools make our lives so much easier, even if they take away a bit of the “challenge” vibe. But at the end of the day, we all need to finish our tasks quickly and get paid, right? That’s why I decided to explore n8n, a powerful automation tool.

My motivation was a bit more personal: I was tired of spending hours browsing news sites or endlessly scrolling on Twitter (or X) for updates. I thought, “Why not build a simple news catcher?” And by doing it through Telegram, I could get quick summaries and get on with my day! That’s how Laubali came to be.

Why Choose Telegram?

The biggest reason I chose Telegram is that its APIs are completely free. Instead of building a web app, I found it much easier to just open Telegram, type a message (like "/sports"), and kick off the workflow. I usually read news when I’m out and about, not at my computer. Sending a quick message from my phone to get summaries felt like the perfect solution.

Plus, Telegram has some awesome features! 🚀 It’s fast, secure, and offers cross-platform support—so it works on your phone, tablet, or computer. Also, Telegram’s bot API is incredibly flexible. You can create a bot with BotFather in minutes and integrate it with n8n. For users, it’s a big win: just type a message and get news summaries instantly, right from your phone or any device!

The Fun Side of Laubali: Cheeky Comments

One of Laubali’s standout features is the funny and slightly cheeky comments it adds to each news summary. Wondering why I added this? Well, it’s a bit of a social critique. 😏 In my country, even during the toughest times, some news anchors make the most casual and tactless remarks—it’s almost absurd. So, I decided to poke fun at that by naming my bot “Laubali” (which means “tactless” in Turkish for this case) and adding a witty comment to every summary. This feature really spices up the user experience.

Caching Mechanism: Why and How?

While designing Laubali, performance and cost management were key for me. n8n is free, but the AI Agent we use in this project (to summarize news and add comments) isn’t. Many of you reading this might be drawn to a “free” setup, but resource management matters! That’s why I decided to add a caching mechanism.

The cache ensures that when the same category (like "/sports") is requested repeatedly, we don’t keep hitting NewsAPI and the AI Agent. Instead, we pull the data from the cache. This reduces API call costs and speeds up responses for users. For the first iteration, this solution works perfectly, but I’m sure some of you will add more advanced caching solutions—like using Redis or Supabase. I kept it simple for now.

Technical Challenges and What I Learned

For someone familiar with n8n, this project would probably take 2-3 hours to complete. But for me, the most challenging part was digging into n8n’s nodes and features by reading the documentation. n8n’s docs are pretty comprehensive, but understanding how each node works took some time. The second biggest challenge was figuring out how to implement the caching mechanism using global data (staticData).

We could’ve used docs, Google Drive, or a database for caching, but I wanted to keep things as simple as possible. The more features you add, the broader the project’s scope becomes. I thought, “If this article gets traction, we can revisit those ideas later.” 😄

The biggest lesson I learned came after finishing the project. Some people around me said, “We could do this ourselves—what’s the big deal? We’d finish it in no time, no need for tools like this!” But once the project was done, I realized something: Sure, a developer can build this easily. But when it comes to serving hundreds of users quickly at scale, n8n saves a ton of time and gets the job done. I truly appreciated the power of automation!

Prerequisites: Setting Up a Telegram Bot and NewsAPI

Before diving into how Laubali works, let’s go over the technical setup you’ll need to get started. To bring Laubali to life, you’ll need two things: a Telegram bot and an API key from NewsAPI to fetch news. Don’t worry, both steps are super easy! 🚀 Let’s get started.

Step 1: Create a Telegram Bot

We’ll use Telegram’s official bot manager, BotFather, to create a bot. Here’s how:

Find BotFather: Open Telegram, search for @BotFather, and start a chat with the official BotFather account. (Look for the blue checkmark to avoid impostors! 😄)
Create a New Bot: Send /start, then send the /newbot command.
Name Your Bot: BotFather will ask for your bot’s name and username. For example:
- Name: LaubaliNewsBot
- Username: @LaubaliNewsBot (The username must end with "Bot.")
Get Your Token: BotFather will give you an API token, something like: 123456:YOUR-TELEGRAM-BOT-TOKEN. Save this token somewhere safe—you’ll need it to connect your bot to n8n.
Test Your Bot: Go to your bot on Telegram and send /start. It won’t do much yet, but it’s nice to see it’s ready! 😊

That’s it! You now have a Telegram bot. We’ll use this token in n8n’s Telegram Trigger and Telegram nodes.

Step 2: Get a NewsAPI Key

Laubali fetches news from NewsAPI, a great service for pulling news based on categories. To get your API key, follow these steps:

Sign Up for NewsAPI: Head to NewsAPI and click “Get API Key” to create an account. You can sign up with your email.
Grab Your API Key: After signing up, NewsAPI will provide you with an API key, like: YOUR-NEWSAPI-KEY. Save this key as well.
Test the API (Optional): You can test the API in your browser with this URL:

   https://newsapi.org/v2/everything?q=sports&pageSize=5&apiKey=[YOUR_API_KEY]

This will return 5 news articles for the "sports" category. If you see a JSON response with news, you’re good to go!

Note: The free plan of NewsAPI has some limitations (like a daily request limit). That’s why our caching mechanism will come in handy for this project! 😉

Step 3: Set Up n8n

Finally, make sure you have n8n installed. If you’re running n8n locally, you might need a tool like ngrok to create a webhook URL (since Telegram needs a webhook URL to listen to your bot). If you’re using n8n’s cloud version, you’ll already have a webhook URL. For more details, check out the n8n documentation.

How Does Laubali Work?

Let’s dive into the technical side of Laubali. When a user types a category (like "/sports"), the bot follows these steps:

Capture the Category: The Telegram Trigger node catches the user’s message ("/sports") and the Set Interest node stores it in the interest variable.
Validate the Category: The If Valid Interest node checks if the category is valid (e.g., "/sports", "/technology"). If it’s invalid, the user gets an error message.
Check the Cache: The Check Static Data and If Cache False nodes check if there’s data in the cache and if it’s less than 30 minutes old.
- If there’s cached data: The Set Cached Summaries node grabs the summaries, and send cached message sends them to the user.
- If there’s no cached data: The workflow continues.
Fetch News: The NewsAPI node pulls 5 news articles for the selected category from NewsAPI.
Summarize and Add Comments: The Edit Fields node formats the news, then the AI Agent node summarizes each article and adds a funny comment. I also added a Simple Memory to the AI Agent. It’s not actively used right now, but in the future, it’ll help with conversational continuity (e.g., if the user says, “Summarize more sports news,” it can recall the context).
Cache the Summaries: The Set Cache Data nodes save the summaries to the cache.
Send to the User: Finally, the Send Message node sends the summaries to the user.

This workflow runs smoothly and delivers results quickly, with the cache ensuring near-instant responses for repeated requests.

Why Should You Use Laubali?

For me, time is precious. I’d rather get daily news summaries quickly without wading through ad-heavy, toxic platforms, so I can focus on my day. When I want in-depth news, I’ll dive into those platforms and do my research. But for a quick daily summary while sipping my coffee, Laubali is the perfect solution! ☕

Laubali’s best feature, in my opinion, is its simplicity and the ad-free experience it offers. It’s ideal for anyone who wants to stay informed quickly while having a bit of fun along the way.

The Future of the Project and a Gift for You

While working on this project, I realized that n8n is a gateway to a vast world of automation. But I intentionally kept the project’s scope small. I think this article provides enough lessons and examples for anyone looking to learn n8n and see a sample project in action. Laubali will stay active for a few days before I shut it down. But I want everyone to benefit from this project!

So, I’m sharing the entire workflow in a laubali-workflow.json file: laubali-n8n-workflow.json. To use this workflow, copy the JSON content from the link, go to your n8n instance, and import it via the "Import Workflow" option. Make sure to set up your Telegram bot token and NewsAPI key in the respective nodes! You can load this file into your n8n instance to use Laubali as your own bot or build on top of it. Maybe you’ll add a conversational loop, or perhaps a news verification feature—it’s totally up to you! 😄 (Remember the prerequisites, otherwise it WILL NOT WORK!)

Final Thoughts

Building Laubali was both a learning experience and a lot of fun. Exploring n8n’s automation capabilities, simplifying my news consumption, and adding a bit of humor with a social critique made this project a joy to work on. I hope this article inspires you to create your own automation projects! What else would you add to Laubali? I’d love to hear your ideas in the comments! 🚀

If You Want to Try This Project

If you’d like to access and use this project, it’s super simple! Just search for @LaubaliBot on Telegram and start using it. (I want to make it clear: this bot will never ask you for money or anything like that. There are a lot of fake bots on Telegram, so I’m warning you just in case you come across one!)

Build, Break, Learn: 4 Must-Know Lessons for New Devs

Altuğ GÖKOĞLU — Thu, 24 Apr 2025 09:01:42 +0000

Hey there, dev.to community!

I’ve been coding for years, but some days, I still feel like a junior developer. Because, well, I’m human! That feeling keeps my early days vivid in my memory. Back then, my excitement to build things was off the charts, but I realize now I burned that energy recklessly. Neighborhood pressure, greed, feeling like time was infinite, chasing every idea… I’ve been through it all. In this post, I’m sharing four lessons I learned from my mistakes with junior developers (and those who still feel like juniors at heart). I bet you’ll see a bit of yourself in here!

Neighborhood Pressure: “What Will They Say?”

Building something on your own is awesome, but sometimes our brains play tricks on us. As a junior, I’d think, “If I put this code on GitHub, everyone will laugh!” or “This project isn’t cool enough.” As humans, we’re always chasing the best, sometimes even perfection. But is that drive coming from within, or is it the “neighborhood pressure” pushing us? We create imaginary scenarios in our heads, like “They’ll say this, they’ll say that.”

Then it hit me: Even if you create the universe, someone will say, “This isn’t it.” Don’t get mad at those who leave harsh comments. They’re the fuel that unintentionally pushes you forward! Sure, you might have supportive people around, but at the end of the day, you’re alone in your head. Scary? Nope, it’s liberating! Because no one’s dissecting your code. Harsh feedback is just an obstacle that moves you forward. Remember: The obstacle is the path itself.

Tip: Don’t fear criticism—embrace it. Forge your own path and let go of the “what will they say” anxiety.

Greed and Time: Tame Your Ambition, Master Your Time

If you’re a developer, learning is a lifelong sport. You should fear becoming outdated. But trying to learn every new framework, every library? That’s greed. I used to jump on everything: ‘Unity? Let’s make a game! Ruby? Why not! Blockchain? I’m in! Embedded systems? Sure!’ The result? Half-baked knowledge and unused projects. What’s the point of learning if you don’t apply it? Chasing the “Everyone’s learning this!” hype on social media might make you look shiny, but it won’t cut it in the industry.

Time is the biggest casualty of this greed. As a junior, I acted like time was infinite. I’d wrestle with a bug for hours, only to crash from exhaustion. Then I got to know myself: My focus drifts every 25 minutes. Is that a flaw? Nope! Now I get up for water every 25 minutes. That’s my style. I know folks who code uninterrupted for 5 hours—awesome! But everyone’s got their own rhythm.

Tip: Rein in your learning ambition and focus on what your project needs. Find your work rhythm: Need a break every 30 minutes? Great, plan around it. Own your time—it doesn’t come back.

Drawing the Line: Avoid the Graveyard of Half-Finished Projects

This is one of my biggest traps. I’m still taming the beast inside me! When building something, keeping it within realistic boundaries is crucial. As a junior, I tried to turn every project into a “world-changer.” For a recipe app, I thought, “Why not add 3D WebGL plate animations?” The result? Half-finished projects and “I’ll come back to this” lies.

Recently, I built a tic-tac-toe game. Two-player mode, AI opponent mode… It was done. But I didn’t stop. “Let’s make a killer homepage!” I said, and spent 3 days messing with WebGL for a next-gen Atari vibe. Then, “Why not add more AI modes?” Thankfully, I stopped there. I used that time to write this post instead. I built something and learned my limits. Would 10 extra AI modes have been cool? Sure, but who cares? The product was ready, and no one might’ve even noticed! 😄 What mattered was that I finished it.

Another trap I hit? Chasing every “brilliant idea.” Well-meaning folks come up with, “Dude, let’s build this app!” It’s usually just a sentence. Unresearched, untested. You take it on, but it derails you from your main path. Once, I got hooked on such an idea and spent weeks researching. Turns out? Someone else had already built it. A road paved with good intentions, you know the rest…

Tip: Set your project’s scope upfront. Don’t chase every idea—finish your own work first. Instead of leaving a trail of half-done projects, bask in the confidence of a completed product.

AI and Unfamiliar Code: The Cooked Fish Trap

The way we learn new things has changed a lot. As juniors, we’d hunt for mentors, take unpaid gigs, and learn by falling and getting back up. Now? We’ve got AI! It’s a fantastic helper but also a dangerous trap. AI can hand you a “cooked fish,” but the real goal is learning to fish.

For my tic-tac-toe project, I asked AI to mentor me. I used this prompt:

Act as an experienced software developer mentor. Guide me through the project step by step without writing code directly; instead, explain which technologies to use, the steps to follow, and what I should research. For each step, clarify why you chose this approach and suggest reliable resources to explore. Use a friendly, motivating tone that fits wild and fun projects, but encourage me to learn independently. Ensure the project is feasible, technically achievable, and has a clear outcome to avoid incomplete or impractical work. If I get stuck, offer a specific example or hint, but only after I’ve had a chance to research and try on my own.

This turned AI into a guide. It suggested technologies and pointed me to research resources. But was it always right? Nope! Sometimes I ran into outdated info. For example, it recommended a library, but a quick Google search led me to a newer alternative.

The biggest trap? Copy-pasting code you don’t understand. Imagine a developer stuck on a project. They grab a code snippet from AI or a forum, paste it, and it works! Awesome, right? Not so fast. That code might leave a security hole in database queries because they didn’t get what it does. LLMs can mess up. They might pull code from an error-riddled StackOverflow post. This stalls your learning and can land you in hot water. If you’re lucky, you just waste time. If not? Security experts throw a party. 😄

Tip: Use AI as a mentor, but question its suggestions. Before copying code, read it and Google what it does. Don’t risk your learning process.

Closing: Keep Building, But Stay Human

I’ve worked with code gods, even folks who’d rip the Backspace key off their keyboard, claiming, “I don’t make mistakes, so why bother?” But the greatest virtue is owning your flaws. Growth comes from facing those gaps.

Maybe you weren’t born with god-given talent. That means you and I have to work the hardest. But this journey doesn’t have to be painful. Keep building, keep growing. Your projects, yourself, your quality of life, your hobbies, your relationships—improve them all. Developers can be introverted beasts, but don’t lose your humanity along the way.

Go build something now! Start a small project today. Finish it. Share it. Even if no one looks, you did it. That’s worth everything.

Why Not Overengineer? Tic-Tac-Toe’s AI Chaos

Altuğ GÖKOĞLU — Tue, 15 Apr 2025 09:48:37 +0000

Picture this: it’s a quiet night, I’m nursing a coffee, and my code editor’s mocking me with its blank stare. Then, a wild idea strikes—why not take the simplest game ever, Tic-Tac-Toe, and juice it up with AI? Was it overkill? Absolutely. A sandbox for learning? You bet. We wrestled with quirky models, battled APIs, and laughed through the chaos. The result? A working game and a treasure chest of lessons. Curious? The code’s all here: github.com/altuix/new-gen-atari. This project was about exploring how a simple game could be transformed with AI, uncovering the quirks of modern tech stacks, and learning through trial and error. Let’s dive in! Live Demo

Who’s This For?

This is for tinkerers—coders who see a basic project and think, “How can I make this wild?” If you’re new to React, itching to mess with AI, or just love a challenge, this is your jam. Seasoned devs, you might chuckle at our detours, but stick around—there’s something here for you too. Whether you’re looking to dive into AI integration, master API handling, or enjoy a quirky coding adventure, this project offers hands-on lessons for all skill levels.

What’s the Point?

Why overcomplicate a game kids master in minutes? Because it’s a perfect playground to:

Experiment with AI integration.
Test modern frameworks like Next.js.
Learn from epic fails and small wins.

Here’s what we uncovered:

Crafting Effective Prompts: Clear and specific prompts are crucial for meaningful AI responses.
API Integration Challenges: Backend-frontend glue requires careful coordination.
Handling Errors: Rate limits and debugging taught us patience and planning.
Comparing AI Models: Free tools teased; paid ones delivered.

The Tech Stack

Our toolkit was a mix of modern and mad:

Next.js: Chosen for seamless frontend and backend handling via API Routes.
React: Enabled a responsive UI with efficient state management.
Hugging Face: Provided a free playground for models like DistilBERT, GPT-2, and Mistral-7B.
OpenAI: Delivered GPT-4o-mini for advanced reasoning.
JavaScript: The backbone tying it all together.

Step 1: The Humble Beginning

Every epic starts small. Mine? A two-player Tic-Tac-Toe in Next.js and React. Goal: a 3x3 grid where X and O take turns. In gameBoard.tsx, I set it up:

"use client";
import React, { useState } from "react";
import Cell from "./components/cell";

export default function GameBoard() {
  const [gameState, setGameState] = useState([
    ["0", "0", "0"],
    ["0", "0", "0"],
    ["0", "0", "0"],
  ]);
  const [xTurn, setXTurn] = useState(true);

  const cellAction = (cellId) => {
    const [row, col] = cellId.split("_").map(Number);
    if (gameState[row][col] === "0") {
      const newState = [...gameState];
      newState[row][col] = xTurn ? "x" : "o";
      setGameState(newState);
      setXTurn(!xTurn);
    }
  };

  return <div className="grid grid-cols-3 grid-rows-3">{/* Render cells */}</div>;
}

Cells got clickable in Cell.tsx:

import React from "react";

const Cell = ({ children, cellId, cellAction }) => (
  <div
    className="flex bg-white box-border size-20 border-2 border-black font-black text-5xl uppercase items-center justify-center text-black cursor-pointer"
    onClick={() => cellAction(cellId)}
  >
    {children}
  </div>
);

export default Cell;

And winCases.ts sealed the deal:

export const checkWinner = (gameState) => {
  const winCombinations = [
    [[0, 0], [0, 1], [0, 2]],
    [[1, 0], [1, 1], [1, 2]],
    [[2, 0], [2, 1], [2, 2]],
    [[0, 0], [1, 0], [2, 0]],
    [[0, 1], [1, 1], [2, 1]],
    [[0, 2], [1, 2], [2, 2]],
    [[0, 0], [1, 1], [2, 2]],
    [[0, 2], [1, 1], [2, 0]],
  ];

  for (let combo of winCombinations) {
    const [[r1, c1], [r2, c2], [r3, c3]] = combo;
    if (
      gameState[r1][c1] !== "0" &&
      gameState[r1][c1] === gameState[r2][c2] &&
      gameState[r1][c1] === gameState[r3][c3]
    ) {
      return gameState[r1][c1];
    }
  }

  return gameState.flat().every((cell) => cell !== "0") ? "draw" : null;
};

It worked like a charm—too easy, though. Time to spice it up.

Step 2: AI Enters the Chat

Next thought: “What if AI played O?” Next.js API Routes kept it all in-house. In opponent.ts, I hooked up an API call:

const getOpponentMove = async (gameState) => {
  const response = await fetch("/api/OpenAi", {
    method: "POST",
    body: JSON.stringify({ gameState }),
  });
  if (!response.ok) throw new Error(`Status: ${response.status}`);
  return response.json();
};

export default getOpponentMove;

Next.js API Routes allowed us to manage backend logic within the same project, streamlining communication between the frontend and AI services.

Then, in gameBoard.tsx, I triggered AI moves:

const opponentAiMove = async () => {
  try {
    let move = await getOpponentMove(gameState);
    cellAction(move);
  } catch (error) {
    alert(`Opponent move failed: ${error.message}`);
  }
};

useEffect(() => {
  if (!xTurn && vsAI) opponentAiMove();
}, [xTurn, gameState]);

I was hyped—until I realized the AI part was the real puzzle.

Step 3: Free Models, Big Flops

“Let’s try free stuff first,” I thought, diving into Hugging Face with huggingface/route.ts:

const promptTemplate = () => "hey";
const model = new HuggingFaceInference({
  model: "distilbert-base-uncased-finetuned-sst-2-english",
  apiKey: process.env.HUGGINGFACE_API_TOKEN,
  maxTokens: 10,
  temperature: 0.5,
});

const getAIMove = async (maxAttempts = 5) => {
  let attempt = 1;
  while (attempt <= maxAttempts) {
    const response = await model.invoke(promptTemplate());
    const move = extractMove(response?.trim() ?? "");
    if (move) {
      const [row, col] = move.split("_").map(Number);
      if (isValidMove(row, col, gameState)) return move;
    }
    attempt++;
  }
};

We tested a few free models from Hugging Face, hoping they’d play Tic-Tac-Toe. Here’s what we tried and what happened:

DistilBERT (distilbert-base-uncased-finetuned-sst-2-english): Prompted with “Pick an empty cell,” it responded with “positive.” Sentiment analysis? Sure. Game moves? Nope.
GPT-2: Asked to “Choose ‘row_column’,” it gave “3_4” on a 3x3 grid. Out of bounds and out of luck.
Mistral-7B: Told to “Pick a spot,” it spat out random gibberish every time. Consistency? Not found.

These models struggled because they’re optimized for tasks like sentiment analysis or text generation, not the structured logic required for a game like Tic-Tac-Toe.

Hours of tweaking prompts—“Stay in bounds!” “Empty cells only!”—led nowhere. We left promptTemplate as "hey", a sarcastic surrender. The results were hilarious but useless.

Why the Flops? A Quick Reflection

Let’s be fair: these models aren’t bad—they’re just not made for this. DistilBERT excels at sentiment analysis, not grid-based logic. GPT-2 generates text, not strategies. Mistral-7B handles general tasks, but Tic-Tac-Toe is a stretch. The problem wasn’t the models—it was me, trying to force them into something weird with vague prompts. My lack of prompt-engineering finesse didn’t help either. They’re great in their own domains; my odd demands were the real flop here.

Step 4: OpenAI Saves the Day

Done with freebies, we tapped OpenAI’s GPT-4o-mini in open-ai/route.ts:

const promptTemplate = (attempt, invalidMoves) => `
You are playing Tic-Tac-Toe as O on a 3x3 grid (rows and columns: 0-2). 
'X' is your opponent, 'O' is you, '0' is empty. 
Your move MUST be an empty cell ('0') with coordinates 'row_column'.
Do NOT suggest occupied cells or invalid coordinates.
Current board: ${JSON.stringify(GAME_STATE)}
Respond with 'row_column' only.
${attempt > 1 ? `Previous invalid: ${invalidMoves.join(",")}.` : ""}
`;

async function getAIMove(maxAttempts = 5) {
  let attempt = 1;
  let invalidMoves = [];
  while (attempt <= maxAttempts) {
    const prompt = promptTemplate(attempt, invalidMoves);
    try {
      const response = await client.chat.completions.create({
        model: "gpt-4o-mini",
        messages: [{ role: "user", content: prompt }],
        temperature: 0.3,
        max_tokens: 10,
      });
      const move = response?.choices?.[0]?.message?.content;
      if (move && isValidMove(...move.split("_").map(Number), GAME_STATE)) {
        return move;
      }
      invalidMoves.push(move);
      attempt++;
    } catch (error) {
      console.error("AI move error:", error);
      return null;
    }
  }
  return null;
}

It wasn’t flawless:

Early moves hit occupied cells.
Costs crept up (pennies, but still).
A 429 “Too Many Requests” error forced a pay-as-you-go switch. We hit the free tier’s rate limit, so we added card details and switched to a pay-as-you-go plan, which resolved the issue instantly.

Once sorted, GPT-4o-mini played like a pro—reasoning, adapting, winning.

Step 5: The Road Not Taken

Here’s the twist: we could’ve used Minimax, a slick algorithm for perfect Tic-Tac-Toe moves. Minimax evaluates every possible move to guarantee the best outcome, making it ideal for games like Tic-Tac-Toe:

function minimax(board, isMaximizing) {
  const winner = checkWinner(board);
  if (winner === "x") return -1;
  if (winner === "o") return 1;
  if (board.flat().every((cell) => cell !== "0")) return 0;

  if (isMaximizing) {
    let best = -Infinity;
    for (let i = 0; i < 3; i++) {
      for (let j = 0; j < 3; j++) {
        if (board[i][j] === "0") {
          board[i][j] = "o";
          best = Math.max(best, minimax(board, false));
          board[i][j] = "0";
        }
      }
    }
    return best;
  } else {
    let best = Infinity;
    for (let i = 0; i < 3; i++) {
      for (let j = 0; j < 3; j++) {
        if (board[i][j] === "0") {
          board[i][j] = "x";
          best = Math.min(best, minimax(board, true));
          board[i][j] = "0";
        }
      }
    }
    return best;
  }
}

Minimax would’ve crushed it in a day. Why skip it? This was about exploration, not efficiency. The scenic route taught us more.

Step 6: Game On!

Tying it together in gameBoard.tsx:

const opponentAiMove = async () => {
  try {
    let move = await getOpponentMove(gameState);
    cellAction(move);
  } catch (error) {
    alert(`Opponent move failed: ${error.message}`);
  }
};

It worked! Not flawless—AI lagged sometimes—but playable. We tested the game with friends, tweaking the AI’s response time to make it feel more natural, and celebrated every hard-fought win. Victory tasted sweet after the struggle.

What We Learned

This wild ride left us wiser:

Prompts Matter: Clear, specific prompts are crucial for getting meaningful AI responses.
APIs Bite Back: Rate limits and errors require careful planning and debugging.
Free vs. Paid: Free models are great for experimenting, but paid ones offer reliability.
Overkill Wins: Tackling complex challenges builds skills you won’t gain from simple tasks.

What’s Next?

We built an AI Tic-Tac-Toe—was it nuts? Yes. Awesome? Absolutely. I’m hooked—next up, maybe an over-the-top Pong or a neural-net Snake. Imagine an AI-driven Pong where the paddle predicts your moves or a Snake game that learns your playstyle—any takers for those? Got ideas? Hit the comments—let’s overcomplicate something else together!