DEV Community: Teddy ASSIH

MailPlanet🌍: Visualize email origins on a global map

Teddy ASSIH — Sun, 08 Jun 2025 14:50:54 +0000

This is a submission for the Postmark Challenge: Inbox Innovators.

What I Built: MailPlanet

Ever wondered where on Earth your emails are really coming from?
Well, Ethically, that's not really possible but we still can know where the email provider is sending that email from and now you can see it — literally.

That is what MailPlanet is for, a Next.js-powered space station (okay, it's a web app, but let me dream) that pinpoints the origin of incoming emails and drops them on a glowing globe.

It listens for emails using Postmark's inbound webhooks, geolocates the sender’s IP using Abstract API, stores the data with Drizzle ORM, and then — voilà — launches a little marker on the globe using Mapbox.

Demo

Check it live here: https://mailplanet.vercel.app
Preview Screenshot:

Testing Instructions

Visit the live link above.
Send an email to this Postmark inbound address (2446e801971b017b07291e89d25592b3@inbound.postmarkapp.com) — don’t worry, any subject and body will do.
Wait a few seconds for MailPlanet to pick it up, geo-locate it, and drop a marker from space.
Click the marker on the globe to see who emailed and from where

Code Repository

Code’s open source and ready for launch:

Ionfinisher / mail-planet

MailPlanet 🌍📧

MailPlanet is a Next.js application that visualizes the geographic origin of incoming emails on an interactive 3D globe. It processes inbound emails via Postmark webhooks, performs IP geolocation, and displays the data on a Mapbox map.

Features

Interactive 3D Globe: Visualizes email origins using Mapbox GL JS.
Real-time Updates: New emails appear on the map as they are processed.
IP Geolocation: Determines the location of the email sender's IP address (actually the email provider's address).
Email Data Display: Shows details like sender, subject, and location on map markers.
Database Integration: Stores and retrieves IP location data using Drizzle ORM.
Postmark Webhook: Processes inbound emails received through Postmark.

Tech Stack

Framework: Next.js
Language: TypeScript
Mapping: Mapbox GL JS
Database ORM: Drizzle ORM
Styling: Tailwind CSS (Assumed, common with Next.js)
Inbound Email: Postmark
Geolocation API: Abstract API…

View on GitHub

How I Built It

Here’s how it all came together:

1. Email Receiving – Powered by Postmark

Set up an inbound stream and webhook that sends all incoming emails to my Next.js API route /api/inbound-email. (Can only receive up to 99-ish emails so be kind 😁)

2. Geolocation

Grabbed the sender's mail service IP from the email headers.
Fed that IP into the Abstract IP Geolocation API to get the country, lat/lng, and flag.

3. Data Persistence

The decision to actually use a database came into play as I'm using free tier only services and I had to gatekeep all the API calls.

Used Drizzle ORM to define the schema and store everything: IPs, locations, email counts, etc.
If an IP shows up again, it just increments the count like a loyal globe-tracker.

4. Globe Rendering

Built a slick Mapbox globe via [src/components/Planet.tsx].
Pulled geolocation data from /api/iplocations and mapped every email sender in real-time.
Clicking a marker shows details like subject and sender.

Tech Stack

Feature	Tool
Framework	Next.js
Language	TypeScript
Emails	Postmark
Geolocation	Abstract API
Database	Drizzle ORM
Maps	Mapbox GL JS

Experience with Postmark

MailPlanet was built with one goal: use the Postmark inbound email feture to make emails less boring with a sprinkle of creativity. And Postmark made it really simple to do so, from getting my account verified, to configuring the inbound mail server in just a few steps.

Thanks Postmark for the stellar tools. ✨

Now go forth and send an email — MailPlanet is watching. 🌎

Bot Blitz: Host Your HTML5 Game on Alibaba Cloud OSS

Teddy ASSIH — Mon, 28 Apr 2025 04:06:59 +0000

This is a submission for the Alibaba Cloud Challenge: Build a Web Game.*

What I Built

I created Bot Blitz, a fast-paced, browser-based and electrifying match-3 game where you swap colorful robot parts against the clock built with Phaser 3 and served entirely from OSS.

The game leverages HTML5, CSS3, and JavaScript and Canvas for broad device support and light weight game developement.
By hosting assets on OSS static website hosting, I eliminated the need for any backend servers, achieving a truly serverless deployment that’s easy to maintain and cost-efficient.

Demo

Play Bot Blitz live at:
👉 http://teddydev.tech

👉 GitHub Repo here:

Ionfinisher / bot-blitz

Bot Blitz 🤖💥

Welcome to Bot Blitz, the electrifying match-3 game where you swap colorful robot parts against the clock! ⏱️

Get ready to match and blast your way through a grid of quirky robots. You've got just two minutes to rack up the highest score possible. Can you beat the clock and become the ultimate Bot Blitzer?

📸 Screenshots

Desktop View Screenshot

Mobile View Screenshot

🚀 Features

Classic Match-3 Fun: Swap adjacent bots to create lines of 3 or more identical bots.
Robotic Mayhem: Match colorful robot parts in a vibrant grid.
Beat the Clock: Race against a 120-second timer to maximize your score! ⏳
Score & Combo Tracking: Watch your score climb and aim for the highest combo chain! ✨
Persistent Leaderboard: You can see your Top 10 highest scores! 🏆 (Uses browser localStorage)
Sound Effects & Music: Immersive sounds for swaps, matches, combos, and background…

View on GitHub

Here are a few snapshots of the action:

Alibaba Cloud Services Implementation

Object Storage Service (OSS)

Why Choose OSS for Your Static Game?

Alibaba Cloud OSS gives you massively scalable, low-cost storage for static assets—perfect for games made entirely in HTML/CSS/JS like Phaser. You get global availability, built-in high durability, and a pay-for-what-you-use model that can be free if you stay within the free tier limits. Since OSS handles HTTP GETs directly, there’s no backend maintenance, letting you focus on coding loops instead of servers.

Step 1: Create and Configure Your Bucket

Log in to the Alibaba Cloud Console and go to Object Storage Service (OSS).
Click Create Bucket, choose a globally unique name, select your region, and pick Standard storage.
Set the bucket’s ACL to public-read so anyone can fetch your game files—later we’ll tighten this up with bucket policies.

Enable Server-Side Encryption if you want to protect your assets at rest.

Step 2: Enable Static Website Hosting

In the OSS console, navigate to Data Management → Static Page.
Set your Default Homepage to index.html and Default 404 Page to 404.html (so players get a friendly “Oops!” if they type a wrong URL).

Save the settings—OSS will now treat your bucket like a web server and serve those files automatically.

Step 3: Upload Your Phaser Game Assets You have two main ways to get your game into OSS:

Console Upload: Drag-and-drop your index.html, 404.html, /assets, /css, /js folders directly in the OSS web panel.

ossutil CLI:

Download and configure ossutil with your AccessKey ID/Secret.

From your terminal:

ossutil cp -r ./public oss://your-bucket-name/ -f

This recursively uploads your local public/ folder to OSS

Step 4: Point a Custom Domain & Enable HTTPS Map your domain via CNAME to your-bucket-name.endpoint.aliyuncs.com in your DNS provider.

In the OSS console, go to Domain Names → Map Custom Domain, verify ownership with a TXT record, then add the CNAME.

Upload your SSL certificate (public .crt and private .key) under Certificate Management to serve your game over HTTPS. I couldn't actually achieve this step yet cause of some providers issues.

Step 5: Speed It Up with CDN, Caching To reduce latency and make your sprites glide faster:

Enable Alibaba Cloud CDN on your bucket for edge caching worldwide.
Set Cache-Control headers (e.g., max-age=31536000, immutable) on versioned assets so browsers cache indefinitely.

Game Development Highlights

Built with Phaser 3: Leveraging the power of the fun, free, and fast Phaser game framework. And it;s just pure HTML5, CSS and JS making it lightweight 🍃.

Simple and easy gameplay: Classic Match-3 Fun gameplay but yet so addictive and stress relieving. Just swap adjacent bots to create lines of 3 or more identical bots.

Responsive Design: Playable on different screen sizes.

Sound Effects & Music: Immersive sounds for swaps, matches, combos, and background music (with mute options!)

Pulumi ESC Config: Simplify Your Local Configuration Management

Teddy ASSIH — Sun, 06 Apr 2025 19:01:55 +0000

This is a submission for the Pulumi Deploy and Document Challenge: Shhh, It's a Secret!

What I Built

I created Pulumi ESC Config, a command-line tool that bridges the gap between Pulumi's Environment Secrets and Configuration (ESC) service and application configuration files. This tool securely fetches secrets from Pulumi ESC and transforms them into various configuration formats (.env, JSON, YAML) that any application can easily consume.

The tool addresses a common challenge in modern development: securely managing secrets across different environments while maintaining a consistent interface for applications to access them.

Live Demo Link

This project doesn't have a live Link.

Project Repo

The project is available on GitHub: pulumi-esc-config

Key features:

Secure fetching of secrets from Pulumi ESC
Support for multiple output formats (.env, JSON, YAML)
Environment-specific configuration generation
Simple CLI interface with comprehensive documentation

My Journey

The Problem

As a developer working across multiple projects and environments, we often found ourselve constantly copying secrets between different configuration files and worrying about accidentally committing sensitive information to version control. We therefore need a solution that would:

Keep secrets secure and centralized
Support multiple application types (Node.js, Python, etc.)
Make environment-specific configuration easy to manage

The Solution

Pulumi ESC offered the perfect foundation for secure secret management, but I needed a way to seamlessly integrate it with different application frameworks. That's when I decided to build the ESC Config Generator.

Development Process

I started by exploring the Pulumi ESC SDK and understanding how to authenticate and retrieve secrets. The JavaScript SDK made this relatively straightforward:

const client = esc.DefaultClient();
const openEnv = await client.openAndReadEnvironment(orgName, projName, envName);

Next, I built the formatting layer to transform the retrieved secrets into different configuration file formats. This involved creating custom serializers for .env, JSON, and YAML formats:

// For .env files
content = Object.entries(secrets)
  .map(([key, value]) => `${key}=${value}`)
  .join("\n");

// For YAML files
content = yaml.dump(secrets);

// For JSON files
content = JSON.stringify(secrets, null, 2);

The most challenging part was handling the different ways applications consume configuration files. I researched various frameworks and added examples to the documentation showing how to load the generated configurations in Node.js, Python.

Lessons Learned

Through this project, I gained valuable insights into:

Secret Management Best Practices: The importance of secret rotation, least privilege access, and environment isolation
SDK Integration: How to work with third-party SDKs and handle authentication flows
CLI Design: Creating an intuitive command-line interface with clear documentation
Cross-Language Support: Supporting multiple programming languages and frameworks

Using Pulumi ESC

Pulumi ESC provided the ideal foundation for this project for several reasons:

Centralized Secret Management: ESC offers a secure, centralized place to store secrets with proper access controls
Environment Segmentation: The project/environment structure aligns perfectly with development workflows (dev/staging/prod)
SDK Availability: The JavaScript SDK made integration straightforward
Strong Security Model: Pulumi's security practices gave me confidence in building on their platform

The tool interacts with Pulumi ESC through these key steps:

Authentication via the ESC CLI: esc login. Actually this was the easiest and secured way of authentication I found to integrate in this project
Defining the organization, project, and environment context
Retrieving secrets using the SDK: client.openAndReadEnvironment()
Transforming and saving the secrets to the appropriate format

Here's a practical example of generating a .env file for a development environment:

npm run generate -- --proj myproject --env dev --type env --output .env

Benefits Over Alternative Approaches

Compared to other secret management approaches, using Pulumi ESC provided:

Better Security: Secrets never need to be manually copied or stored in insecure locations
Simplified Workflows: Developers can focus on code instead of configuration management
Consistent Experience: The same approach works across all environments and languages
Audit Capabilities: All secret access is logged and auditable

Next Steps

I'm planning to enhance the tool with:

Secret rotation reminders and automation
Integration of OIDC generation for differents providers
Support for more configuration formats
A web interface for non-technical users

If you're struggling with configuration management across environments, give Pulumi ESC Config Generator a try!

IntelliGrid: AI KendoReact Pricing Grid generator 🤖

Teddy ASSIH — Sun, 23 Mar 2025 06:01:45 +0000

This is a submission for the KendoReact Free Components Challenge.

What I Built

Recently, I was building a pricing grid section for a landing page and I'd run out of ideas for prices but also for modules, and of course I wondered if there wasn't an AI tool to speed things up. Then I came up with the idea of simply building it (builder mentality 🛠💻). There was also thid Dev challenge so I tought if I could mix both, it'll be cool. So here we are with a AI tool that can generate Pricing Grids made with Kendo React Components based on the submitted form✨.

Demo

Check It Live HERE

Check the Repo HERE

KendoReact Experience

I leveraged KendoReact Free Components to build a user-friendly, responsive interface for my AI Pricing Grid generator app. Specifically, I used the following components:

From UI element packages:

Button from "@progress/kendo-react-buttons"
Input, TextArea, Slider, SliderLabel from "@progress/kendo-react-inputs"
Error, Label from "@progress/kendo-react-labels"
DropDownList from "@progress/kendo-react-dropdowns"
TabStrip, TabStripTab, Card, CardHeader, CardTitle, CardSubtitle, CardBody, CardFooter from "@progress/kendo-react-layout"
SvgIcon from "@progress/kendo-react-common"
Badge, Loader from "@progress/kendo-react-indicators"

Icons from KendoReact:

downloadIcon, codeIcon, eyeIcon, checkIcon from "@progress/kendo-svg-icons"

KendoReact’s components allowed me to customize the look and feel to match my app’s branding while maintaining performance and accessibility. The free tier’s robust features allowed me to prototype quickly and simplified AI integration and is easy to use.

AIm to Impress

User enters product details via KendoReact form components
Form data is sent to the server-side function
The AI generates structured JSON data for pricing tiers
Response is validated and processed
UI displays the generated pricing grid
User can download React code using KendoReact components

KeyMash, type your ways to feature with DevCycle feature flags

Teddy ASSIH — Mon, 23 Dec 2024 07:39:13 +0000

This is a submission for the DevCycle Feature Flag Challenge: Feature Flag Funhouse

What I Built

Hey everybody, Teddy here 👋. The listtle story behing my project is that I'm not that good at typing, and lately, I've been exercising my typing skills. So, I thought, "Why not turn my actual struggle into a fun project for this hackaton?" That’s how KeyMash came to life.

It’s a super fun, game-like typing platform where you can put your skills to the test, challenge yourself (and maybe others down the line), and customize your experience with awesome feature flags as you finish tests. No need to create an account to jump in—it’s all about that instant, arcade vibe!

Demo

Test it live here KeyMash

Screenshots:

My Code

GitHub repo: https://github.com/Ionfinisher/keymash

My DevCycle Experience

Using DevCycle was really a fun coding time! Using feature flags globally was a breeze since I didn't need flags for individual users. It made everything more straightforward and organized. The React SDK was very easy to set up, and switching features on and off felt like flipping light switches and enjoyable!

For instance, I used feature flags to introduce some UX and UI features, and even possible arcade extras in the future. It also reassured me that I could launch features gradually or test them safely.

In summary, using DevCycle was a smooth experience for me in creating a strong base for a game that can continue to evolve with new ideas.

Additional Prize Categories

OpenFeature Aficionado: Awarded to a project that showcases the most creative use of a DevCycle OpenFeature Provider!
API All-Star: Awarded to a project that shines by making full use of the DevCycle API— showcase creativity and capability through effective integration!

MedInsight: Your AI rare disease research assistant.

Teddy ASSIH — Sun, 10 Nov 2024 00:16:06 +0000

This is a submission for the Open Source AI Challenge with pgai and Ollama

What I Built

MedInsight is an AI-powered knowledge management tool tailored for med students, doctors and researchers studying rare diseases. This application consolidates research articles into one highly searchable database allowing medical professionals to quickly retrieve relevant information about rare diseases. At the moment, the data is about Acute Lymphoblastic Leukemia.

Demo

Live link here MedInsight

Repo here: MedInsight Repo

DISCLAIMER: The requests are very slow (15-20 seconds) due to all the RAG logic relying on the database and the timescale server not having enough ressources so my apologies🙏.

The home page

First question:

Second question:

Tools Used

The architecture:

Timescale:

I used a pretty simple schema that works well for storing, searching, and embedding research papers in a structured way for retrieval-augmented generation (RAG) and similarity.

CREATE TABLE research_papers(
id BIGINT PRIMARY KEY GENERATED BY DEFAULT AS IDENTITY
title TEXT NOT NULL,
content TEXT NOT NULL,
url TEXT NOT NULL
);

Syncing and creating automatically LLM embeddings for the research papers:

The pgvector and pgvectorscale extensions allowed me to store vector embeddings in my database. The pgai Vectorizer builds on top of these extensions to automatically create and synchronize embeddings for any text data. Also, I made use of the vectorscale index automatically created after 100,000 rows of vector data are present using the StreamingDiskANN index on Timescale Cloud for a blazing fast search experience⚡️.

With one line of code, I defined a vectorizer that creates embeddings for the research papers in a table:

SELECT ai.create_vectorizer( 
    'public.research_papers'::regclass,
    embedding => ai.embedding_openai('text-embedding-3-small', 1536, api_key_name=>'OPENAI_API_KEY'),
    chunking => ai.chunking_recursive_character_text_splitter('content'),
    formatting => ai.formatting_python_template('title: $title url: $url content: $chunk')
);

The RAG:

To implement the RAG, pgai LLM functions come in handy. I used them to implement the RAG system directly in my database by creating a function and calling it in my queries. openai to embed the search and llama3 from a self hosted Ollama instance from Koyeb to generate a summarized answer.

Final Thoughts

Overall I was fascinated about how easy it was to setup the vector database and the automatic embedding. It for sure saves a lot of time in the implementation of ai based apps. Even if I had some small bugs throughout the coding journey, I managed to ship the app within a day so the timescale experience is pretty straight up.

Improvement

Of course my app is not perfect and there is a lot to improve:

Query optimization to imrpove the speed of the requests
A chat history to not loose conversations

Any other improvement idea is welcome in the comments 🙏.

Prize categories:

Open-source Models from Ollama, Vectorizer Vibe, All the Extensions

Image from vecteezy.com

Hacktober 2024: One of the best October of my dev adventure

Teddy ASSIH — Tue, 29 Oct 2024 12:02:29 +0000

This is a submission for the 2024 Hacktoberfest Writing challenge: Contributor Experience

Here's the corrected paragraph:

Ah, Hacktober – the month when the air smells like pumpkin spice, open-source contributions, and birthday parties because, yes, I was born in October :). This time, though, I found something special: a Hackathon that gamified open-source contributions, oss.gg, and also had crazy prizes. It was perfect because I wanted a new PC, and one of the prizes was an M3 MacBook. Just like that, I found myself a birthday gift 😂.

How it started

It all started pretty casually. I signed up for the Hacktober Hackathon with simple goals: submit a few PRs, open some issues, and make sure I had at least 4 PRs merged to collect my badges. So, in late September - early October, I started searching for goodfirst-issue PRs to get started, and then I found the formbricks.com repo, where they were talking about oss.gg. Just seeing the prizes was enough to get me to fork their repo. And that’s when it took off 🚀.

The projects I worked on

In the beginning, I wanted to maximize my chances of getting those 4 PRs merged, so I started with quick fixes in smaller projects. But then it hit me: if I was serious about that MacBook, I'd need to focus my efforts. By the end, I had tons of PRs merged, but I'll just highlight the ones that truly mattered to me.

Computer science: The first PR that got accepted was a doc translation. This one was pretty big since the entire repo is dedicated to explaining computer science concepts.
Year in progress: In another contribution, I added features to a small project that provides an API for generating a progress bar of the current year (or for a custom date range).
Unkey: Another doc PR that was needed for the @unkey/nextjs npm package page.
Another Unkey PR: Then came a request to create a template using one of their tools that’s showcased on their website. I made this 👉 Link to my template

The fun part 🎉

oss.gg side quests:

The special touch of the oss.gg Hackathon was their side quests. You could submit no-code PRs, engage with the community on X and LinkedIn, and really get to know the projects. These side quests actually turned me into a more consistent technical writer and introduced me to some amazing, talented people along the way ✨.

Code PRs Became a Daily Habit:

I can confidently say that this month, I opened at least one PR, issue, or pushed some code every single day – and that was just wild for me! Well, except for that one tiny day when things went way too fast to keep up. My mornings turned into “What can I ship today?” moments 😂.

Side Projects:

I started building side projects – mini-apps that used the functionality of the projects I was working on, mostly inspired by the oss.gg side quests. This sparked a real ship fast mentality in me, and now I just want more projects to build 😂. Here are two of the ones I made if you’d like to check them out: ASKIQ and To don't App.

Wrap Up:

In the end, what started as a plan to submit “a few PRs” turned into one of my best months in open source. I learned, built, shipped, wrote, and connected in ways I didn’t think were possible in just a few weeks. Hacktober had made open source not just accessible, but addictive and rewarding. And now, here I am, with a refreshed GitHub and a ton of articles.
What’s the takeaway? Sign up for a Hackathon, contribute in any way you can, and you just might discover you’re capable of more than you thought – and probably meet some epic people along the way ⭐️.

Building an FAQ Generator API with Next.js, GPT-4, and Unkey: Making Rate Limiting Fun!

Teddy ASSIH — Thu, 24 Oct 2024 05:51:27 +0000

Who doesn’t appreciate a solid FAQ section? Those little gems of information help users find answers quickly without flooding your inbox with questions. But what if I told you we could automate the FAQ creation process? Even better, we can add some AI flair, link it all to a sleek Next.js app, and keep everything in check with rate limiting using Unkey. Plus, we’ll make sure the API doesn’t munch through your monthly token limit!

And it's live here and Open-Source here (don't forget to drop a ⭐️ ;)).

Sound good? Let’s dive in.

The Challenge: Automating FAQs (While Keeping Costs Low)

Imagine you’ve just launched a cool new app, and users are firing off questions like, "What’s this app all about?" or "How does it work?" You can sit down and write answers to all these questions, but what if the app could just generate FAQs for you? Sounds good, right?

Enter OpenAI’s GPT-4 (or 3.5 if you’re on a budget) to create intelligent, auto-generated FAQs. But there’s a catch: OpenAI’s API isn’t free, and unless you're sitting on piles of money, you're working with a limited budget. You need a smart way to manage how many API requests your users can make.

This is where Unkey comes in. It's a simple API Management tool that provides rate-limiting to prevent any single user from overwhelming your system (or your wallet). Let's see how I built it all!

Step 1: Setting Up Next.js and the OpenAI API

First things first: Next.js is our go-to framework for this project. It’s the ship-fasters favorite (yeah, I just created a word :)).

Here’s a quick breakdown of how we handle the AI magic. In our API route, we send a request to OpenAI’s GPT-4, asking it to generate a list of FAQs based on a topic.

import { NextResponse, NextRequest } from "next/server";
import rateLimit from "@/lib/unkey";
import openai from "@/lib/openai";
import { parseFaqResponse } from "@/lib/responseParser";

export async function POST(request: NextRequest): Promise<NextResponse> {
  const { topic } = await request.json();

  //   Make sure the 'topic' parameter is provided
  if (!topic || typeof topic !== "string") {
    return NextResponse.json(
      { error: "Missing or invalid 'topic' parameter" },
      { status: 400 }
    );
  }

  // Get the user's IP address
  const ip = request.headers.get("x-forwarded-for") || "anonymous";

  // Verify the rate limit
  const rateLimitResponse = await rateLimit.limit(ip, { cost: 2 });
  if (!rateLimitResponse.success) {
    // Return a 429 status response if the limit is exceeded
    return NextResponse.json(
      { message: "API rate limit exceeded. Try again later" },
      { status: 429 }
    );
  }

  try {
    // Generate FAQ answer using GPT-4o
    const response = await openai.chat.completions.create({
      model: "gpt-4o-mini",
      messages: [
        {
          role: "system",
          content:
            "PROMPT",
        },
        {
          role: "user",
          content: `Here is the topic: "${topic}"`,
        },
      ],
    });

    const answer = parseFaqResponse(response);

    return NextResponse.json(answer, { status: 200 });
  } catch (error) {
    return NextResponse.json(
      { error: "Error generating FAQ" },
      { status: 500 }
    );
  }
}

In this API endpoint, we take in the topic and the user ip address (to check rate limits). We send the topic to GPT-4, ask it for some FAQs, and then return a beautifully formatted JSON response. And if the user goes crazy with requests? Unkey steps in and says, "Whoa there, slow down!"

Step 2: Rate Limiting with Unkey – Because No One Likes an Overachiever

You might think rate limiting is boring, but it’s a lifesaver, especially when you’re using paid services like OpenAI. Unkey is simple and handles this gracefully.

Here's what makes Unkey awesome:

It's dead simple to use (seriously, you don’t need to know how to center a div).
Friendly pricing – Unkey doesn’t break the bank, and it keeps your OpenAI API budget in check.

In our setup, we allow 2 requests per 10s, per user. After that, Unkey jumps in and throws a friendly "Rate limit exceeded" message at them within that 10s window. This keeps your API from getting overwhelmed and prevents your token count from going over budget. Here is what the unkey.ts file looks like:

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

const unkey = new Ratelimit({
  rootKey: process.env.UNKEY_ROOT_KEY!,
  duration: "10s",
  limit: 2,
  namespace: "askiq",
  async: true,
});

export default unkey;

Step 3: Error Handling – Because Things Go Wrong Sometimes

Building an API isn’t just about making things work—it's about making sure things don’t break when users do the unexpected.

Here are some of the things we check:

Missing topic? We send a 400 error.
Rate limit exceeded? We send a 429 error.
Anything else? We send a 500 error and say, “Oops, something went wrong.”

It’s all about keeping things smooth and user-friendly.

The Result: A Developer-Friendly FAQ Generator

At the end of the day, what do we have? A sleek, rate-limited FAQ generator that developers can use to get auto-generated FAQs about any topic they want, powered by OpenAI’s GPT-4 called ASKIQ.

So there you have it: a slick FAQ generator that uses AI to save you time, powered by an efficient rate-limiting system. Want to keep your API in check? Give Unkey a spin!

Now, off you go to build your own open-source project or take this one to the next level and you might as well leave a star since you're there. Happy coding!

Shipping a Nextjs app in two days with Hanko Auth elements

Teddy ASSIH — Fri, 18 Oct 2024 09:52:05 +0000

As part of building modern web applications, authentication is a critical aspect, and developers often seek secure, user-friendly, and flexible solutions to handle it. In my recent Next.js project, I chose to integrate Hanko, an authentication provider that allow you integrate auth and passkeys in minutes.

In this article, I’ll walk you through how I used Hanko in my app to implement secure, both password and passwordless authentication for users, cause yes, Hanko can do both :).

Why I Chose Hanko

Hanko is a powerful authentication solution that provides:

Free 10,000 monthly active users: You can start for free with passkeys, social logins, email passcodes, optional passwords and user management.
Passwordless authentication: No need to store passwords, reducing security risks.
Easy to understand an clear documentation: Hanko has probably the best documentation I've ever seen. It guets you started quickly with their framework specific quickstarts so that you can ship fast.

Given the project’s focus on security and ease of use, Hanko was the perfect choice for my app.

What is my App about?

To Don't App is a not so common to do App where instead of adding the tasks you have to do, you add the ones or the habits you have to avoid. The Hanko auth here helps keeping the user data safe as it is persisted in a mongodb database.
It's Live here🎉.

Step-by-Step Integration of Hanko in my App

Here’s how I integrated Hanko into my To Don't app:

1. Setting Up the Next.js Project

I started by creating the Next.js project. If you haven't done so already, you can set up a new Next.js project using the following commands:

npx create-next-app@latest next-todont-app
cd next-todont-app

2. Creating an Account on Hanko

To integrate Hanko, I first needed to set up a Hanko account. I signed up on their platform and created a new project to obtain the necessary API URL for authentication.

1. Sign Up at Hanko.

2. Create a new project and retrieve your API URL.

3. Installing Hanko SDK

I installed the Hanko SDK in my Next.js app to handle the authentication flow.

npm install @teamhanko/hanko-elements

This package provides the client-side tools for registering, authenticating, and managing users.

4. Setting environment variables

I created an .env.local file in my project root and added my Hanko API URL:

NEXT_PUBLIC_HANKO_API_URL=https://f4****-4802-49ad-8e0b-3d3****ab32.hanko.io

This ensures that the authentication service can securely communicate with Hanko's API.

5. Building the Authentication Pages

Login

To allow users to register and login, I created a page integrating the <hanko-auth> web component that adds these two interfaces.

First, I imported the register function from @teamhanko/hanko-elements into my Next.js component. Called it with the Hanko API URL as an argument to register <hanko-auth>. Once done, I added it in my JSX. Here's a snippet for the component:
components/HankoAuth.tsx

"use client";

import { useEffect, useCallback, useState } from "react";
import { useRouter } from "next/navigation";
import { register, Hanko } from "@teamhanko/hanko-elements";

const hankoApi = process.env.NEXT_PUBLIC_HANKO_API_URL;

export default function HankoAuth() {
  const router = useRouter();

  const [hanko, setHanko] = useState<Hanko>();

  useEffect(() => setHanko(new Hanko(hankoApi)), []);

  const redirectAfterLogin = useCallback(() => {
    // successfully logged in, redirect to a page in your application
    router.replace("/dashboard");
  }, [router]);

  useEffect(
    () =>
      hanko?.onSessionCreated(() => {
        redirectAfterLogin();
      }),
    [hanko, redirectAfterLogin]
  );

  useEffect(() => {
    register(hankoApi).catch((error) => {
      // handle error
    });
  }, []);

  return <hanko-auth />;
}

Next, I added the component to the login page:
app/login/page.tsx

import HankoAuth from "@/components/HankoAuth";

export default function LoginPage() {
 return (
   <div className="flex justify-center items-center h-screen">
    <HankoAuth />
   </div>
 );
}

And BOOM 🎉. Just like that, the sign in and sign up features are done. Here is what it looks like 👇

Profile Page

For users to see their account infos, I created a page using the <hanko-profile> component. This component provides an interface, where users can manage their email addresses and passkeys.
components/HankoProfile.jsx

"use client"

import { useEffect } from "react";
import { register } from "@teamhanko/hanko-elements";

const hankoApi = process.env.NEXT_PUBLIC_HANKO_API_URL;

export default function HankoProfile() {
  useEffect(() => {
    register(hankoApi).catch((error) => {
      // handle error
    });
  }, []);

return <hanko-profile />;
}

Here is Profile page:
app/profile/page.tsx

import React from "react";
import HankoProfile from "@/components/profile";

export default function ProfilePage() {
  return (
    <div>
        <HankoProfile />
    </div>
  );
};

Look at this beauty :):

Logout

Now for the Logout. I used @teamhanko/hanko-elements to easily manage user logouts. Below, I created a logout button component I used on my dashboard.
components/LogoutButton.tsx

"use client";

import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { Hanko } from "@teamhanko/hanko-elements";

const hankoApi = process.env.NEXT_PUBLIC_HANKO_API_URL;

export default function LogoutBtn() {
  const router = useRouter();
  const [hanko, setHanko] = useState<Hanko>();

  useEffect(() => setHanko(new Hanko(hankoApi ?? "")), []);

  const logout = async () => {
    try {
      await hanko?.user.logout();
      router.push("/login");
      router.refresh();
      return;
    } catch (error) {
      console.error("Error during logout:", error);
    }
  };

  return <button onClick={logout}>Logout</button>;
}

Customization

To make it look seggsy, I customized the Hanko elements to make the app's UI uniform. To achieve this, i created a dedicated CSS file for the Hanko elements. For further explanation, I really recommend these two articles: Hanko Docs and Esther-Lita post
src/app/hanko.css

:root {
    --color: #111827;
    --color-shade-1: #222222;
    --color-shade-2: #eff5ff;
    --brand-color: #000000e8;
    --background-color: #ffffff;
    --headline1-font-size: 29px;
    --headline2-font-size: 16px;
    --headline1-margin: 10px 40px;
    --border-radius: 6px;
    --font-size: 14px;
    --item-height: 36px;
    --link-color: #111827;
    --divider-padding: 0 15px;
}

hanko-auth {
    --container-max-width: 640px;
    --container-padding: 40px;
}

hanko-profile {
    --container-max-width: 550px;
    --container-padding: 30px;
}


hanko-profile::part(container) {
    border: solid 1px #d8dee3;
    border-radius: 6px;
}

hanko-auth::part(button):hover {
    background-color: #848587;
    border: #848587 solid 1px;
}


hanko-auth::part(headline1),
hanko-profile::part(headline1),
hanko-auth::part(headline2),
hanko-profile::part(headline2) {
    color: #1f2328;
    line-height: 36px;
    text-align: center;
}

hanko-auth::part(form-item) {
    min-width: 100%;
}

hanko-auth::part(input),
hanko-profile::part(input) {
    background-color: #ffffff;
    margin-bottom: 12px;
}

hanko-auth::part(secondary-button) {
    border-color: var(--brand-color--);
}

hanko-auth::part(divider) {
    margin: 24px 0;
    color: var(--brand-color);
}

Here is what it looks like now:
Login:

Profile:

6. Securing API Routes

I ensured that sensitive API routes (like those managing to-do items) were protected by checking whether the user was authenticated before allowing access. This was done by adding middleware that verifies if there's valid JWT and using the jose library. However, you’re free to choose any other suitable library.
middleware.ts

import { NextResponse, NextRequest } from "next/server";

import { jwtVerify, createRemoteJWKSet } from "jose";

const hankoApiUrl = process.env.NEXT_PUBLIC_HANKO_API_URL;

export async function middleware(req: NextRequest) {
  const hanko = req.cookies.get("hanko")?.value;

  const JWKS = createRemoteJWKSet(
    new URL(`${hankoApiUrl}/.well-known/jwks.json`)
  );

  try {
    const verifiedJWT = await jwtVerify(hanko ?? "", JWKS);
  } catch {
    return NextResponse.redirect(new URL("/login", req.url));
  }
}

export const config = {
  matcher: ["profile","/dashboard"],
};

This middleware ensures that only authenticated users can access certain API endpoints.

7. Getting User data

To Link th "to-donts" to a specific user, I needed to get the user Id from Hanko. To achieve that, I created a custom hook to fetch the current user’s data using @teamhanko/hanko-elements. The useUserData hook leverages the hanko.user.getCurrent() method to retrieve the currently logged-in user’s data. I just needed the user Id, but you can get more.
hooks/useUserData.ts

import { useState, useEffect } from "react";
import { Hanko } from "@teamhanko/hanko-elements";

const hankoApi = process.env.NEXT_PUBLIC_HANKO_API_URL || "";

// I just needed the user id here
interface HankoUser {
  id: string;
  loading: boolean;
  error: string | null;
}

export function useUserData(): HankoUser {
  const [hanko, setHanko] = useState<Hanko>();
  const [userState, setUserState] = useState<HankoUser>({
    id: "",
    loading: true,
    error: null,
  });

  useEffect(() => setHanko(new Hanko(hankoApi)), []);

  useEffect(() => {
    hanko?.user
      .getCurrent()
      .then(({ id }) => {
        setUserState({ id, loading: false, error: null });
      })
      .catch((error) => {
        setUserState((prevState) => ({ ...prevState, loading: false, error }));
      });
  }, [hanko]);

  return userState;
}

And here, I used it in my dashboard page:
src/app/dashboard/page.tsx

"use client"

import { useUserData } from "@/hooks/useUserData";
import { useSessionData } from "@/hooks/useSessionData";

const Dashboard = () => {
  const { id, loading: userDataLoading, error: userDataError } = useUserData();

  if (userDataLoading) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <div>User id: {id}</div>
    </div>
  );
};

export default Dashboard;

8. Deploying on Vercel

After testing the app locally, I deployed it to Vercel for production. Here's how I did it:

Commit and push the code to a GitHub repository.
Link the repository to Vercel for automatic deployment.
Configure the environment variables (Hanko API URL and database related variables) in the Vercel dashboard.
Deploy the app.

Integrating Hanko in my Next.js app made the authentication process much more secure, user-friendly and fast. With the rise of passwordless authentication and biometrics, Hanko’s approach provides an excellent way to enhance security while offering users a simple and modern login experience.

If you're looking for a fast authentication solution in your Next.js project, I highly recommend giving Hanko a try! Try Hanko now.

Making Passwords Optional: What You Need to Know

Teddy ASSIH — Tue, 15 Oct 2024 08:45:46 +0000

As technology advances, the way we secure our online accounts is changing. Traditional passwords are increasingly seen as outdated and insecure due to risks like phishing and data breaches. Many companies are now adopting passwordless login methods, such as biometrics and one-time codes, allowing users to remove passwords entirely.

This article will explore the important factors to consider when giving users the option to delete their passwords.

Why Consider Making Passwords Optional?

There are several benefits to reducing reliance on passwords:

Better Security: Passwordless methods, like biometrics or magic links, lower the chances of falling victim to phishing or other attacks.
Easier User Experience: Remembering complex passwords can be a hassle. Removing them simplifies the login process, making it faster and more user-friendly.
Reduced Support Costs: A significant number of helpdesk requests involve password resets. Eliminating passwords can help cut down these costs.

However, allowing users to delete their passwords requires careful planning to ensure security and usability.

Key Factors When Users Delete Their Passwords

1. Offer Strong Alternatives

When users opt out of passwords, they need secure and convenient alternatives:

Biometric Authentication: This includes face recognition or fingerprint scanning.
Passkeys: These are cryptographic keys stored on devices that authenticate users without needing a password. Check passkey.io, an interactive passkeys demo and info page for a better understanding of this concept.
Magic Links or One-Time Passwords (OTP): These are temporary codes sent via email or text that allow access.

It's crucial to choose methods that provide strong security. For instance, while passkeys are resistant to phishing, magic links can be compromised if someone accesses the user's email.

2. User Experience Matters

While removing passwords can enhance user experience, alternatives must be easy to use:

Fallback Options: Provide backup methods for those who may struggle with biometric systems or passkeys. Options like one-time codes can help ensure everyone can access their accounts.
Cross-Device Access: Make sure users can log in easily across different devices. For example, passkeys should sync between a user’s phone and computer for seamless access.

3. Account Recovery Options

If users delete their passwords, having reliable recovery options is essential:

Secure Recovery Methods: Offer various ways for users to regain access if they lose their authentication method, such as backup codes or email recovery links.

These recovery options must be secure against unauthorized access, and users should be advised on how to safely store backup codes.

4. Multi-Factor Authentication (MFA)

For sensitive actions, even a passwordless system may require additional verification:

Optional MFA: Allow users to enable MFA for added security during critical actions.
Contextual MFA: Implement MFA only for high-risk activities or unfamiliar login attempts.

5. Empower Users with Control

Give users control over their authentication methods:

Clear Communication: Ensure users understand their options regarding password deletion and what alternatives are available.
Notifications: Inform users immediately if they change their authentication method to prevent unauthorized changes.
Easy Re-enabling of Passwords: Allow users to reinstate their passwords easily if they encounter issues with alternative methods.

6. Compatibility with Older Systems

Not all systems support modern authentication methods yet:

Graceful Degradation: Ensure that users on older devices can still log in using traditional passwords if needed.
Device Compatibility: Confirm that your authentication methods work across various devices and operating systems.

7. Compliance with Regulations

Adhering to legal standards is crucial:

Regulatory Compliance: Make sure your system complies with regulations like GDPR or HIPAA when handling user data.
Best Practices for Data Security: Follow industry guidelines for encrypting authentication data and securely storing sensitive information.

Making passwords optional is a progressive move toward better account security and user satisfaction. However, it requires thoughtful planning to ensure users have reliable alternatives like biometrics or OTPs. Key considerations include providing strong alternatives, ensuring a smooth user experience, establishing secure recovery options, and maintaining compliance with regulations.

To facilitate this transition effectively, consider using tools like Hanko.io. Hanko offers robust solutions for implementing passwordless authentication seamlessly into your applications with their passkey API. By leveraging their technology, you can enhance security while simplifying the user experience.

Explore more about how Hanko can help you make the shift towards passwordless authentication here.

Hacktoberfest 🎃 oss.gg: Code, Conquer, and Win Big! 💻🎮📱

Teddy ASSIH — Fri, 04 Oct 2024 20:02:11 +0000

Hello, Open Source Enthusiasts! 👋

Hacktoberfest 2024 has officially kicked off, and oss.gg is excited to present a thrilling gamified experience for those looking to dive into their first open-source contributions and get all the fun from open source. This is a fun way to for participants to engage in both coding and non-coding tasks, earning points that serve as lottery tickets for exciting prizes at the end of the month.

What’s at stake? 🏆

You can look forward to an array of fantastic prizes, including:
MacBook Pro 2023 M3 14 💻
MacBook Air 2023 M3 15 💻
iPhone 16 (512GB) 📱
PlayStation 5 🎮
AirPods Pro (3rd Gen) (x2) 🎧
EPOMAKER EP84 Keyboard ⌨️
EPOMAKER x AULA F75 Keyboards (x2) ⌨️
A quirky brick 🧱 (Yes, you read that right!)

Here is how and where you can start 👇

1. FormBricks

Tech Stack: TypeScript, MDX, JavaScript, Dockerfile

Target Audience: UI/UX Designers, Survey Creators, Marketers

Overview: FormBricks is an open-source platform for creating and analyzing surveys with a no-code editor and customizable templates. It integrates with tools like Slack and Notion and supports self-hosting via Docker.

Contribution Opportunities:
Develop new integrations with external tools.
Enhance existing features or add new template formats.
Fix bugs and optimize performance.
Create documentation and tutorials.

2. OpenBB

Tech Stack: Python

Target Audience: Data Analysts, Finance Researchers
Overview: OpenBB simplifies access to financial data through a unified API, allowing users to retrieve information effortlessly from multiple sources.

Contribution Opportunities:
Integrate new financial data providers.
Enhance analytical tools for better user experience.
Collaborate on bug fixes.
Write documentation and tutorials.

3. Unkey

Tech Stack: TypeScript, Go, React, Next.js, Turborepo

Target Audience: Developers in API Management and DevOps

Overview: Unkey offers a straightforward API management platform with features like key management and analytics for large language models (LLM).

Contribution Opportunities:
Introduce new feature types or targeting rules.
Develop SDKs for additional programming languages.
Improve the web dashboard usability.
Document features with examples.

4. Papermark

Tech Stack: TypeScript

Target Audience: Privacy-Conscious Document Sharers

Overview: Papermark.io provides a secure document-sharing alternative with analytics support and custom branding options.

Contribution Opportunities:
Develop tagging or categorization features.
Create browser extensions for easier content saving.
Build a mobile app for document access on the go.
Enhance documentation and localization efforts.

5. Twenty CRM

Tech Stack: React, Apollo, GraphQL Codegen, Recoil, TypeScript, Jest, Storybook

Target Audience: Business Dashboard Developers

Overview: Twenty.com is an open-source CRM platform offering customizable solutions for managing customer relationships.

Contribution Opportunities:
Build new modules for various business functions.
Create integrations with third-party services.
Improve UI/UX for better user experience.
Contribute to user guides and developer documentation.

6. Hanko

Tech Stack: Go, TypeScript, Svelte

Target Audience: Authentication and Security Developers

Overview: Hanko eliminates passwords through secure passkey-based logins with easy integration options.

Contribution Opportunities:
Support additional authentication methods.
Conduct security audits to identify vulnerabilities.
Develop SDKs for easier integration.
Write comprehensive setup guides and API documentation.

7. Dub.co

Tech Stack: Next.js, TypeScript, Tailwind

Target Audience: UI/UX Designers and Marketers

Overview: Dub.co provides link management infrastructure tailored for marketing teams with advanced analytics capabilities.

Contribution Opportunities:
Develop new functionalities like custom domains or QR code creation.
Update documentation for newcomers.
Assist in bug fixes to enhance reliability.
Improve UI/UX design.

There are lot of fun in those challenges and awesome prizes to win. You can read more here.