DEV Community: Chocoscoding - Oyeti Timileyin

Designing Fault-Tolerant API Through Idempotency

Chocoscoding - Oyeti Timileyin — Mon, 09 Nov 2026 07:11:45 +0000

So imagine I’m reading your post. I click Like, the heart turns red, and the request times out. My frontend’s retry logic sends it again.

This time, the success reply arrives. The heart turns grey.
I know I liked your post. But your code apparently has other plans because its not FAULT TOLERANT.

Fault tolerance is an application’s ability to keep working correctly when part of the system fails. Retrying can help us recover from a temporary connection failure, but our API has to handle the second attempt safely.

For database writes, there’s a catch. Saving the change and delivering the HTTP response are separate steps. The connection can drop after the database commits, leaving the client unsure whether the write succeeded.

Let’s follow that click through MongoDB and PostgreSQL on Neon, then make the retry safe in both.

One click became two requests

Our endpoint is POST /posts/42/toggle-like. It reverses the current state. If my like exists, remove it. Otherwise, create it.

Here’s how one click manages to do both.

The API saves my like.
The connection drops before the success reply reaches my browser.
The browser retries.
The API finds the like and removes it. This reply arrives successfully.

The first write succeeded. Only its reply was lost.

The retry recovered from the connection failure, but it also reversed the user’s action. Making this endpoint fault tolerant means handling both parts correctly.

Our like can live in a MongoDB document or a PostgreSQL row on Neon. Either database will execute a fresh request to remove it. Our API told it to toggle, and it followed the instruction.

Could we wrap the toggle in a transaction?

Yes. A transaction groups database changes so they all commit together or all roll back. That’s atomicity. MongoDB supports transactions across documents on replica sets and sharded clusters. Neon supports PostgreSQL transactions. MongoDB transactions · PostgreSQL transactions

In our example, though, the first transaction already committed before the reply disappeared. The retry starts a new transaction and reverses the like.

Both transactions succeed. I’ve now unliked your post with excellent data integrity.

A row lock also ends when its transaction finishes, leaving the later retry free to make another change. PostgreSQL row locks

We need to change what repeating the request does.

Make the request say what I mean

Instead of asking the API to toggle, ask it to make sure my like exists.

The first request creates it. The retry finds it and leaves it there.

That’s idempotency; repeating the request has the same intended effect as sending it once. The responses can differ while the intended effect stays the same.

We can use PUT /posts/42/like to ensure the like exists. For an unlike, DELETE /posts/42/like ensures the like is absent.

The handler’s database operation must implement that promise. Changing the HTTP verb alone leaves the original toggle behaviour in place.

MongoDB can create a missing like with an upsert. PostgreSQL on Neon can use INSERT … ON CONFLICT DO NOTHING. Both need a unique rule for the user-and-post pair so simultaneous requests also produce one like.

Implementation examples

MongoDB

Create the unique index once. Then use the upsert in the request handler, taking userId from the signed-in session.

// One-time setup
await likes.createIndex(
  { postId: 1, userId: 1 },
  { unique: true }
);

// In the PUT handler
await likes.updateOne(
  { postId, userId },
  { $setOnInsert: { likedAt: new Date() } },
  { upsert: true }
);

An existing like keeps its original timestamp.

PostgreSQL on Neon

Give the likes table a primary key on (post_id, user_id), then run this parameterised query.

INSERT INTO likes (post_id, user_id)
VALUES ($1, $2)
ON CONFLICT (post_id, user_id) DO NOTHING;

The retry finds the existing pair and leaves it alone.

If you keep a separate like counter, increase it only when a new like was inserted, in the same transaction.

What if I need to keep the toggle endpoint?

The PUT approach above repeats the same desired state. If we keep POST /posts/42/toggle-like, we need a way to recognise that a particular action already happened.

Give each deliberate click an idempotency key. This key identifies one action across all its retries. The client reuses it when retrying and generates a new key for a new deliberate click.

In one transaction, claim the key under a unique constraint scoped to the user and endpoint, apply the toggle, and save its result. When the same key comes back, return the saved result.

Now test the exact failure. Let the write succeed, drop its HTTP reply, and retry. There should still be one like when you refresh.

Whether the like lives in MongoDB or Neon, both attempts now leave us with the result we wanted. One click. One like.

So if I liked your post. The heart should stay red 😂.
I hope this helps you and can guide in making your code

Thanks for reading 👍

Remote Work: Local vs Global, Which One Should You Pick?

Chocoscoding - Oyeti Timileyin — Thu, 05 Nov 2026 21:32:43 +0000

Hello there, future remote worker! 👋 Have you ever thought about working from home, or even from a different country? It's a wonderful idea, and many people are choosing this path. In fact, many folks in US will be working remotely in 2027. This shows how popular remote work has become!

But here's something important to know....

Working from home, or from another country entirely, is a normal career path now. But "remote" is not one thing. There are two very different versions of it:

Remote worldwide: you work for a company from anywhere in the world.
Remote local: you work from home for a company in your own country. Both are remote. They lead to very different lives. Here's how to think about the choice.

Remote Worldwide: Work From Anywhere

You work for a company regardless of where you live. Maybe a beach, maybe a cafe in a city you've never been to before.

-Why it's worth it

Money goes further. You can earn a salary set by a strong economy while living somewhere cheaper.
Broader experience. You work with people across cultures, which sharpens how you communicate and solve problems.
Async skills. You get very good at written communication and working with people you rarely see live, a skill every distributed team values.

-What to watch for

Time zones. ⏰ If your team is on the other side of the world, early mornings and late calls come with the job.
Taxes and legal rules. Cross-border contracts can get complicated. You may need professional help.
Isolation. Being far from your team all the time can wear on you. ## Remote Local: Stay Close to Home

You still work remotely, but for a company based in your own country.

-Why it's worth it

Simpler taxes. No cross-border rules to untangle.
Sane meeting hours. Your team is in the same or a nearby time zone, so work-life balance is easier to protect.
Stronger team bonds. Meetups and real friendships are easier when everyone is in the same country.
Lower daily costs. No commute, no office wardrobe, no buying lunch every day.

-What to watch for

Lower pay ceiling. Especially if local salaries are low where you live.
Fewer openings. You're fishing in a smaller pond than the global market. ## So, Which One Is Right for You?

Go remote worldwide if:

You want to maximize earnings and can handle some complexity
You enjoy new experiences and don't have many commitments tying you to one place
You're strong at online communication and can manage time zone gaps
Go remote local if:
You value stability and predictability
You want plenty of time with family and friends
You want strong local connections and lower day-to-day costs

-A Simple Plan Based on Where You Are Now

Currently in an office?
Start with remote jobs in your own country. Learn how to work from home well first. Get comfortable with async tools, and connect with other remote workers to learn from their setups.

Already remote local?
Decide what you want next: more money, travel, or staying put. Research global roles to see which skills they ask for, and talk to people already working remote worldwide.

Thinking of switching paths?
List the pros and cons for your specific life and career. And remember, this isn't permanent. Plenty of people move between local and global roles over their careers and pick up valuable skills along the way.

-The Takeaway

Remote work is here to stay. Whether you work from your hometown or from across the world, pick the path that fits your goals and the life you want.

The world can be your office. 💻

Looking for remote roles? I am part of the devs at Remote Worldwide, a board of vetted remote jobs open to anywhere in the world, plus AI tools to help you land them. Give it a shot

Please ask any questions you may have and if you want 1 month free on remoteworldwide. Just signify or hit me up on Linkedin

Programming language quirks

Chocoscoding - Oyeti Timileyin — Thu, 16 Jul 2026 02:08:04 +0000

Undo is to remove or reverse actions right!!!!

So why is unshift used to add to an array in JS? 😅

Continue the thread by commenting with yours in the comments section.
Keep it rolling

TypeScript Patterns for Environment Variables

Chocoscoding - Oyeti Timileyin — Tue, 16 Jun 2026 00:22:00 +0000

Yesterday, as I was working on a CORS configuration, AI generated a block of code for me:

const allowedOrigins = [
  process.env.FRONTEND_URL || "http://localhost:3000",
  process.env.ADMIN_URL || "http://localhost:3001",
].filter(Boolean);

I was wondering... why use .filter(Boolean) here? 🤔 The fallbacks already guarantee strings.

So I hovered on the variable. The type definition read:

const allowedOrigins: string[]

Fine. Made sense. But then I got curious. What if I removed the hardcoded fallbacks?

const allowedOrigins = [
  process.env.FRONTEND_URL,
  process.env.ADMIN_URL,
].filter(Boolean);

My type definition changed to:

const allowedOrigins: (string | undefined)[]

I was shocked. I just filtered the array. How can TypeScript still think there's an undefined in there?

First: What Does `.filter(Boolean)` Even Do?

Boolean used as a filter function removes any falsy value from an array:

false
null
undefined
0
""
NaN

So:

["https://app.com", "", undefined].filter(Boolean)
// Result: ["https://app.com"]

At runtime, this works exactly as you'd expect. No undefined survives. So why does TypeScript disagree? 🤷‍♀️

The Real Answer: TypeScript Doesn't Run Your Code

TypeScript is a transpiler. It doesn't execute .filter(Boolean) -> it only looks at types.

When it sees this:

array.filter(Boolean)

It knows the callback returns a boolean. But it doesn't know what that means for the type of the elements that survive. It can't infer "if Boolean(x) is true, then x must be a string." So the undefined stays in the type — even though it'll never actually be there at runtime.

That's the gap: your runtime behavior is correct, but your types are lying.

The Fix: Type Predicates

TypeScript lets you close that gap with a type predicate, a way of explicitly telling the compiler what a filter function guarantees:

const allowedOrigins = [
  process.env.FRONTEND_URL,
  process.env.ADMIN_URL,
].filter((origin): origin is string => Boolean(origin));
// Type: string[] ✅

The origin is string part is the predicate. It's a promise to the compiler: "if this function returns true, the value is definitely a string." TypeScript trusts that and narrows the type accordingly.

The Reusable Helper

If you're doing this pattern often across a codebase, pull it into a small utility:

function isDefined<T>(value: T | undefined | null): value is T {
  return value != null;
}

Then:

const allowedOrigins = [
  process.env.FRONTEND_URL,
  process.env.ADMIN_URL,
].filter(isDefined);
// Type: string[] ✅

Reusable, self-documenting, and sexy 😍. I personally prefer this.

Back to the Original Code

So why did the AI-generated version with the || fallbacks give string[] without needing a predicate?

const allowedOrigins = [
  process.env.FRONTEND_URL || "http://localhost:3000",
  process.env.ADMIN_URL || "http://localhost:3001",
].filter(Boolean);

Because process.env.X || "fallback" always evaluates to a string. The fallback string covers the undefined case, so TypeScript already knows every element is a string before the filter runs. The .filter(Boolean) there is just a defensive move... useful if someone later adds an entry without a fallback, but not needed for type correctness.

Quick Reference

.filter(Boolean)
- type def: (string | undefined)[]
- Use when: You don't care about the resulting type.
.filter((x): x is string => Boolean(x))
- Type def: string[]
- Use when: Inline, one-off.
.filter(isDefined)
- Type def: string[]
- Use when: Reusable across a codebase.
process.env.X || "fallback"
- Type def: string
- Use when: You want a guaranteed default.

The lesson: filter(Boolean) is a runtime thing that TypeScript treats as a black box. When you need your types actually to reflect what's in the array, reach for a type predicate. Small change, honest types.

Thanks for reading 👍

AI subsidy removed... Is the bubble about to burst?

Chocoscoding - Oyeti Timileyin — Fri, 12 Jun 2026 14:16:32 +0000

After 2 years of being constantly told that AI would take jobs, replace people, and disrupt markets... the narrative is finally shifting.

Companies are now paying significantly more for AI just to handle routine tasks. Developers aren't immune either; Claude Pro plans are hitting weekly limits faster than ever on prompts that used to cost very little. GitHub Copilot has also become considerably more expensive following its change to a new billing model (Usage is now measured in AI credits — 1 credit equals $0.01 USD).

But why did it get so expensive all of a sudden?

AI runs on serious hardware. The way it uses 10 .md instruction files and fixes your bug in a single prompt; that isn't cheap to run. The compute costs behind every interaction are real and significant.

So why were we paying so little for so long?

AI companies needed people to use the product, get familiar with it, and let it become a core part of their workflow. Telling people to pay $100 upfront for unproven software was never going to work. So they did something smarter:

Step A: Raise substantial funding
Step B: Use it to subsidize the cost of AI, making it cheap or free
Step C: Accelerate adoption and build dependency
Step D: Roll pricing back to levels that actually sustain a business

It's a classic land-and-expand play, and it worked. But now we're in Step D.

So does AI become a premium tool only the privileged can fully use?

That question is becoming harder to dismiss. Even major players are feeling the pressure.

Bryan Catanzaro, Vice President of Applied Deep Learning at Nvidia, suggested that AI adoption isn't actually reducing labor costs and, in some cases, may exceed the cost of the employees it was meant to replace.

"For my team, the cost of compute is far beyond the costs of the employees," he told Axios.

Microsoft has reportedly begun canceling licenses for its engineers to use Anthropic's Claude, citing high costs — raising serious questions about the long-term economics of enterprise AI adoption.

And then there's what Sam Altman said during a virtual interview at a Commonwealth Bank of Australia conference:

"I don't think we're going to have the kind of jobs apocalypse that some of the companies in our space advocate or talk about."
"I thought there would have been more impact on entry-level white-collar jobs being eliminated by now than has actually happened. I now think I understand more about why it hasn't, and I'm obviously grateful, but that is an area where my intuitions were just off."

Altman went on to say that the human dimension of work is harder to replace than anticipated. That people genuinely care about interacting with each other, not just getting tasks done.

"We really do care about our interactions with people," he added — which, he said, "updated me to thinking that the jobs picture is likely to be very different than we thought."

The CEO of Linear put it well on X:

What actually happens next

My honest opinion: costs keep rising as companies don't want to fall into massive loss, and spending tokens carelessly becomes a real consideration. Developers will need to be more deliberate and write more of their own code again 😮‍💨.

Companies will start hiring again. But not for the roles that AI has genuinely absorbed: basic, repetitive, well-defined tasks.

The demand will be for people who can create, build, and maintain processes that produce results efficiently, with or without AI. Architect-level, senior, and even solid mid-level roles. People who think in systems, not just syntax.

The AI-replaces-everyone story was always too simple. What's emerging is more nuanced: AI compresses the value of shallow work and amplifies the value of deep work. If you can do the latter, you're more relevant than ever.

Thanks for reading 👍

Why Sell Software If Anyone Can Make It?

Chocoscoding - Oyeti Timileyin — Mon, 04 May 2026 13:30:04 +0000

Making yogurt at home isn't hard. You can control the sugar, the fat, add any flavour you want. Free from the tyranny of Big Yogurt!

Yet somehow, Danone is still doing fine.

Same goes for home-brewed beer, homemade bread, 3D printing. All great hobbies. All more accessible than ever. None have actually disrupted their industries.

Here's why:

Better tools raise the floor and the ceiling. The hobbyist gets better, but so does the dedicated team whose entire job is perfecting that one product.

The gap doesn't close. It just moves up.

Software is the same story.
Yes, a non-technical founder can vibe-code an MVP today. But that MVP still hits a wall when real users show up, payments need to work, and Safari breaks something. I've literally fixed these apps for a living. The demand for "please save my AI-built app" is very real.

Most people don't want to build their own software anyway. They want the problem solved, the thing to work, and support when it breaks.
AI doesn't change that deal. It just changes what's possible on both sides of it.

So if you're thinking about building and selling software in 2026... don't let the boogeyman of hobbyists vibe-coding a replacement scare you out of it.

Share your thoughts and what you are building today.

Ps: If you are stuck with your App/Website, Hit me up or Contact on Fiverr

Built a 5k usd MRR app with AI but still needed a developer

Chocoscoding - Oyeti Timileyin — Tue, 21 Apr 2026 02:51:12 +0000

You see it everywhere you turn:

"I built this using just AI and im making 10K USD MRR"

"Just got funded 1 million dollars at 100 million USD valuation for my app i built with AI"

Well, I see it too... Initially, I was always thinking.
Damn! We(Devs) are so cooked 😬,
And more importantly… what about the next generation of devs?
Are they even going to want to enter this field anymore?

Questions that cast shadows of doubt about "Developers/Programmers relevance" would pop up.

Then something changed....

AI Bug Fixing in Freelancing

I went to fiverr and saw a trend... AI services were hot there.
But the ones that piqued my interest was:

AI-bug fixing, deployment and mvps

You see, AI still had to use the current architectures and systems that were already created.
But the average vibe-coding CEO didn't understand what the hell CI/CD was, or why their feature won't work on Safari, or how to stop bottleneck issues, or why GCP is returning an error.

Lovable, Bolt, Replit etc Their AI would always give them hopes even though its wrong or making things worse.

The fault isn't totally on the AI though. The startup founders who want to make their own 10K/month revenue app don't know how to best guide the AI. Garbage in, garbage out... except the garbage looks really confident and ships fast.

For simple-to-medium stuff? It works.
Missing semicolon, broken API call, quick UI tweak, adding automation flows... AI nails those

But here's what's also real:
Most of those AI-built service eventually ends up in front of a human developer.

Every single one of those AI codebases hits a wall. And when it does, someone posts on Reddit:

"Looking for a senior dev to untangle this mess. Will pay well."

The irony is beautiful. AI is generating a new category of freelance work: cleaning up after itself.

🔥 Why People Still Need You

Here's the pattern repeating across the freelance market right now:

Founder uses AI to build MVP
MVP grows, gets complex, accumulates technical debt
AI starts hallucinating fixes that break other things
Founder is confused, frustrated, and losing money
Founder hires a developer 🙂‍↕️ And that's not the only thing keeping developers essential:

Context is everything...
AI doesn't know your client's 8-year-old legacy codebase.
or
It doesn't know that the "bug" in the payment module is actually an intentional workaround nobody documented properly. 😂

Also, the stakes get real fast too...
Bug in production. Money bleeding. CEO panicking.

Nobody's waiting on a prompt chain. They're calling a developer or someone technical ASAP!

Debugging a function is one thing.
Designing the system, making tradeoffs, scaling it… that’s experience, which is highly relevant.

⚠️ The Bubble We May See

Now here's the part that genuinely worries me... and I don't see enough people connecting these dots.

The job shortage isn't just hurting developers today. It's quietly killing the next generation of developers before they even start.
Here's the thing...

Junior devs have always learned by getting hired. Working under seniors. Making mistakes in low stakes environments. Getting roasted in code review until they got good.

That pipeline is breaking.

Companies are cutting junior roles first.
Why hire a junior when AI can handle the boilerplate?

From a business perspective… it makes total sense.
But think about it for a second:

If no one hires juniors…
where do seniors come from?

The people entering the industry now are learning in a vacuum. Or not entering at all. Bootcamp enrollment is down. Too much reliance on AI without understanding concepts very well. CS grads are pivoting out. The message young people are getting is clear...

so they think: "There are no jobs, so why bother? 🤷"

Advice: Please bother. Give it a shot... me and my peers won't be here forever. You are the future.

🌱 So Where Does This Leave You?

If you're a developer right now: employed, freelancing, or searching. Here's the real talk:

Short term: It's rough. Adapt your positioning. There's still space here... for specialists, for generalists, for everyone in between.
That PostgREST bottleneck issue you fixed that one time? Someone today is tearing their hair out over the exact same thing.

No knowledge is lost 😉.

Medium term: Demand is growing for developers who understand AI-generated code. Who can audit it, extend it, deploy it properly. That's a real thing now.

Long term: Niche down. Get so deep on your concepts that you're not just using AI... you're directing it. The developers who understand the fundamentals well enough to drive AI-aided development? They're going to produce results nobody else can replicate.

And if the pipeline breaks the way I think it is... those developers won't just be valuable. They'll be rare.

The startup founder still needs someone to help when the app has been down since yesterday evening, users are churning, and the AI says it's done while the feature is still not working.

So guys... Stay in the game.
The future isn’t fewer developers. It’s fewer average ones...👋👋

You can also check out my fiverr gig on AI app fixing and development.

Stop the `data.data` Madness: Building a Custom Axios Client in TypeScript

Chocoscoding - Oyeti Timileyin — Fri, 05 Dec 2025 17:15:41 +0000

I was recently working on a project where the backend team decided (wisely) to wrap every API response in a standard envelope:

{
  "message": "Success",
  "data": { "id": 1, "name": "John Doe" },
  "meta": { "page": 1, "total": 100 }
}

On the backend, this is clean and consistent. I actually love it.

But in React components, it turns the code into a repetitive nightmare.

Just look at this:

// 🤮 The Issue
const response = await axios.get('/users/1');

// Double data? Really?
const user = response.data.data; 
const message = response.data.message;

If I had to type response.data.data one more time, I was going to scream.

If you are a frontend developer working with a structured backend, you know this struggle.

Today, let’s fix this. We are going to build a Custom API Client in TypeScript that unwraps this envelope automatically, handles types safely, and keeps your component logic clean.

The Goal

We want to transform Axios so that when we call get, we receive the inner data immediately at the top level, fully typed.

Target Usage:

// 😍 The New Way
const { data, message, meta } = await apiClient.get<User>('/users/1');

// TypeScript knows 'data' is a User!
console.log(data.name); 

// ✅ Access the server message:
console.log(`Alert: ${response.message}`); 

// ✅ Meta data {page: 1, totalPages: 6, totalProducts: 120}
  console.log(`Current page: ${response.meta?.page}`);

Step 1: Define the Backend Contract

First, we need to tell TypeScript what the "Raw" response looks like coming from the server.

// The shape of the raw JSON from the server
export interface ApiResponse<T = undefined> {
  message: string;
  data: T | null;
}

// The shape when pagination metadata is involved
export interface ApiResponseWithMeta<T = undefined, M = undefined> {
  message: string;
  data: T | [];
  meta?: M;
}

Step 2: The "Typed" Response

Next, we define what we want our frontend to receive. We are going to "hoist" the message and meta fields up, so they sit right next to our actual data, removing that annoying nesting.

import { AxiosResponse } from 'axios';

// We omit the standard 'data' property and replace it with our own typed version
export interface TypedAxiosResponse<T = undefined> extends Omit<AxiosResponse, 'data'> {
  data: T | null; // The actual resource (User, Product, etc.)
  message: string; // Hoisted from the nested object
}

// A version for paginated responses
export interface TypedAxiosResponseWithMeta<T = undefined, M = undefined> extends TypedAxiosResponse<T> {
  meta?: M;
}

Step 3: The Magic Wrapper

Instead of using the raw axios instance directly in our components, we create an apiClient object. This acts as a Facade. It calls Axios, intercepts the result, and unwraps it before returning it to you.

Here is the logic:

import axios, { AxiosRequestConfig } from 'axios';

// 1. Create the base instance with your interceptors (Auth, Logging, etc.)
const baseApiClient = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_URL,
});

// 2. The Custom Client
export const apiClient = {
  get: async <T = undefined>(
    url: string,
    config?: AxiosRequestConfig
  ): Promise<TypedAxiosResponse<T>> => {

    // Call the raw axios instance
    const response = await baseApiClient.get<ApiResponse<T>>(url, config);

    // ✨ THE MAGIC: Remap response.data.data -> response.data
    return {
      ...response,
      data: response.data.data,    // Unwrapping happens here
      message: response.data.message,
    } as TypedAxiosResponse<T>;
  },

  // You can repeat this pattern for post, put, delete...
  post: async <T = undefined>(
    url: string, 
    data?: unknown, 
    config?: AxiosRequestConfig
  ): Promise<TypedAxiosResponse<T>> => {
    const response = await baseApiClient.post<ApiResponse<T>>(url, data, config);

    return {
      ...response,
      data: response.data.data,
      message: response.data.message,
    } as TypedAxiosResponse<T>;
  },
};

Step 4: Handling Pagination (The `meta` Field)

Sometimes you need that extra metadata (page numbers, total counts). Let's add a specific method for that so we don't clutter standard calls.

  getWithMeta: async <T = undefined, M = undefined>(
    url: string,
    config?: AxiosRequestConfig
  ): Promise<TypedAxiosResponseWithMeta<T, M>> => {
    const response = await baseApiClient.get<ApiResponseWithMeta<T, M>>(url, config);

    return {
      ...response,
      data: response.data.data,
      message: response.data.message,
      meta: response.data.meta, // Now easily accessible!
    } as TypedAxiosResponseWithMeta<T, M>;
  },

The Result

Now, look at how clean your service files or components become.

Before:

const getUser = async (id: string) => {
  const res = await axios.get(`/users/${id}`);
  // Hope you remember to check if res.data.data exists!
  return res.data.data; 
}

After:

interface User { id: number; name: string; }

const getUser = async (id: string) => {
  // Typescript infers 'data' is User, and 'message' is string
  const { data, message } = await apiClient.get<User>(`/users/${id}`);

  toast.success(message); // "User retrieved successfully"
  return data;
}

Bonus: Centralized Error Handling

Because we still use baseApiClient underneath, we can attach interceptors to handle 401s (Unauthorized) or 500s globally.

If your token expires, your base client can catch it, attempt a refresh, or redirect to login via next-auth before your component even knows something went wrong.

Summary

Don't let your backend structure dictate your frontend messiness. By creating a lightweight wrapper around Axios:

You stop typing .data.data.
You get perfect TypeScript autocomplete.
You separate your HTTP logic from your UI logic.

Happy coding! 🚀

Sitemap couldn't fetch in Google Search Console - fix

Chocoscoding - Oyeti Timileyin — Wed, 01 Jan 2025 13:27:12 +0000

To set up your site to be indexed by Google Search, you need to have a robots.txt file and a sitemap.xml file in your site.

Here’s how I set up my own sitemap and robots file using Next.js. My solution takes TypeScript files and converts them into .txt and .xml files, which are then placed in the public directory of the site.

robot.ts
This is the code for my robots.txt file:

import { MetadataRoute } from "next";

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: "*",
      allow: "/",
    },
    sitemap: "https://www.thook.xyz/sitemap.xml",
    host: "https://www.thook.xyz",
  };
}

sitemap.ts
Below is the code for generating my sitemap.xml file dynamically:

import { MetadataRoute } from "next";

export default function sitemap(): MetadataRoute.Sitemap {
  const routes: MetadataRoute.Sitemap = [
    {
      url: "",
      changeFrequency: "monthly",
      priority: 1,
    },
    {
      url: "/search",
      changeFrequency: "monthly",
      priority: 0.5,
    },
  ];

  return routes.map(({ url, ...rest }) => ({
    ...rest,
    url: `https://thook.xyz${url}`,
    lastModified: new Date(),
  }));
}

The Problem 🤔

While my robots.txt worked flawlessly, my sitemap.xml kept returning an error:

It seemed like Google Search Console had cached an old version of my sitemap, and nothing I did seemed to fix the issue.

The Solution 🚀

To work around this, I created a new sitemap2.xml file and placed it in the public directory of my Next.js application:

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
    <url>
        <loc>https://thook.xyz/</loc>
        <lastmod>2025-01-01T11:39:05.531Z</lastmod>
        <changefreq>yearly</changefreq>
        <priority>1</priority>
        <xhtml:link rel="home" href="https://thook.xyz/" />
    </url>
    <url>
        <loc>https://thook.xyz/search</loc>
        <lastmod>2025-01-01T11:39:05.531Z</lastmod>
        <changefreq>monthly</changefreq>
        <priority>0.8</priority>
        <xhtml:link rel="search" href="https://thook.xyz/search" />
    </url>
</urlset>

And just like that, Booom!💥.
Jan 1st problem solved ✅.

Lessons Learned 📚

Here’s what I learned about using Google Search Console:

Be patient: Google Search Console can take time to crawl and update your site. Don’t panic.
Try a fresh name: If you’re facing persistent errors, create a new sitemap with a different name that Google hasn’t cached yet.

Thanks for reading.

Download Video from s3 with Cloudfront, nodejs and react

Chocoscoding - Oyeti Timileyin — Sun, 22 Dec 2024 12:07:33 +0000

I never realized downloading a file on a button click could be such a headache, but here we are. After some trial and error, I did what we do best as developers—find solutions.

Here’s the situation:
I was using S3 and CloudFront for video file delivery. The videos were encrypted and access-restricted on the backend to ensure no one could directly grab them from my S3 bucket. Users had the ability to watch and download videos.

Attempt 1: Basic Download Logic

Initially, I tried the typical approach:

const handleDownload = () => {
    const link = document.createElement("a");
    link.href = videoUrl;
    link.download = `${title || "video"}-thook.mp4`; // Provide a default filename if `title` is unavailable.
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link); // Cleanup after the download is triggered
  };

This worked… sort of. Instead of downloading, it redirected to another page and started playing the video.

The culprit? I had set ContentType during the S3 upload process.

const param = {  
  Bucket: process.env.AWS_S3_BUCKET_NAME,  
  Key: `${directory}/${uuid()}-${file.originalname}`,  
  Body: file.buffer,  
  // ContentType: file.mimetype ❌ (Removed this)  
};  

await s3.upload(param).promise();

After removing the ContentType setting, files finally started downloading correctly on desktops.

Attempt 2: Mobile Safari and Other Browser Issues

The next problem? Safari on mobile devices and some other browsers still insisted on opening the video instead of downloading it.

To fix this, I decided to stream the video from the backend using Node.js and set appropriate headers to force downloads:

import axios from "axios";
const downloadWithSignedURL = async (req: Request, res: Response) => {
  const signedUrl = req.query.signedUrl as string;
  const filename = (req.query.filename as string) || "video.mp4";

  if (!signedUrl) {
    return res.status(400).send("Signed URL is required.");
  }

  try {
    // Fetch the video stream using axios
    const response = await axios.get(signedUrl, {
      responseType: "stream",
    });

    if (response.status === 200) {
      // Set headers to force download
      res.setHeader("Content-Disposition", `attachment; filename="${filename}-THOOK.mp4"`);
      res.setHeader("Content-Type", "video/mp4");

      // Pipe the video stream to the client
      response.data.pipe(res);
    } else {
      res.status(response.status || 500).send("Failed to fetch video.");
    }
  } catch (error) {
    console.error("Error handling download:", error);
    res.status(500).send("Failed to handle download.");
  }
};

//route.ts
...
router.get("/downloadVideo", DownloadController.downloadWithSignedURL);

On the frontend, I adjusted the logic to interact with this backend route:

//in react 

const handleDownload = () => {  
  const downloadUrl = `${API_ROUTE}/downloadVideo?signedUrl=${encodeURIComponent(url)}&filename=${encodeURIComponent(name || "video.mp4")}`;  
  window.open(downloadUrl, "_blank"); 
  };

Final Solution: Seamless Download Without a New Tab

To improve user experience, I modified the logic to directly trigger downloads without opening a new tab:

const handleDownload = () => {  
  if (!url) {  
    alert("Please provide the signed URL.");  
    return;  
  }  
  try {  
    const downloadUrl = `${API_ROUTE}/downloadVideo?signedUrl=${encodeURIComponent(url)}&filename=${encodeURIComponent(name || "video.mp4")}`;  

    const link = document.createElement("a");  
    link.href = downloadUrl;  
    link.setAttribute("download", name || "video.mp4");  
    document.body.appendChild(link);  
    link.click();  
    link.remove();  
  } catch (error) {  
    console.error("Download error:", error);  
  }  
};

And voilà! The download now starts immediately after clicking the button, with no interruptions.

So that is how I created the download feature you here:

Side Notes

Here are a few key insights from the process:

S3 ContentType Issues: Setting ContentType caused files always be in the specified format instead of downloading. Removing it fixed desktop downloads.
Browser Compatibility: Safari and some browsers required backend streaming with forced download headers for consistency.
Better UX: Dynamically creating an <a> element allowed downloads without opening new tabs, creating a smoother user experience.

Thanks for reading 🙇‍♂️.

Perfectly Qualified Yet Rejected? Here’s Why It Happens and What to Change

Chocoscoding - Oyeti Timileyin — Sun, 27 Oct 2024 22:34:06 +0000

It’s a common frustration for many job seekers: You’ve tailored your resume, crafted a great cover letter, and checked all the qualification boxes, yet you’re still facing rejection—or worse, not hearing back at all. If this sounds familiar, know that you’re not alone, and the reasons behind these rejections are often more complex than you might think.
In this post, we’ll explore some hidden challenges job seekers face today and offer actionable tips to help you overcome them.

Let's look at some common scenarios where highly qualified candidates still face rejection

The “Growth Facade”

Many companies post jobs to give an impression of rapid growth and expansion, even if they do not intend to fill the roles. This tactic sometimes used to boost company image or investor interest, can lead job seekers to waste time on positions that aren’t truly hiring.

What to Do: If you spot repeated job postings from the same company over time, it might be best to save your time and look elsewhere.

Remote isn't that straightforward

The term “Remote” has become a powerful draw for job seekers, but it doesn’t always mean “Remote Worldwide.” Many companies label positions as remote but restrict hiring to specific regions (EMEA, APAC, or only within a certain country) due to legal, logistical, or tax constraints. Often, these limitations aren’t disclosed in the job listing, leaving candidates disappointed when they’re automatically disqualified based on location.

What to Do: Look carefully for any region-specific language in the job posting and, if possible, search the company’s hiring FAQs or career page for more details. Job boards like We Work Remotely and Remote OK often filter jobs by region, which can save you time by showing positions that align with your location.

The “Employee Lock-Up”

Some companies post positions to relieve current employees under heavy workloads, even though they may not have immediate plans to hire. This tactic is often used to boost morale temporarily, by creating an impression that help is on the way.

What to Do: If you’ve applied to a role and don’t receive timely feedback or see the same listing repeated often, it might indicate that hiring isn’t a priority. Follow up on your application, and if you receive vague responses, consider exploring other options.

Reach Out to Recruiters Directly

Don't just apply to hundreds of roles and leave it there. Sending a LinkedIn message to recruiters shows initiative, sets you apart from the crowd, and builds rapport. Making a memorable impression could make the recruiter more inclined to pick you.

What to do: After applying, send a message to the recruiter on LinkedIn expressing your genuine interest in the role and highlighting something specific about the company that excites you. Personalized outreach shows initiative, making you more memorable than the average applicant.

Here are a list of good job boards to find remote worldwide jobs:

Worldwide Remote (This is a telegram channel that vets and post only Worldwide remote jobs) 😍✅.
RemoteOk
Remotive
WeWorkRemotely
Truly remote
Nodesk
Careervault
Workinstartups
Workingnomads
TrueUp 😍

Job hunting can feel like running a marathon—you’re giving it your all, but surprise hurdles pop up along the way. Don’t let them slow you down! Every setback is just part of the journey. Stay sharp, keep adjusting, and remember: every ‘no’ gets you closer to a ‘yes.’
Now, go turn those rejections into redirections! 🎉

Custom Cursor in 4 Simple Steps – No External Libraries Needed!

Chocoscoding - Oyeti Timileyin — Tue, 21 Nov 2023 19:46:26 +0000

Ever stumbled upon websites with mesmerizing cursors that take the user experience to the next level? You might think achieving that requires complex libraries or long styling, but it's actually easy.

In just four simple steps and a few lines of code, you can bring that magic to your site. Let's dive in and make your cursor stand out! 💻✨

Step 1: Set Up useRef and Attach to the Div

First things first, let's set up a useRef to grab our custom cursor div. This will serve as the canvas for our cursor movements.

import { useRef } from 'react';

const CustomCursor = () => {
  const cursorRef = useRef(null);

  return <div ref={cursorRef} className='custom-cursor' />;
};

export default CustomCursor;

Step 2: Style It Up with Some CSS Magic

Let's make our custom cursor visually appealing! Add this CSS code to give it a stylish look 🎇:

.custom-cursor {
  z-index: 1000;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  border: 1px solid #fff;
  pointer-events: none;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  position: fixed;
  overflow: hidden;
}

@media (prefers-color-scheme: light) {
  .custom-cursor {
    border: 1px solid #000;
  }
}
/* Feel free to customize the size, colors, and border according to your taste! */

Step 3: The Magic of useEffect

In this useEffect, we're creating a dynamic custom cursor for a React app. The mouseTransformer function adjusts the cursor's position based on mouse movement, providing a real-time, polished user experience. An event listener on the document triggers this function on mouse movement, creating a seamless dance between the cursor and user interaction.

import { useEffect, useRef } from 'react';
import './style.css'; // 🚀 Don't forget to import the CSS for your custom cursor!

const CustomCursor = () => {
  const cursorRef = useRef(null);

  useEffect(() => {
    // 🎨 Mouse transformation magic happens here!
    const mouseTransformer = (event) => {
      const { clientX, clientY } = event;
      const mouseX = clientX - cursorRef.current.clientWidth / 2;
      const mouseY = clientY - cursorRef.current.clientHeight / 2;
      cursorRef.current.style.left = `${mouseX}px`;
      cursorRef.current.style.top = `${mouseY}px`;
    };

    document.addEventListener('mousemove', mouseTransformer);

    // 🚀 Cleanup event listener on component unmount
    return () => document.removeEventListener('mousemove', mouseTransformer);
  }, []);

  return <div ref={cursorRef} className='custom-cursor' />;
};

export default CustomCursor;

Step 4: Import and Let the Magic Begin

import React from 'react';
import ReactDOM from 'react-dom';
import CustomCursor from './path/to/CustomCursor';

ReactDOM.render(
  <React.StrictMode>
    {/* Other components */}
    <CustomCursor />
  </React.StrictMode>,
  document.getElementById('root')
);

Just like that! In just 4 steps, you've crafted your very own React custom cursor without relying on external libraries. 🌈✨ Get creative, experiment with styles, and make your website stand out with a cursor that's as unique.!

Happy coding! 🚀🎨

DEV Community: Chocoscoding - Oyeti Timileyin

Designing Fault-Tolerant API Through Idempotency

One click became two requests

Could we wrap the toggle in a transaction?

Make the request say what I mean

Implementation examples

MongoDB

PostgreSQL on Neon

What if I need to keep the toggle endpoint?

Remote Work: Local vs Global, Which One Should You Pick?

Remote Worldwide: Work From Anywhere

-Why it's worth it

-What to watch for

-Why it's worth it

-What to watch for

-A Simple Plan Based on Where You Are Now

-The Takeaway

Programming language quirks

TypeScript Patterns for Environment Variables

First: What Does .filter(Boolean) Even Do?

The Real Answer: TypeScript Doesn't Run Your Code

The Fix: Type Predicates

The Reusable Helper

Back to the Original Code

Quick Reference

AI subsidy removed... Is the bubble about to burst?

But why did it get so expensive all of a sudden?

What actually happens next

Why Sell Software If Anyone Can Make It?

Here's why:

Built a 5k usd MRR app with AI but still needed a developer

AI Bug Fixing in Freelancing

🔥 Why People Still Need You

⚠️ The Bubble We May See

🌱 So Where Does This Leave You?

Stop the `data.data` Madness: Building a Custom Axios Client in TypeScript

The Goal

Step 1: Define the Backend Contract

Step 2: The "Typed" Response

Step 3: The Magic Wrapper

Step 4: Handling Pagination (The meta Field)

The Result

Bonus: Centralized Error Handling

Summary

Sitemap couldn't fetch in Google Search Console - fix

The Problem 🤔

The Solution 🚀

Lessons Learned 📚

Download Video from s3 with Cloudfront, nodejs and react

Attempt 1: Basic Download Logic

Attempt 2: Mobile Safari and Other Browser Issues

Final Solution: Seamless Download Without a New Tab

Side Notes

Perfectly Qualified Yet Rejected? Here’s Why It Happens and What to Change

The “Growth Facade”

Remote isn't that straightforward

The “Employee Lock-Up”

Reach Out to Recruiters Directly

Custom Cursor in 4 Simple Steps – No External Libraries Needed!

Step 1: Set Up useRef and Attach to the Div

Step 2: Style It Up with Some CSS Magic

Step 3: The Magic of useEffect

Step 4: Import and Let the Magic Begin

First: What Does `.filter(Boolean)` Even Do?

Step 4: Handling Pagination (The `meta` Field)