Forem: Yoginth

Serving Open Graph to Bots at hey.xyz: Our Client-Side SPA Approach

Yoginth — Sun, 20 Apr 2025 06:28:23 +0000

At hey.xyz, we built a client-side SPA using Vite and React Router 7. But this created a challenge - how do you serve proper metadata to social media crawlers and search engines when your app renders client-side?

Our solution was to create a dual-architecture system:

Main Web App: CSR app built with Vite + React Router 7 hosted on Cloudflare Pages
OG Service: Minimal SSR Next.js app hosted on Railway that only renders metadata, no UI

The secret sauce is a Cloudflare Worker that acts as our traffic cop. It checks incoming requests for bot user agents, and:

If it's a regular user: Pass them to our slick CSR app
If it's a bot: Redirect to our specialized OG service

This is the Cloudflare Interface where we connect the Worker with the Web app

We've set a generous cache policy (30 days) for bot responses since our metadata doesn't change often.

This approach lets us keep our main app fast and interactive for actual users while still having proper social sharing and SEO. No need to sacrifice the benefits of a modern CSR app just to satisfy crawlers.

Here is the flow diagram of how things work

Honestly, this pattern is so clean and efficient - we're never going back to server-rendering our entire app just for bots.

This strategy helps us deliver millions of requests in a cost-efficient way, keeping our infrastructure costs low while providing the best experience for both users and search engines.

PS: Here is our Cloudflare worker code the checks for all requests

const botRegex = /(Bot|Twitterbot|facebookexternalhit|LinkedInBot|Slackbot|Discordbot|TelegramBot|WhatsApp|Googlebot|Bingbot|Applebot)/i;

export default {
  async fetch(request) {
    const userAgent = request.headers.get("user-agent") || "";

    // If not a bot, pass through
    if (!botRegex.test(userAgent)) {
      return fetch(request);
    }

    // If bot, rewrite to og.hey.xyz
    const url = new URL(request.url);
    const targetUrl = `https://og.hey.xyz${url.pathname}${url.search}`;

    const rewrittenRequest = new Request(targetUrl, {
      method: request.method,
      headers: request.headers,
      body: request.method !== "GET" && request.method !== "HEAD" ? await request.text() : null,
      redirect: "follow"
    });

    const response = await fetch(rewrittenRequest);

    const newHeaders = new Headers(response.headers);
    newHeaders.set("Cache-Control", "public, max-age=2592000, immutable");

    return new Response(response.body, {
      status: response.status,
      statusText: response.statusText,
      headers: newHeaders
    });
  }
};

Original version can be found here: https://world.hey.com/yoginth/serving-open-graph-to-bots-at-hey-xyz-our-client-side-spa-approach-8b4af2a3

How to ship small features rapidly to production 🚀 and what is feature flags

Yoginth — Sat, 09 Jan 2021 13:01:35 +0000

Hey folks 👋

I'm the creator of Taskord, I deploy Taskord more than 100 times daily.

In this article, I'm gonna explain how to ship rapidly to production without any error and let us see what the heck is Staff Ship and feature flags!

🌱 Planning

Let us consider we are building a brand new Explore page and /explore is going to be the URL. Plan about

How is the UI going to look
Do we have all UI components available
Data model and what are the tables we need to create for a database
Any blocking Issues

Don't think a lot and waste the time, we can add/improve it in the next Iteration.

🌵 First Pull/Merge Request

After the proper planning just go ahead and create the first page just saying Hello, World! and point it to /explore in your routes file.

After that commit and push to GitHub/GitLab and create your first pull request.

This step is optional if you are a solo developer, you can push all the way straight to main/master branch (but it is not suggested).

👨‍💻 Development

After creating the pull request start concentrating on developing the app. If you have any dependency on the backend team don't wait for them until they complete.

Instead, just mock the JSON Response and start developing the work, make sure to give the JSON Spec to the backend team to develop the API in such a way you want. If not we need to rework again based on their API response.

Communication and time are crucial.

🧪 Testing

After completing the development wait for the CI to become green for that pull request.

Once all the tests have been passed merge the branch to main/production.

Deploy the feature to your staging instance, so you can deploy to production servers without fear. Test everything well, create a small checklist and check everything is done and working fine in staging instance before moving to production.

What is feature flags/toggle?

Feature flags are simply a toggle button which has the ability to turn features of your application on/off easily based on condition.

🛡 Staff Release

After testing well, deploy main branch to production servers where the new feature exists.

Post in your internal slack that "Hey, we just shipped the explore page to our production servers 🐿, make sure to tun on staff ship. Feedbacks welcomed 😊"

Then sit back and relax for some time till the feedback arrives. If it has any bugs fix it ASAP.

By the way what is staff ship 🤔

Staff ship is a feature flag which is available only for site admins possibly mods, where admin can tun on the flag and check whether the feature is working or not.

When staff ship is enabled admins can see this special admin/performance bar above the navbar which is heavily inspired by GitHub.com

Taskord's admin bar

GitHub's admin bar (GH Enterprise)

Here is the sample video how staff ship works in Taskord, the staff ship is enabled when pressing backtick or pb shortcut key in the keyboard which is available only for admins.

👥 Beta Release

Release the /explore page for selected users, usually, you can do by shipping to

Users based on age
50% of platform users
Users with beta flag enabled, etc.

💬 Feedback

Feedbacks are critical, you will get a lot if the userbase is huge, make sure to evaluate quickly and fix the bugs in upcoming Iterations.

Automatic Error Tracking

Error Tracking is also a part of feedback, this need be done automatically. We use Sentry to track errors and patch the fix quickly.

This is how Sentry looks like

🌎 General Availability

If all settled and good to go, just go ahead and remove all the feature flags for /explore page. Make sure to keep an eye on Sentry for a few days.

⚠ Be careful

Prepare to revert the PR anytime if there is an issue in production ↩
Commit every change 😅

Hope this article helped you 😊

Happy Shipping 🚀

Taskord Changelog - Dec 27

Yoginth — Sun, 27 Dec 2020 14:40:58 +0000

Welcome to Taskord Changelog 📜, This is a weekly post where we share what we shipped to Taskord this week.

Visit Taskord: https://taskord.com

This week on Taskord

Added Sweetalert 2 for alerts ✅

RSS feed for User and Product's Tasks 🔊

Example feed: https://taskord.com/feed/user/yo

Security Logs for user account 📜

User reputation points log page ✨

Added keyboard shortcuts ⌨

Fix accessibility around the site 👁

Markdown support is enhanced 📝

User can now export their account logs 📜

User can now able to reset their account without deleting 🔃

Add Links Prefetch so the platform feels faster 🚀
JQuery is no more on Taskord 😊

Happy shipping ❤️

Taskord Changelog - Dec 21

Yoginth — Mon, 21 Dec 2020 02:15:04 +0000

Welcome to Taskord Changelog 📜, This is a weekly post where we share what we shipped to Taskord this week.

Visit Taskord: https://taskord.com

This week on Taskord

Brand new Icon set, Thanks to Heroicons, no more slowly Font Awesome

Users can now set account Status

Improved web vitals score

Dark mode is now even darker

Added Product avatar on the popover

Improved sidebar design
Now Images are served from Imagekit CDN
Lot more security and performance improvement

Happy shipping ❤️

Taskord is out now 🎉

Yoginth — Sat, 17 Oct 2020 08:27:18 +0000

Hey folks 👋

We are now live on ProductHunt https://meow.ph/taskord

For the past three months, I was working on a project called Taskord as a part of 100 Days of Code. Fortunately, the project now turns into a public product.

Make sure to signup today https://taskord.com

What is Taskord?

Taskord is free open source social media for tasks! where users can post public and private todos, ask questions, and launch products. Taskord helps you to get things done together with the members of the community.

Features

Login / Signup
- Secured PWNED Validator 🛡
- Social auth via Google or Twitter 🌐
- Magic Link authentication 🔮
Tasks
- Pending Tasks ⌛
- Done Tasks ✅
- Due date 📅 (only for patrons)
- Multiple Image Upload 📸
Questions
- Answers 💬
- Trending Questions 📈
- Patron's Questions 🔒 (only for patrons)
Product
- Product related tasks ✅
- Subscribe ➕
- Release Updates 📦
- Stats 📊 (Coming Soon)
User
- User related tasks ✅
- Follow ➕
- Reputations 🎮
- Goals 🎯
- Stats 📊 (Coming Soon)
Integration
- GitHub 🐙
- GitLab 🦊
- Webhook ⚓
Deals 🎁 (only for patrons)
Meetups 🤝 (coming soon)
Dark mode 🌑 (only for patrons)

We are looking forward to your feedback, roasts, bugs, features, anything you want!

Thank you.

Taskord Changelog - Oct 13

Yoginth — Tue, 13 Oct 2020 03:04:16 +0000

Welcome to Taskord Changelog 📜, This is a weekly post where we share what we shipped to Taskord this week.

Visit Taskord: https://taskord.com

This week on Taskord

Implemented Abuse detection and prevention system to prevent DOS and bad users

Fix alert's close buttons

Display Product members in the product card

Able to post tasks from the product page for that particular product without the hashtag
Turbolinks is back now with more fluidity
Fixed webhook bugs no more 500
Git webhook allow only commits from the default branch

Make sure to signup today! https://taskord.com/register

Thanks 🙏

For providing constant feedback and feature requests!

Filip TroníčekFollow

Open Source for life <3

Happy shipping ❤️

Tips to prevent spam ☔️

Yoginth — Thu, 08 Oct 2020 13:54:35 +0000

Hey folks 👋,

Hope you all doing good!

As we all know recently dev.to got flooded with spam, read more here.

Spam sucks

Ben Halpern for The DEV Team ・ Oct 6 '20

#meta #security

In this article let us see how to detect and prevent spam automatically in your social platform. Here as an example, I'll show how we fight for spam in Taskord (https://taskord.com).

Detection

What is rate-limiting?

Rate limiting is the control of the number of requests per unit time. It can be applied to ports, IP, routes, users, etc. It can efficiently block out malicious bots.

Throttle Web requests

Taskord is built using Laravel, which has inbuilt throttler for requests.

This snippet is used in routes/web.php

Route::group(['middleware' => ['throttle:30,1']], function () {
  // All Routes
});

throttle:30,1 means it allows 30 requests per minute.

When a user tries to abuse the platform by clicking links back and forth from the same IP address they will hit the limit and it will automatically be redirected to the warning page.

I tried to simulate simple DOS attack by using curl from multiple terminals, this is what I end up with.

Throttle API requests

API endpoints are most vulnerable one, most of the attackers target on these. It is very important to rate limit API requests

The same rules can be applied in what we followed in throttling the web requests. In Taskord we use GraphQL API so we have added some additional steps to prevent spam.

For Queries requests, we do simple 30 reqs / min throttling. But for Mutations request, we flag the user if they rate-limited twice in a short period of time. (User can ask admins for more requests and we will validate the use case and provide them with additional points).

Prevention

Block disposable emails

Blocking disposable emails is the very first important step to prevent spam. So make sure to implement disposable email blocker.

Multiple accounts on the same IP

If multiple users registered or logged with the same IP the system will automatically flag all the users connected with the same IP and it will notify the admins and we review it manually if they violated the terms we will suspend their account if not we will un-flag them.

Limit the functionality

Limit users with 3 types

Unverified - User can do everything except liking and creating the post.
Flagged - User can log in but they can only see other's activities, and the profile is hidden from the public.
Suspended - User can do anything, not even log in.

Rate limit based flagging

Count the throttled requests, if the limit is N and the account exceeds N+10 within mentioned time requests, the system will automatically flag the account.

$throttler = Throttle::get(Request::instance(), 20, 5);
$throttler->hit();
if (count($throttler) > 30) {
    Helper::flagAccount(Auth::user());
}
if (! $throttler->check()) {
    return session()->flash('error', 'Your are rate limited, try again later!');
}

Hide entities

You can hide only the particular entities without affecting the user.

You can use the following package to prevent DOS attacks.

For Laravel

GrahamCampbell / Laravel-Throttle

A rate limiter for Laravel

Laravel Throttle

Laravel Throttle was created by, and is maintained by Graham Campbell, and is a rate limiter for Laravel. Feel free to check out the change log, releases, security policy, license, code of conduct, and contribution guidelines.

Installation

This version requires PHP 8.1-8.4 and supports Laravel 10-12.

Throttle	L5.5	L5.6	L5.7	L5.8	L6	L7	L8	L9	L10	L11	L12
7.5	✅	✅	✅	✅	✅	✅	❌	❌	❌	❌	❌
8.2	❌	❌	❌	❌	✅	✅	✅	✅	❌	❌	❌
9.0	❌	❌	❌	❌	❌	❌	✅	✅	❌	❌	❌
10.3	❌	❌	❌	❌	❌	❌	✅	✅	✅	✅	❌
11.0	❌	❌	❌	❌	❌	❌	❌	❌	✅	✅	✅

To get the latest version, simply require the project using Composer:

$ composer require "graham-campbell/throttle:^11.0"

Once installed, if you…

View on GitHub

For Rails

rack / rack-attack

Rack middleware for blocking & throttling

⚠️ You are viewing the development's branch version of README which might contain documentation for unreleased features For the README consistent with the latest released version see https://github.com/rack/rack-attack/blob/6-stable/README.md.

Rack::Attack

Rack middleware for blocking & throttling abusive requests

Protect your Rails and Rack apps from bad clients. Rack::Attack lets you easily decide when to allow, block and throttle based on properties of the request.

See the Backing & Hacking blog post introducing Rack::Attack.

Getting started

Installing

Add this line to your application's Gemfile:

# In your Gemfile

gem 'rack-attack'

And then execute:

…

View on GitHub

Thanks ❤

Happy Shipping 🚀

Taskord for next Hacktoberfest

Yoginth — Wed, 07 Oct 2020 11:31:17 +0000

I heard that there will be a chance GitLab will be a part of Hacktoberfest from 2021!

My current project Taskord is hosted on GitLab

https://gitlab.com/taskord/taskord

Taskord mobile is hosted on GitHub

https://github.com/filiptronicek/taskord-mobile

Taskord Changelog - Oct 6

Yoginth — Tue, 06 Oct 2020 02:24:57 +0000

Welcome to Taskord Changelog 📜, This is a weekly post where we share what we shipped to Taskord this week.

Visit Taskord: https://taskord.com

This week on Taskord

Design Improvements, more curved edges

Block Disposable emails to fight spam users

Hidden Task for moderators to hide a task from the public

New Sponsors Page

Improved Dark mode by reducing color complexity and using native Bootstrap colors

Personal Access Token to access our GraphQL API

Repo link support for products, currently GitHub, GitLab and Bitbucket links are supported

Dynamic favicons for a website link in product and user's social section
Improved Font Awesome speed

Make sure to signup today! https://taskord.com/register

Thanks 🙏

For providing constant feedback and feature requests!

Filip TroníčekFollow

Open Source for life <3

Happy shipping ❤️

Taskord Changelog - Sep 29

Yoginth — Tue, 29 Sep 2020 10:21:12 +0000

Welcome to Taskord Changelog 📜, This is a weekly post where we share what we shipped to Taskord this week.

Visit Taskord: https://taskord.com

This week on Taskord

GraphQL API is shipped with all basic queries and some mutations. Currently, it is behind the Staff's feature flag, DM us on Twitter to give you early access.

Added Separate Comment Page

Added Horizon to Speed up and monitor Redis Jobs
Added Daily Goals, If the goal is reached the user will be praised by additional Reputations, Thanks @filiptronicek for working on Praising Algorithm

Make sure to signup today! https://taskord.com/register

Thanks 🙏

For taking care of marketing stuff!

Aadithyan RajeshFollow

13 y/o, Maker, Designer, Developer.

For providing constant feedback and feature requests!

Filip TroníčekFollow

Open Source for life <3

Happy shipping ❤️

Tech Stack that powers Taskord ⚡

Yoginth — Mon, 28 Sep 2020 06:19:31 +0000

What is Taskord?

We released our alpha version to the public a couple of weeks before and we got some awesome feedback!

Join Taskord today https://taskord.com

Tech Stack powering Taskord

🐘 PHP and Laravel

PHP is our primary language and supported by the Laravel framework to make Taskord more fluid, fast and secured

🦑 Laravel Livewire

Livewire is a full-stack framework for Laravel that makes building dynamic interfaces simple, without leaving the comfort of Laravel.

💾 MySQL

MySQL is our primary database which has around 25 tables which are powered by InnoDB storage engine

Ⓜ️ Memcached

Memcached is used extensively across all models to provide a blazing-fast experience, here is the shot of with and without Memcache.

Look at response total

Without Cache	With Cache

🚦 Redis

Redis is used to

Send web notification
Send email notification
Queue Background Jobs

we initially used the database to queue those jobs, but it was too slow and inconsistent so we finally found an alternative and moved to Redis.

☯️ Laravel Horizon

Horizon provides a beautiful dashboard and code-driven configuration for your Laravel powered Redis queues. Horizon allows you to easily monitor key metrics of your queue system such as job throughput, runtime, and job failures.

⚡ AWS Lightsail

Lightsail is an easy-to-use cloud platform that offers you everything needed to build an application or website, plus a cost-effective, monthly plan.

It feels more like a DigitalOcean inside AWS, It is more powerful and simple to manage

💌 AWS SES

Amazon Simple Email Service (SES) is a cost-effective email service built on the reliable and scalable infrastructure that Amazon.com developed to serve its own customer base. With Amazon SES, you can send transactional email, marketing messages, or any other type of high-quality content.

Taskord has powerful notification preference where the user can turn off and on anytime.

⛅ Cloudflare

Cloudflare is used in Taskord to increase our security and speed

Our primary domain name is purchased from Namecheap but we are in the process of transferring it to Cloudflare.

🐶 Datadog

Datadog is a monitoring service for cloud-scale applications, providing monitoring of servers, databases, tools, and services, through a SaaS-based data analytics platform.

Here is our Public Dashboard you can take a look at how the resource is used.

🐛 Sentry

Sentry is our Raven to carry an error/exception that user face in the production instance.

🦊 GitLab

Taskord is open-source and we hosted it on GitLab https://gitlab.com/taskord/taskord

We use these features extensively

Tags and Release
CI to Test inside the GitLab Infrastructure
CD to deploy the code to our production server
Security Dashboards
On-Demand DAST Scanning
Dependency Management
License Compliance
Threat Monitoring
Error Tracking
Metrics (Planned)
Feature Flags (Planned)

💰 Paddle

The paddle is our payment gateway provider for patron plans if someone subscribed to one our plan the webhook response will be sent to our servers and enable Patron features for that particular user automatically.

We are also using some awesome microservices to make everything simple and fast.

Join Taskord today and you have a possibility to get free Patron plan for the lifetime 🎉

Thank you!

Feedback on my new product

Yoginth — Thu, 24 Sep 2020 07:13:45 +0000

Hi folks 👋

I have build a new product called Taskord in 1.5 months in my #100DaysOfCode Challenge, currently, we are in public alpha and we planned to release it to the public this month.

What is Taskord?

I'd greatly appreciate any feedback 💬.

🔗 https://taskord.com

Go ahead and roast 🔥 the product in comments 🤝!

Forem: Yoginth

Serving Open Graph to Bots at hey.xyz: Our Client-Side SPA Approach

How to ship small features rapidly to production 🚀 and what is feature flags

🌱 Planning

🌵 First Pull/Merge Request

👨‍💻 Development

🧪 Testing

What is feature flags/toggle?

🛡 Staff Release

By the way what is staff ship 🤔

👥 Beta Release

💬 Feedback

Automatic Error Tracking

🌎 General Availability

⚠ Be careful

Taskord Changelog - Dec 27

Taskord Changelog - Dec 21

Taskord is out now 🎉

What is Taskord?

Features

Taskord Changelog - Oct 13

Thanks 🙏

Filip TroníčekFollow

Tips to prevent spam ☔️

Spam sucks

Ben Halpern for The DEV Team ・ Oct 6 '20

Detection

What is rate-limiting?

Throttle Web requests

Throttle API requests

Prevention

Block disposable emails

Multiple accounts on the same IP

Limit the functionality

Rate limit based flagging

Hide entities

For Laravel

GrahamCampbell / Laravel-Throttle

A rate limiter for Laravel

Laravel Throttle

Installation

For Rails

rack / rack-attack

Rack middleware for blocking & throttling

Rack::Attack

Table of contents

Getting started

Installing

Taskord for next Hacktoberfest

Taskord Changelog - Oct 6

Thanks 🙏

Filip TroníčekFollow

Taskord Changelog - Sep 29

Thanks 🙏

Aadithyan RajeshFollow

Filip TroníčekFollow

Tech Stack that powers Taskord ⚡

What is Taskord?

Tech Stack powering Taskord

🐘 PHP and Laravel

🦑 Laravel Livewire

💾 MySQL

Ⓜ️ Memcached

🚦 Redis

☯️ Laravel Horizon

⚡ AWS Lightsail

💌 AWS SES

⛅ Cloudflare

🐶 Datadog

🐛 Sentry

🦊 GitLab

💰 Paddle

Feedback on my new product

What is Taskord?