DEV Community: CodeBucks

I built & launched AI headshot generator in 2 weeks

CodeBucks — Wed, 11 Jun 2025 18:57:34 +0000

Hey everyone,

I'm a full-stack developer and have been fascinated by the progress in LLMs and image generation for the last year and a half. After seeing the AI headshot market explode, I noticed a common complaint: you'd pay for 100 images just to get a handful of good ones.

I knew I could do better by focusing on model quality and prompting. So, I challenged myself to build and launch a high-quality alternative from scratch in just two weeks.

Today, I’m excited to share that I launched Smart Headshots AI.

My 2-Week Sprint:

Frontend: Next.js (love the performance)
Backend: Supabase for everything - auth, database, storage
UI: Kept it dead simple internally, went all-out on the landing page using shadcn UI + Tailwind CSS
Payments: Switched to Dodo Payments (MOR) after hearing too many Stripe horror stories
Architecture: Everything runs through webhooks - payment providers talk to AI APIs seamlessly, deployed on vercel.

I use Cursor, so first I integrated supabase and dodo payments MCP servers, and created all required functions for the payments, auth and database. I spent more time on creating landing page since it's the first door that your customer will see. Analyzed few competitors and finalized one wireframe, provided it to claude sonnet 4.0 and voila! It generated very beautiful landing page, of course I spent few hours optimizing the landing page. Spent few more hours to make everything mobile responsive. I used Replicate for AI APIs.

What I Focused On:

Quality over Quantity: My main focus was on fine-tuning the model and prompt engineering to ensure a very high hit rate of professional, usable headshots.
User Experience: I kept the internal dashboard dead simple. Upload photos, pick your styles, and that's it. All the complexity is hidden. I poured most of my design energy into the landing page to build trust and clearly explain the value.
Landing Page: First impressions matter - made it convert

The Technical Stuff That Worked:

Supabase is great for rapid development
Webhook architecture kept everything decoupled and scalable
shadcn components saved me probably 20+ hours of custom CSS
Dodo Payments integration was surprisingly smooth

What I Learned:

Ship fast, iterate faster
Don't over-engineer v1 (guilty as charged on previous projects)
Payment processor choice matters more than you think
Quality beats quantity every time

For those who missed the link here it is: https://www.smartheadshots.ai/

Thanks for reading this far! I'm happy to answer any technical questions about the build process. If anyone would like to try let me know I can share few discount codes😉

We have just released AIdea Central - Sign up and get 100 credits

CodeBucks — Wed, 28 May 2025 05:35:41 +0000

We have just released an AI app, which contains functional e-commerce tools to creative restyle FX, we simplify AI for everyone. No need to figure out prompts / settings / correct model - We do it all for you!

AIdea Central does ALL of this in one platform:

✅ Professional product visuals in clicks
✅ Create video ads of your product in locations like Las vegas sphere, London streets n many more
✅ Virtual fashion try-ons that look REAL
✅ Create Infographics with just topic name
✅ Create cool looking neon company cards
✅ Turn yourself into a cartoon character
✅ Fun video effects
✅ Custom 3D avatars & toy packs of yourself
✅ Background swaps like magic

No prompts. No coding. No subscriptions to manage.
Plus we have simpler pricing structure!

🎁 Launch week: 100 free credits on signup + 25% off on first time deposit (code: AISIMPLIFIED)

Would love to get your feedback!
Here is the Link: Aidea Central

My personal favourite tool is: Product ad video generator where you can show poster of your product on locations like las vegas sphere, london streets etc.

10 Essential NPM Packages Every React.js Developer Should Master in 2025

CodeBucks — Wed, 21 May 2025 18:39:19 +0000

Alright, let's be real. If you're deep in the React trenches like I am, you know the usual suspects: React Router, Redux, maybe Axios for your data fetching. And yeah, they're great, staples even. But in 2025, just knowing the 'big three' (or four, or five...) isn't quite enough to really feel like you're flying, you know? My productivity, and honestly, my sanity, often comes down to those lesser-known, sometimes seriously underrated, npm packages. The ones that make you go, "Where have you been all my life?!"

So, I've been wanting to share a list of tools that have genuinely made a difference in my projects. We're not just talking about the obvious headliners here. We're diving into some hidden gems that React developers should know – the kind that can truly supercharge React apps and streamline your React workflow. Think React performance boosts that actually work, UI/UX gems that make users smile, React state management that doesn't make you want to pull your hair out, and React testing utilities that, dare I say, make testing less of a chore.

Each one I'm about to show you is a quick look: what it's for, why I think it's a game-changer, and a little snippet or tip to get you started.

1. Motion (Framer Motion) – React Animations Made Fun (and Easy!)

First up, let's talk about making things move. If you've ever wrestled with CSS transitions for anything more than a simple hover effect, you'll appreciate Motion (you might know it as Framer Motion). Their tagline is something like simple to start, fun to master, and honestly, they nailed it. I used to dread complex animations, but Motion genuinely makes adding fluid, professional-looking React animations to components... well, fun.

It's not just smoke and mirrors; it cleverly uses hardware-accelerated browser animations but gives you full JavaScript control. For me, this means I can achieve sophisticated motion design way more easily than trying to orchestrate a symphony of CSS keyframes. Want a quick fade-in? Check this out:

import { motion } from 'framer-motion';

<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} />;

And just like that – a smooth fade-in when your component mounts. No messy CSS. But it's not just fades; we're talking drag gestures, slick layout animations (my personal favorite for dynamic lists), SVG morphing etc. Let's face it, in 2025, users expect a certain level of polish, and animations are a huge part of that. Motion has become my go-to for delivering that 'wow' factor in React apps. It can seriously elevate the UX of your project with just a few intuitive props.

My Hot Tip: Don't be intimidated! Just start by wrapping your elements in <motion.div>. Or, if you're feeling a bit more adventurous, dive into hooks like useAnimation. The defaults are surprisingly good, but the transition prop is where the real magic and deep customization lie. Trust me on this one.

Plus, the developer experience is top-notch. Great TypeScript support and those Framer playgrounds for tinkering?😽. If you're aiming for those silky-smooth UI/UX enhancements, Framer Motion for React is pretty much the MVP of React animation libraries. Definitely one of those React developer tools to have in your belt.

2. TanStack Query (React Query) – Your New Best Friend for Smart Data Fetching & Caching

Okay, next up: data fetching. Oh, the joys of useEffect and useState for every single API call, right? If you're nodding along, you need to meet TanStack Query (you probably knew it as React Query). I've heard it called the missing data-fetching library for web applications, and I'm not gonna lie, that's pretty accurate in my book for efficient data fetching in React.

What does it actually do? Simply put, it takes the headache out of fetching, caching, synchronizing, and updating server state. It magically (okay, not actually magic, but it feels like it sometimes) turns your async data into predictable, cached state with so little boilerplate, it's almost criminal. I remember the days of manually managing loading states, error states, refetching logic...😰.

Let me show you how clean it can be, A simple example:

import { useQuery } from '@tanstack/react-query';

function Posts() {
  const { data, isLoading } = useQuery(['posts'], () =>
    fetch('/api/posts').then(res => res.json())
  );
  if (isLoading) return 'Loading...';
  return <ul>{data.map(post => <li key={post.id}>{post.title}</li>)}</ul>;
}

Seriously, that's the core of it. TanStack Query handles fetching when the component mounts, smartly caches the results, does background refetching to keep things fresh, and can even help with updating stale data. And the best part? You get awesome stuff like pagination support, optimistic updates (making your UI feel super responsive), and request retries practically for free.

For me, this library is a massive productivity booster. All that boilerplate useEffect and useState mess for async operations? Gone. Instead, you get powerful, built-in features. It plays beautifully with React hooks, and if your modern React app talks to any kind of server or API (and whose doesn't?), this is an absolute game-changer. It's one of those underrated React developer tools I can't imagine working without anymore.

3. Zustand – Bear Necessities State Management

Now let's talk React state management. The mere mention of it can sometimes make React devs break out in a cold sweat, especially if you've battled the complexities of Redux. But what if I told you there's a way to get global state that's... bearably simple? (Sorry, couldn't resist the pun, they started it! 🐻)

Enter Zustand. Their own description calls it a "small, fast and scalable bearbones state-management solution," and honestly, it's spot on. If you're looking for React state management without Redux's infamous ceremony – no providers wrapping your app, no actions, no types (unless you want them, it plays nice with TypeScript!), no reducers in the traditional sense – then Zustand might just be your new best friend. You basically create a store using a simple hook API. That's it.

I was skeptical at first, thinking "it can't be that easy," but check this out for a simple counter:

For example:

import create from 'zustand';

const useStore = create(set => ({
  count: 0,
  inc: () => set(state => ({ count: state.count + 1 }))
}));

function Counter() {
  const count = useStore(state => state.count);
  const inc = useStore(state => state.inc);
  return <button onClick={inc}>Count: {count}</button>;
}

And boom! A working counter with global state. No dispatch, no connect HOCs, minimal boilerplate. I've found Zustand absolutely shines when I need some shared state – think theme toggles, user authentication status, maybe a shopping cart – without wanting to pull in the entire Redux ecosystem. It's particularly loved for its simplicity and performance (it's smart about re-renders, avoiding those heavy context pitfalls).

The creator calls it the "bare bones" state manager, and it truly lives up to that. If you're a React dev yearning for an easy, type-safe (if you choose) global state solution, getting comfortable with Zustand is, in my opinion, a fantastic move for 2025. It's a genuinely underrated React developer tool that can seriously boost your productivity by keeping your state logic lean and mean. Plus, who doesn't love a good bear pun?

4. MSW (Mock Service Worker) – API Mocking for Dev & Tests

Ah, the classic developer dilemma: you're ready to build that awesome new UI feature, but the backend API isn't quite ready. Or maybe it is ready, but it's flaky, or you need to test a bunch of weird edge cases that are a pain to set up for real. We've all been there, right? This is where Mock Service Worker (MSW) swoops in like a superhero for API mocking for React development.

MSW is pretty clever. It uses service workers (don't worry if that sounds scary, MSW React makes it easy) to intercept actual network requests right in the browser (or Node for testing!). This means you can define mock responses for your API endpoints, and your app behaves as if it's talking to the real thing. It's been a total game-changer for my workflow.

Imagine you're building a user profile page. You can set up MSW like this:

First Create Request Handlers:

// src/mocks/handlers.js
import { rest } from 'msw';

export const handlers = [
  rest.get('/api/user', (req, res, ctx) => {
    return res(
      ctx.status(200),
      ctx.json({
        username: 'john_doe',
        email: '[email protected]',
      })
    );
  }),
];

Set Up the Service Worker

// src/mocks/browser.js
import { setupWorker } from 'msw/browser';
import { handlers } from './handlers';

export const worker = setupWorker(...handlers);

Start the Worker in Your App

import { worker } from './mocks/browser';

worker.start();

Now any fetch('/api/user') returns the mock data. You can run MSW alongside Storybook so your components load fake data, or use it in your tests (there’s a Jest integration). You can iterate UIs without a backend or test edge cases deterministically. Its impact on developer experience is huge, it makes frontend development independent from unreliable backends and makes tests more realistic without flakiness. If you care about smooth local development and confident testing, MSW is a non-negotiable skill.

5. Vite – Lightning-Fast Bundler & Dev Server

Okay, this next one isn't a React component library, but trust me, it's a massive part of my modern React development workflow these days: Vite (pronounced 'veet'!). If you've ever found yourself staring at a webpack build spinner, slowly losing your will to live, Vite is the breath of fresh air you've been waiting for. It's arguably the fastest React build tool out there.

Vite is a build tool and dev server that's all about speed. How? It cleverly uses native ES modules during development. What that means for you is that your dev server starts up almost instantly – I'm talking seconds, not minutes. And Hot Module Replacement (HMR)? It's so fast, sometimes I blink and miss it. It's genuinely changed how I feel about starting new projects or just tinkering.

Getting a new Vite React project off the ground is a piece of cake:

# Using npm
npm create vite@latest my-awesome-vite-app -- --template react-ts
# (I usually go with TypeScript, but react is an option too!)
cd my-awesome-vite-app
npm install
npm run dev

And bam! Your dev server is up and running. The first time I saw it, I was genuinely shocked. No more lengthy bundling phase just to see your first 'Hello World'. And when it comes to production builds, it uses Rollup under the hood, so you still get highly optimized bundles.

For me, the improvement in developer experience is huge. Those minutes spent waiting for webpack to catch up? They add up, man! Vite pretty much eliminates that productivity drain. It's no wonder so many new React projects, and even frameworks like Remix, are built on or integrate with Vite. People call it "the new Create React App", and while that might be a bit cliché by now, it's totally earned. It really does feel like CRA 2.0, but with next-generation speed.

Learning Vite, and maybe poking around its plugin ecosystem, is something I'd strongly recommend for staying efficient in 2025. Whether you're using it directly or it's powering a framework you love, understanding how this tool works will keep your projects zippy and your development feedback loop incredibly tight.

6. react-window – Virtualize Long Lists for Performance

Ever tried to render a list with, like, a thousand items in React? Or ten thousand? Yeah, your browser probably wasn't too happy about that. The app grinds to a halt, scrolling becomes a slideshow – it's a classic React performance headache. This is where a nifty technique called 'virtualization' comes in, and react-window is a fantastic little library that makes virtualizing long lists in React surprisingly easy.

The core idea is simple but powerful: instead of rendering every single item in your massive list, react-window only renders the items that are currently visible in the viewport (plus a few extra as a buffer). This drastically cuts down on the number of DOM nodes, and suddenly, your super long lists scroll like butter. I like to think of it as a performance optimization ninja for your UIs.

Imagine you've got that dreaded 10,000-item list. Normally, that's a recipe for disaster. But with react-window, it's manageable:

import { FixedSizeList as List } from "react-window";

// Let's imagine a huge dataset
const bigData = Array.from({ length: 10000 }, (_, i) => ({
  id: `item-${i}`,
  text: `Item ${i + 1} reporting for duty!`,
}));

// Your component to render each row - keep it lean!
const Row = ({ index, style }) => (
  <div style={style} className="list-item">
    {" "}
    {/* Apply your item styles here */}
    {bigData[index].text}
  </div>
);

// And here's the virtualized list
<List
  height={400} // The height of the scrollable area
  itemCount={bigData.length}
  itemSize={50} // The height of each individual item
  width="100%" // Or a fixed width
>
  {Row}
</List>;

What's happening here? Only the handful of rows that fit within that 400px height are actually in the DOM. The rest are just virtual. As you scroll, react-window cleverly swaps items in and out. The result? Your app stays snappy and responsive, even with enormous datasets. It's a lifesaver.

Honestly, knowing how to improve React app performance with large datasets is a crucial skill. Libraries like react-window (and its older, more feature-rich cousin, react-virtualized, though I often prefer react-window for its leanness) give you that power. It's definitely one of those npm packages that improve React performance significantly. If you're building anything with long lists – chat applications, data tables, infinite scrollers give react-window a try, it can be a genuine game-changer.

7. React Hook Form – Performant React Form Library

Forms, the bread and butter of so many web apps, and yet, sometimes a real pain to build in React, right? All those controlled components, the state management for every field, the re-renders every time someone types a character, it can get messy and slow things down. If this sounds familiar, let me introduce you to React Hook Form, my go-to React form library.

This library has been a revelation for me when it comes to building performant React forms. Its secret sauce? It cleverly uses uncontrolled inputs and refs under the hood. This means fewer re-renders (often, only the input that changes re-renders, not the whole form!) and a much smaller bundle size. Plus, it's all built around a hook, useForm(), so the API feels very 'React-y' and intuitive. No extra <Form> wrapper components needed – just call the hook and you're good to go.

Here's a taste of how clean it can be for a simple signup form:

import React from "react";
import { useForm } from "react-hook-form";

function SignupForm() {
  const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm();

  const onSubmit = data => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register("email", { required: "Email is required" })}
        placeholder="Email"
        type="email"
      />
      {errors.email && <p>{errors.email.message}</p>}

      <input
        {...register("password", { minLength: 8 })}
        placeholder="Password"
        type="password"
      />
      {errors.password && <p>Password must be at least 8 characters</p>}

      <button type="submit">Sign Up</button>
    </form>
  );
}

The magic here is that register function. It handles a lot of the boilerplate for you. And because it leans on uncontrolled inputs, your form stays snappy, even if it's a big one. I've found this makes a noticeable difference in UX. If you're a React dev looking for that sweet spot between simplicity, top-notch performance, and a tiny bundle footprint for your forms, I can't recommend React Hook Form enough.

8. Zod – Type-Safe Schema Validation in React

Okay, so we just talked about React Hook Form. Now, what about validating that form data? Or any data, really, the API responses, environment variables, you name it. If you're using TypeScript (and in 2025, many of us are, right?), you've probably felt the pain of defining your types and then... writing separate runtime validation logic that hopefully matches those types. It's a recipe for drift and bugs. This is where Zod comes in and, frankly, feels a bit like magic for type-safe validation in React.

Zod is all about Zod-React integration and beyond! The genius of it is that you declare your data schema once, and Zod infers both the runtime validator and the static TypeScript type from that single definition. No more duplication! I was blown away when I first saw this. You can build up complex schemas, add custom logic with .refine(), and it integrates beautifully with tools like React Hook Form (they have official resolvers!).

Let's say you're defining a user schema:

import { z } from "zod";

// Define a schema for user input
const userSchema = z.object({
  username: z.string().min(3, "Username too short"),
  age: z.number().int().positive("Age must be positive"),
  email: z.string().email("Invalid email address"),
});

// Infer TypeScript type
type User = z.infer<typeof userSchema>;

function handleRegistration(data: unknown) {
  // Throws if data doesn’t match schema
  const validUser: User = userSchema.parse(data);
  console.log("Validated user:", validUser);
}

By making Zod schemas the single source of truth, you drastically reduce the chances of your types and runtime checks getting out of sync. I've found this makes my code so much safer and easier to maintain. It's a fantastic tool for any developer who values robustness.

9. React-Use – Massive Collection of React Hooks

How many times have you found yourself writing the same custom hook for, say, debouncing an input, tracking window size, or interacting with local storage? I know I've done it more times than I can count before I discovered react-use. This library is an absolute goldmine – a massive useful React hooks collection.

Think about it: common UI patterns and browser API interactions that you'd normally have to roll yourself. Hooks for animation frames (useRaf), intervals (useInterval), super easy local storage syncing (useLocalStorage – a personal favorite!), getting geolocation data (useGeolocation), listening to media queries (useMedia)... the list just goes on and on. It's like a Swiss Army knife for React developers.

Installation is just your standard npm install react-use, and you can cherry-pick only the specific hooks you need, so it won't bloat your bundle.

Here's a quick peek at useLocalStorage:

import React from "react";
import { useLocalStorage } from "react-use";

function Counter() {
  const [count, setCount] = useLocalStorage("counter", 0);

  return (
    <div>
      <p>Count (persisted): {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Seriously, why reinvent the wheel? Whether you need a debouncing hook, a media-query listener, or an idle-timer, chances are react-use has got you covered. It's become one of my first installs in many projects.

10. SWR – Another Powerhouse for React Data Fetching

So, we talked about TanStack Query earlier for data fetching, and it's fantastic. But it's always good to know the landscape, right? Another incredibly popular and powerful option in the React data fetching world is SWR, from the folks at Vercel. If you've ever found yourself manually implementing caching or revalidation, SWR for React is here to make your life a lot easier.

The name SWR stands for "stale-while-revalidate." It first tries to serve data from cache (stale), making your UI feel fast, then re-fetches in the background (revalidate). It's a brilliant approach.

The API is beautifully simple:

const { data, error, isLoading, mutate } = useSWR(key, fetcherFunction);

Here's a quick look:

import useSWR from "swr";

const fetcher = url => fetch(url).then(res => res.json());

function UserProfile({ userId }) {
  const { data, error, isLoading } = useSWR(
    `/api/users/${userId}`,
    fetcher
  );

  if (error) return <p>Error loading profile.</p>;
  if (isLoading) return <p>Loading...</p>;

  return <p>Welcome back, {data.name}!</p>;
}

What I particularly love about SWR are features like auto-revalidation on focus/network recovery – it just works. It also handles request deduplication and has excellent TypeScript support. For many projects, SWR is a strong contender for React hooks for remote data fetching.

Conclusion

And there you have it – my personal rundown of 10 npm packages that I genuinely believe can make a real difference for React.js developers in 2025. These might not always be the first ones that jump to mind like Router or Redux, but they're the kind of React developer tools that, once you discover them, can seriously level up your game and supercharge your React apps.

Now, let me be clear: I'm not saying you need to cram all of these into every single project. That would be overkill, right? Different projects have different needs. But just knowing these tools exist, understanding what problems they solve, and having them in your back pocket when the right situation arises? That, in my experience, is what separates a good React developer from a great one. It's about having the right tool for the job.

So, I really encourage you: pick one or two that piqued your interest and give them a spin in your next side project, or even a small feature at work. You might just be surprised at how much smoother your React workflow becomes. I know I was!

Got any other underrated React developer tools you like? I'd love to hear about them! Drop a comment below – I'm always on the lookout for new ways to make React development even better. Until then, happy coding!

Crafting URLs That Search Engines (And Humans) Love: A Developer's 2025 Playbook

CodeBucks — Tue, 22 Apr 2025 18:58:07 +0000

As developers, we often focus on the elegant code behind the scenes, the slick user interfaces, and the robust back-end systems. But there's a humble, yet critical, component of every website and application that acts as the first point of contact for both users and search engines: the URL.

Far more than just a web address, a well-crafted URL is a signpost, a descriptor, and a trust signal. In the ever-evolving landscape of search engine optimization (SEO), where algorithms become more sophisticated and user experience takes center stage, the structure and content of your URLs remain fundamentally important. Ignoring them in 2025 is like building a beautiful house without a clear street address – people (and bots) will struggle to find it.

This article isn't just another SEO basics rundown. It's a developer's guide to understanding why URL structure matters for SEO today and how to implement best practices effectively in your projects, looking ahead to 2025. We'll dive into the technical considerations, the user experience implications, and how to make sure your URLs are working for you, not against you.

Why URLs Are More Than Just Addresses

Think about the last time you clicked a link in a search result. What did you notice about the URL? If it was short, descriptive, and made sense, you probably felt more confident clicking it. If it was a long string of random characters and numbers, you might have hesitated. That's the user experience side of the URL's power.

From an SEO perspective, URLs provide crucial context to search engines. While Google and other search engines have become incredibly adept at understanding content regardless of URL structure, a clear, descriptive URL still offers valuable signals:

Relevance: Keywords in the URL can help confirm the page's topic.
Site Structure: A logical URL hierarchy helps search engines understand how your content is organized.
Crawlability: Clean, static-looking URLs are generally easier for search engine bots to crawl and index efficiently.
Click-Through Rate (CTR): Descriptive URLs can improve the likelihood of users clicking your result in the SERPs because they have a better idea of what to expect.

In 2025, as search algorithms continue to prioritize user intent and overall website quality, URLs that enhance both machine understanding and human usability will remain a vital piece of the SEO puzzle.

The Core Principles of a Developer-Friendly, SEO-Friendly URL

Building effective URLs isn't rocket science, but it does require adherence to a few key principles. As developers, we have the power to implement these at the architectural level, ensuring SEO is baked in, not bolted on.

1. Create Human Readable URLs That Actually Make Sense

This is perhaps the most critical rule. A good URL should be instantly understandable to a human. Avoid cryptic IDs, session variables, or overly complex parameter strings.

✅Good: /blog/the-developers-guide-to-seo-urls
❌Bad: /article.php?id=123&sessionid=xyz&cat=4

Readable URLs are easier for users to remember, share, and understand. They also signal to search engines that the page is about a specific, identifiable topic.

2. Use Keywords (But Don't Stuff Them)

Including relevant keywords in your URL can still provide a ranking signal and improve CTR. However, the emphasis here is on relevant and natural.[9] Don't force keywords in if they make the URL look spammy or unreadable. Aim for 1-2 primary keywords that accurately reflect the page content.

✅Good: /products/mens-running-shoes
🟡Okay: /products/mens-athletic-footwear-for-running-and-training (Getting a bit long, but still readable)
❌Bad: /products/cheap-mens-running-shoes-buy-online-best-price (Keyword stuffing)

3. Hyphens for Separators, Always

This is a long-standing best practice that still holds true. Use hyphens (-) to separate words in your URL slug. Search engines are explicitly told to interpret hyphens as word separators. Avoid underscores (_) or spaces (which get encoded into unsightly%20`).

✅Good: /seo-friendly-urls
❌Bad: /seo_friendly_urls
❌Really Bad: /seo%20friendly%20urls

4. Embrace the Lowercase

URLs can technically be case-sensitive. To avoid potential duplicate content issues (where /About and /about are treated as two different pages), always use lowercase letters in your URLs. Enforce this at the server level or within your routing configuration.

5. Shorter is Often Better

While there's no strict character limit for SEO, shorter URLs are generally preferred. They are easier to read, remember, and fit better in search results and other displays. Aim for conciseness without sacrificing descriptiveness. Google has indicated that URL length doesn't directly impact ranking, but readability and usability do.

6. Avoid Unnecessary Parameters and IDs

Dynamic parameters (?param=value) can sometimes cause issues with crawling and duplicate content. While modern search engines are better at handling them, it's best practice to use clean, static-looking URLs wherever possible, achieving this through URL rewriting. Avoid parameters for things like session IDs or tracking unless absolutely necessary and properly handled with canonical tags.

7. Consistency is Key (Trailing Slashes and WWW)

Decide whether you want to use trailing slashes (e.g., /about/) or not (e.g., /about) and stick to it consistently across your entire site. The same goes for the www prefix (e.g., www.example.com vs. example.com). Choose your preferred version and implement 301 redirects to point all other variations to the canonical version. Consistency helps search engines crawl and index your site correctly and prevents duplicate content issues.

How to Handle Duplicate Content with Canonical URLs

Sometimes, the same content might be accessible via multiple URLs (e.g., with different parameters, or trailing slash variations if not handled by redirects). The rel="canonical" tag is your tool for telling search engines which URL is the "master"/"main" version. This is implemented in the <head> section of your HTML:

<link rel="canonical" href="proxy.php?url=https://www.example.com/preferred-url/">

Developers should ensure that canonical tags are dynamically generated based on the preferred URL for the current page, especially when dealing with filtered lists or parameterized URLs.

Advanced URL Considerations for Modern Web Development

As technical SEO evolves alongside web development practices, keep these additional factors in mind:

Single Page Applications and URL Structure

If you're building SPAs or PWAs (like most of us these days), use the History API for clean URLs and implement either server-side rendering or pre-rendering for search engines.

International and Multilingual URL Structures

For sites targeting multiple countries or languages, choose your approach carefully:

ccTLDs: example.de, example.fr
Subdomains: de.example.com, fr.example.com
Subdirectories: example.com/de/, example.com/fr/

Each has pros and cons, but for most sites, multilingual website URL structure works best with subdirectories for maximum domain authority consolidation.

URL Structure for Content Marketing Success

If you're serious about content marketing SEO, organize your blog URL structure logically:

✅ Good: /blog/category/post-title
✅ Also Good: /blog/post-title (flatter structure)

Avoid dates in URLs unless absolutely necessary for your content strategy—they make content look outdated even when it's been updated.

My Step-by-Step URL Audit Checklist

Before launching any new site or section, I run through this URL structure audit checklist:

URLs readable and descriptive for both users and search engines?
Are relevant keywords included naturally where appropriate?
Are hyphens used to separate words?
Is everything in lowercase?
Are URLs reasonably concise?
Are unnecessary parameters avoided or handled with canonical tags?
Is there consistency in trailing slashes and WWW usage, enforced with redirects?
Are 301 redirects in place for any changed or old URLs?
If using SPAs/PWAs, is routing SEO-friendly (History API, SSR/pre-rendering)?
Are canonical tags correctly implemented for any potential duplicate content?

The "How to Fix Bad URL Structure" Action Plan

If you're looking at an existing site with poor URL structure, don't panic. Here's my URL structure optimization plan:

Audit current URLs and identify problems
Create a mapping of old URLs to new, improved versions
Implement 301 redirects from old to new
Update all internal links
Submit the new URL structure to Google Search Console
Monitor for any 404 errors and fix them promptly

Final Thoughts: URL Structure Is Part of Your SEO Foundation

URLs might seem like a small detail, but they are foundational to a well-optimized website. By taking ownership of URL structure and implementing these best practices, developers don't just make search engines happy; they create a more usable, understandable, and trustworthy experience for every person who interacts with their work.

I've implemented pretty much every URL structure imaginable over the years some good, many bad. What I've learned is that taking the time to get this right from the beginning saves countless headaches down the road and delivers measurable SEO benefits.

If you're just starting your SEO URL optimization journey, definitely check out Google's official guidance:

Search Engine Optimization (SEO) Starter Guide by Google

But remember, while guidelines are great, real-world experience often teaches the most valuable lessons. I'd love to hear about your URL structure wins and fails in the comments.

Now go build some URLs that both humans and search engines will love!

Build a Deep Research AI agent using Next.js, the Vercel AI SDK, and multiple LLMs, including Gemini and Deepseek.

CodeBucks — Thu, 20 Mar 2025 13:17:54 +0000

I have built an open source Deep Research AI agent like Gemini or ChatGPT. Using Next.js, Vercel AI SDK, and Exa Search API, It generates follow-up questions, crafts optimal search queries, and compiles comprehensive research reports.

Using open router it is using multiple LLMs for different stages. At the last stage I have used gemini 2.0 reasoning model to generate comprehensive report based on the collected data from web search.

Check out the tutorial👇🏻

Let me know your thoughts, and feel free give star on the github repo.

Mastering React Hooks in 2025: A Step-by-Step Guide for Beginners

CodeBucks — Tue, 04 Mar 2025 16:03:18 +0000

When I first started learning React, class components were the norm, requiring a lot of code. Then, functional components were introduced, which changed everything. As React continues to evolve, one of its most transformative features has been React Hooks, introduced in React 16.8 in February 2019. Now in 2025, React Hooks have become an essential part of modern React development, fundamentally changing how developers work with state and side effects in functional components.

Before React Hooks, developers had to use class components to manage state and lifecycle methods. This often led to complex, hard-to-maintain code with logic scattered across different lifecycle methods. React Hooks solved this problem by allowing developers to use state and other React features in functional components, leading to cleaner, more reusable code.

In this comprehensive guide, we'll explore everything you need to know about React Hooks. Whether you're a developer with basic knowledge of React looking to deepen your understanding or a beginner trying to grasp the fundamentals, this guide will walk you through the core concepts, best practices, and advanced techniques to master React Hooks.

NOTE: This article is a complete guide to React hooks for beginners, packed with tons of useful concepts. The code snippets have comments, so make sure to check them out to get a better understanding of the examples.

What Are React Hooks?

React Hooks are functions that let you "hook into" React state and lifecycle features from functional components.

They were introduced to solve problems that developers faced with class components, such as reusing stateful logic between components, organizing related code that was split across different lifecycle methods, and dealing with confusing class binding. React Hooks provide a more direct API to the React concepts you already know such as props, state, context, refs, and lifecycle events. Hooks don't fundamentally change how React works; rather, they offer a more ergonomic way to access React's powerful features.

At their core, React Hooks allow you to:

Manage state within functional components
Perform side effects in a controlled way
Reuse stateful logic across multiple components
Access context in functional components
Create custom hooks to share logic between components

In 2025, React Hooks have matured considerably, with the React team and community continually improving their performance and adding new capabilities. Let's explore the fundamental hooks that form the foundation of React hooks system.

Why are Hooks important for beginners?

Simpler Code: Hooks help you write less code to achieve the same results.
Easier to Learn: For many, Hooks are easier to understand than the intricacies of class component lifecycle methods.
Modern React: The React community and the React team are focusing on Hooks as the primary way to build components. Learning Hooks is essential for working with modern React codebases.
Reusable Logic: Create custom hooks to use through out the projects

The Two Golden Rules of Hooks

There are two important rules about where you can use Hooks, but don't get bogged down in them right now. Just be aware of them:

Top Level Only: Use Hooks at the top level of your function component, before any return statement. Don't put them inside loops, conditions, or nested functions.
React Functions Only: Use Hooks inside React function components or custom Hooks (which are also functions).

React provides an ESLint plugin that will warn you if you break these rules, so you'll get help as you code!

The Core Hooks: useState and useEffect

useState: Managing Component State

The useState hook is the most basic and frequently used hook in React. It allows you to add state to functional components, something that was previously only possible with class components.


import React, { useState } from 'react';

function Counter() {
 // Declare a state variable called "count" with initial value of 0

 const [count, setCount] = useState(0);

 return (
  <div>
   <p>You clicked {count} times</p>
   <button onClick={() => setCount(count + 1)}>
    Click me
   </button>
  </div>
 );
}

In this example, useState returns a pair: the current state value (count) and a function to update it (setCount). The argument passed to useState is the initial state value. When you call setCount, React re-renders the component with the new state value.

useState with Complex State

While the example above uses a simple number as state, useState can handle more complex data structures like objects and arrays. However, unlike this.setState in class components, useState doesn't automatically merge update objects.


import React, { useState } from 'react';

function UserProfile() {

  const [user, setUser] = useState({
    name: 'John',
    email: '[email protected]',
    preferences: {
      darkMode: false,
      notifications: true
    }
  });

  // Update a nested property in state
  const toggleDarkMode = () => {
    setUser({
      ...user,
      preferences: {
        ...user.preferences,
        darkMode: !user.preferences.darkMode
      }
    });
  };

  return (
    <div>
      <h2>{user.name}'s Profile</h2>
      <p>Email: {user.email}</p>
      <p>Dark Mode: {user.preferences.darkMode ? 'On' : 'Off'}</p>
      <button onClick={toggleDarkMode}>Toggle Dark Mode</button>
    </div>
  );
}

Notice how we have to use the spread operator (...) to maintain the existing state while updating only specific parts. This immutable update pattern is common in React and helps ensure predictable state management.

Functional Updates in useState

When new state depends on previous state, React recommends using the functional update form of useState:


function Counter() {

  const [count, setCount] = useState(0);

  // Using functional update form
  const increment = () => {
    setCount(prevCount => prevCount + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );

}

This approach ensures you're always working with the most current state value, which is essential in scenarios with multiple state updates or asynchronous code.

useEffect: Managing Side Effects

The useEffect hook lets you perform side effects in functional components. Side effects can include data fetching, subscriptions, or manually changing the DOM.


import React, { useState, useEffect } from 'react';

function UserData() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchUser = async () => {
      try {
        setLoading(true);
        const response = await fetch('https://api.example.com/user');
        const userData = await response.json();
        setUser(userData);
      } catch (error) {
        if (error) {
          console.error('Error fetching user data:', error);
        }
      } finally {
        setLoading(false);
      }
    };

    fetchUser();
    // Cleanup function
    return () => {
      // add cleanup code here such as window.removeEventListener
    };    
  }, []); // Empty dependency array means this effect runs once on mount

  if (loading) return <div>Loading...</div>;

  if (!user) return <div>No user data found</div>;

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
    </div>
  );
}

This example demonstrates a common pattern of using useEffect for data fetching. The empty dependency array [] means the effect runs only when the component mounts. The function returned from the effect serves as a cleanup mechanism, which runs when the component unmounts or before the effect runs again.

The Dependency Array

The dependency array is a crucial part of useEffect. It determines when the effect should run:

Empty array ([]): The effect runs once after the initial render
Variables in the array ([var1, var2]): The effect runs after the initial render and whenever any dependency (var1 or var2) changes.
No array: The effect runs after every render


function SearchResults({ query }) {

  const [results, setResults] = useState([]);

  useEffect(() => {

    if (query.trim() === '') return;

    const fetchResults = async () => {
      const response = await fetch(`https://api.example.com/search?q=${query}`);
      const data = await response.json();
      setResults(data);
    };

    fetchResults();

  }, [query]); // Effect runs when query changes

  return (
    <ul>
      {results.map(result => (
        <li key={result.id}>{result.title}</li>
      ))}
    </ul>
  );
}

In the above example, the effect runs whenever the query prop changes, fetching new search results.

Common useEffect Patterns

1. Data Fetching


useEffect(() => {

 let isMounted = true;

 const fetchData = async () => {
  const data = await fetchSomeData();
  if (isMounted) setData(data);
 };

 fetchData();

 return () => { isMounted = false };

}, [dependencyValue]);

2. Subscriptions


useEffect(() => {

 const subscription = subscribeToEvent(eventId, handleEvent);
 return () => unsubscribe(subscription);

}, [eventId]);

3. DOM Manipulations


useEffect(() => {

 const element = document.getElementById('some-element');
 element.style.opacity = '1';

 return () => {
  element.style.opacity = '0';
 };

}, []);

Additional Core React Hooks

Here is few other React hooks which are widely used along with useState and useEffect hooks.

1. useContext: Managing Global State

The useContext hook provides a way to pass data through the component tree without manually passing props at every level. This is especially useful for theme settings, user authentication, or language preferences. Basically using useContext hook you can access React's context APIs.



import React, { createContext, useContext, useState } from 'react';

// Create a context
const ThemeContext = createContext();

// Provider component
function ThemeProvider({ children }) {

 const [theme, setTheme] = useState('light');

 const toggleTheme = () => {
  setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
 };

 return (
  <ThemeContext.Provider value={{ theme, toggleTheme }}>
   {children}
  </ThemeContext.Provider>
 );
}


// Consumer component
function ThemedButton() {

 // Use the context
 const { theme, toggleTheme } = useContext(ThemeContext);

 return (
  <button
   onClick={toggleTheme}
   style={{
    background: theme === 'light' ? '#fff' : '#333',
    color: theme === 'light' ? '#333' : '#fff',
    padding: '10px 15px',
    border: `1px solid ${theme === 'light' ? '#333' : '#fff'}`
   }}
  >
   Toggle Theme
  </button>
 );
}

// App that uses the theme
function App() {

 return (
  <ThemeProvider>
   <div style={{ padding: '20px' }}>
    <h1>Context Example</h1>
    <ThemedButton />
   </div>
  </ThemeProvider>
 );
}

This pattern creates a "theme context" that can be accessed by any component within the ThemeProvider, eliminating the need to pass the theme through multiple layers of components.

2. useReducer: Complex State Logic

For more complex state logic, useReducer provides an alternative to useState. Inspired by Redux, it's particularly useful when the next state depends on the previous state or when state transitions are complex. Checkout following example:


import React, { useReducer } from 'react';

// Reducer function
function todoReducer(state, action) {

  switch (action.type) {

    case 'ADD_TODO':

      return [...state, {
        id: Date.now(),
        text: action.payload,
        completed: false
      }];

    case 'TOGGLE_TODO':

      return state.map(todo =>
        todo.id === action.payload
          ? { ...todo, completed: !todo.completed }
          : todo
      );

    case 'DELETE_TODO':

      return state.filter(todo => todo.id !== action.payload);

    default:

      return state;

  }
}

function TodoApp() {

  const [todos, dispatch] = useReducer(todoReducer, []);

  const [text, setText] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!text.trim()) return;
    dispatch({ type: 'ADD_TODO', payload: text });
    setText('');
  };

  return (

    <div>
      <form onSubmit={handleSubmit}>
        <input
          value={text}
          onChange={(e) => setText(e.target.value)}
          placeholder="Add a todo"
        />
        <button type="submit">Add</button>
      </form>

      <ul>
        {todos.map(todo => (
          <li
            key={todo.id}
            style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
          >

            <span onClick={() => dispatch({ type: 'TOGGLE_TODO', payload: todo.id })}>
              {todo.text}
            </span>

            <button onClick={() => dispatch({ type: 'DELETE_TODO', payload: todo.id })}>
              Delete
            </button>

          </li>
        ))}

      </ul>
    </div>
  );
}

The useReducer hook is preferred over useState when:

State logic is complex involving multiple sub-values
The next state depends on the previous one
You want to optimize performance for components that trigger deep updates

3. useRef: Persisting Values Between Renders

The useRef hook creates a mutable reference that persists across renders. Unlike state, changing a ref doesn't trigger a re-render.


import React, { useRef, useState, useEffect } from 'react';


function StopwatchWithFocus() {

  const [time, setTime] = useState(0);
  const [isRunning, setIsRunning] = useState(false);
  const timerIdRef = useRef(null);
  const inputRef = useRef(null);

  useEffect(() => {
    if (isRunning) {
      timerIdRef.current = setInterval(() => {
        setTime(prevTime => prevTime + 1);
      }, 1000);

    } else if (timerIdRef.current) {
      clearInterval(timerIdRef.current);
    }

    return () => {
      if (timerIdRef.current) {
        clearInterval(timerIdRef.current);
      }
    };
  }, [isRunning]);

  const handleStartStop = () => {
    setIsRunning(!isRunning);
  };

  const handleReset = () => {

    setIsRunning(false);
    setTime(0);

    // Focus the input after reset

    inputRef.current.focus();

  };

  const formatTime = (seconds) => {
    const mins = Math.floor(seconds / 60);
    const secs = seconds % 60;

    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;

  };

  return (

    <div>

      <h2>Stopwatch: {formatTime(time)}</h2>

      <button onClick={handleStartStop}>
        {isRunning ? 'Stop' : 'Start'}
      </button>

      <button onClick={handleReset}>Reset</button>

      <div>

        <input
          ref={inputRef}
          type="text"
          placeholder="Notes about this timer session..."
        />

      </div>
    </div>
  );
}

In this example, useRef serves two different purposes:

timerIdRef holds the interval ID, which needs to persist between renders but doesn't affect the UI.
inputRef provides a reference to the DOM input element, allowing us to programmatically focus it.

Performance Optimization Hooks

There are few hooks that improve the performance of your React app, you must use these hook wherever it's applicable.

useMemo: Memoizing Expensive Calculations

The useMemo hook helps optimize performance by memoizing expensive calculations so they only recompute when dependencies change.


import React, { useState, useMemo } from 'react';

function ExpensiveCalculation({ numbers }) {

  const [filter, setFilter] = useState('');

  // Memoize expensive calculation
  const filteredAndSortedNumbers = useMemo(() => {

    console.log('Computing filtered and sorted numbers...');

    // Simulating expensive operation
    const filtered = numbers.filter(n =>
      n.toString().includes(filter)
    );
    // Sort is expensive for large arrays
    return [...filtered].sort((a, b) => a - b);
  }, [numbers, filter]); // Only recompute when numbers or filter changes

  return (
    <div>
      <input
        value={filter}
        onChange={e => setFilter(e.target.value)}
        placeholder="Filter numbers..."
      />

      <h3>Filtered and Sorted Numbers:</h3>

      <ul>
        {filteredAndSortedNumbers.map(n => (
          <li key={n}>{n}</li>
        ))}
      </ul>

    </div>
  );
}

This optimization is particularly valuable for:

Expensive calculations that don't need to be recalculated on every render
Preventing unnecessary re-renders of child components that rely on computed values

useCallback: Memoizing Functions

The useCallback hook memoizes function definitions, which is useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders.


import React, { useState, useCallback } from 'react';

// Child component that uses React.memo
const ItemList = React.memo(({ items, onItemClick }) => {

  console.log('ItemList rendered');

  return (
    <ul>
      {items.map(item => (
        <li key={item.id} onClick={() => onItemClick(item.id)}>
          {item.name}
        </li>
      ))}
    </ul>
  );
});


function ShoppingList() {
  const [items, setItems] = useState([
    { id: 1, name: 'Apples' },
    { id: 2, name: 'Bananas' },
    { id: 3, name: 'Cherries' }
  ]);

  const [selectedId, setSelectedId] = useState(null);

  // Without useCallback, this function would be recreated on every render
  // causing ItemList to re-render unnecessarily
  const handleItemClick = useCallback((id) => {
    setSelectedId(id);
    console.log(`Item ${id} selected`);
  }, []); // Empty dependency array means this function only changes if dependencies change

  return (

    <div>
      <h2>Shopping List</h2>
      <ItemList items={items} onItemClick={handleItemClick} />
      {selectedId && <p>You selected item with ID: {selectedId}</p>}
    </div>

  );

}

The useCallback hook is essential when:

Passing callbacks to optimized child components using React.memo
Creating event handlers that depend on props or state
Working with custom hooks that rely on function equality

Building Custom Hooks

One of the most powerful features of React Hooks is the ability to create custom hooks, allowing you to extract component logic into reusable functions.


import { useState, useEffect } from 'react';

// Custom hook for window dimensions
function useWindowSize() {

  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });

  useEffect(() => {

    const handleResize = () => {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    };

    // Add event listener
    window.addEventListener('resize', handleResize);

    // Clean up
    return () => window.removeEventListener('resize', handleResize);
  }, []); // Empty array means only run on mount and unmount
  return windowSize;
}


// Using the above custom hook
function ResponsiveComponent() {
  const size = useWindowSize();

  return (

    <div>
      <h2>Window Size:</h2>
      <p>Width: {size.width}px, Height: {size.height}px</p>
      {size.width < 768 ? (
        <p>Mobile view</p>
      ) : (
        <p>Desktop view</p>
      )}
    </div>
  );
}

More Custom Hook Examples

Here are a few more examples of useful custom hooks:

1. useFetch: Simplified Data Fetching


function useFetch(url, options = {}) {

  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {

    let isMounted = true;
    const controller = new AbortController();

    const fetchData = async () => {
      try {

        setLoading(true);

        const response = await fetch(url, {
          ...options,
          signal: controller.signal
        });
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const result = await response.json();
        if (isMounted) {
          setData(result);
          setError(null);
        }
      } catch (err) {
        if (isMounted && err.name !== 'AbortError') {
          setError(err.message);
          setData(null);
        }
      } finally {
        if (isMounted) setLoading(false);
      }
    };
    fetchData();

    // Cleanup
    return () => {
      isMounted = false;
      controller.abort();
    };

  }, [url, JSON.stringify(options)]);

  return { data, loading, error };

}

2. useLocalStorage: Persistent State


function useLocalStorage(key, initialValue) {

  // Get from local storage then parse
  const getStoredValue = () => {

    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } 
    catch (error) {
      console.error(`Error reading localStorage key "${key}":`, error);
      return initialValue;
    }
  };

  // State to store our value
  const [storedValue, setStoredValue] = useState(getStoredValue);

  // Return a wrapped version of useState's setter function that
  // persists the new value to localStorage
  const setValue = (value) => {

    try {
      // Allow value to be a function like in useState
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      // Save state
      setStoredValue(valueToStore);
      // Save to localStorage
      window.localStorage.setItem(key, JSON.stringify(valueToStore));

    } catch (error) {
      console.error(`Error setting localStorage key "${key}":`, error);
    }
  };

  return [storedValue, setValue];
}

React Hooks Best Practices in 2025

Over the years, the React community has established solid best practices for working with hooks. Here are some key recommendations:

1. Rules of Hooks

We already learned the top 2 rules at the beginning of this article. You should Always follow the Rules of Hooks:

Only call hooks at the top level of your React functions
Don't call hooks inside loops, conditions, or nested functions
Only call hooks from React function components or custom hooks

2. Keep Related Logic Together

Use hooks to organize related logic together, rather than splitting it across different lifecycle methods as in class components.



// Prefer this
function UserProfile({ userId }) {

  const { data, loading } = useFetch(`/api/users/${userId}`);
  const { settings, updateSettings } = useUserSettings(userId);

  // All user-related logic stays together
  // ...
}

// Instead of spreading across lifecycle methods like in class components

3. Create Custom Hooks for Reusable Logic

Extract logic into custom hooks when it's used across multiple components:

Without custom hook (repeated in multiple components):


function Component1() {

  const [isOnline, setIsOnline] = useState(navigator.onLine);

  useEffect(() => {

    const handleOnline = () => setIsOnline(true);
    const handleOffline = () => setIsOnline(false);

    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);

    return () => {

      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);

    };

  }, []);

  // ...
}

With custom hook:


function useOnlineStatus() {

  const [isOnline, setIsOnline] = useState(navigator.onLine);

  useEffect(() => {

    const handleOnline = () => setIsOnline(true);
    const handleOffline = () => setIsOnline(false);

    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);

    return () => {

      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);

    };

  }, []);

  return isOnline;
}

Now usage is simple in any component:


function Component1() {
  const isOnline = useOnlineStatus();
  // ...
}

4. Optimize Expensive Calculations with useMemo and useCallback

Use useMemo for expensive computations and useCallback for function memoization, but don't overuse them for simple operations.

5. Manage Complex State with useReducer

For complex state logic, prefer useReducer over multiple useState calls:

Instead of multiple useState calls:


function ComplexForm() {

  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isSuccess, setIsSuccess] = useState(false);
  // Many handlers that update different pieces of state
  // ...
}

Prefer useReducer for complex state:


function formReducer(state, action) {

  switch (action.type) {

    case 'UPDATE_FIELD':

      return { ...state, [action.field]: action.value };

    case 'SET_ERRORS':

      return { ...state, errors: action.errors };

    case 'START_SUBMIT':

      return { ...state, isSubmitting: true, isSuccess: false };

    case 'SUBMIT_SUCCESS':

      return { ...state, isSubmitting: false, isSuccess: true };

    // ...other cases
    default:
      return state;
  }
}

function ComplexForm() {

  const [state, dispatch] = useReducer(formReducer, {

    name: '',
    email: '',
    password: '',
    errors: {},
    isSubmitting: false,
    isSuccess: false

  });

  // Unified state management with actions
  // ...
}

6. Separate Data Fetching from UI

Extract data fetching logic into custom hooks to keep components focused on UI rendering:


// Custom hook for data fetching
function useUser(userId) {

  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Fetching logic...
  }, [userId]);

  return { user, loading, error };
}

// Component focused on UI
function UserProfile({ userId }) {

  const { user, loading, error } = useUser(userId);

  if (loading) return <Spinner />;

  if (error) return <ErrorMessage error={error} />;

  return (
    <div>
      <h2>{user.name}</h2>
      {/* Other UI elements */}
    </div>
  );

}

Advanced Hook Patterns

As you become more familiar with basic hooks like useState, useEffect, and useContext, you can explore advanced hook patterns that enable better organization, reusability, and more scalable code. These patterns allow you to compose, share, and manage logic in ways that enhance the readability and maintainability of your application.

Composition of Hooks

Compose multiple hooks together to create more powerful abstractions:


function useUserDataWithStatus(userId) {

  const { data: user, loading: userLoading, error: userError } = useFetch(`/api/users/${userId}`);
  const isOnline = useOnlineStatus();

  return {
    user,
    loading: userLoading,
    error: userError,
    isOnline
  };

}

Context + Reducer Pattern

Combine context and reducers for global state management:


// Create context
const AppStateContext = createContext();
const AppDispatchContext = createContext();

// Reducer function
function appReducer(state, action) {

  switch (action.type) {

    case 'SET_USER':
      return { ...state, user: action.payload };

    case 'TOGGLE_THEME':
      return { ...state, darkMode: !state.darkMode };

    // other cases
    default:
      return state;
  }
}

// Provider component
function AppProvider({ children }) {

  const [state, dispatch] = useReducer(appReducer, {
    user: null,
    darkMode: false,
    // other global state
  });

  return (
    <AppStateContext.Provider value={state}>
      <AppDispatchContext.Provider value={dispatch}>
        {children}
      </AppDispatchContext.Provider>
    </AppStateContext.Provider>
  );
}

// Custom hooks to use the context
function useAppState() {

  const context = useContext(AppStateContext);

  if (context === undefined) {
    throw new Error('useAppState must be used within an AppProvider');
  }

  return context;

}

function useAppDispatch() {

  const context = useContext(AppDispatchContext);

  if (context === undefined) {
    throw new Error('useAppDispatch must be used within an AppProvider');
  }
  return context;
}

This pattern provides a lightweight alternative to Redux for many applications.

React Hooks in 2025: What's New?

As React continues to evolve, several enhancements have been made to hooks in recent years:

Improved Performance

The React team has continuously optimized the internals of hooks for better performance:

Reduced overhead for each hook call
Better batching of state updates
Improved memory usage patterns

Enhanced DevTools Support

React DevTools now provide better debugging support for hooks:

Inspect hook values during development
Track which components are causing re-renders
View dependency arrays and their changes

Integration with Concurrent Mode

Hooks work seamlessly with React's Concurrent Mode features:

Suspense for data fetching
Transitions for state updates
Prioritization of different updates

TypeScript Improvements

TypeScript integration with hooks has improved dramatically:

Better type inference for hook return values
Enhanced autocomplete for hook parameters
Stricter typing for custom hooks

Common Challenges and Solutions

1. Why Does My useEffect Hook Keep Running Infinitely?

A common issue is creating infinite loops with useEffect:


// Problematic code
function SearchComponent() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  // This creates an infinite loop!
  useEffect(() => {
    fetchResults(query).then(data => setResults(data));
  }, [results]); // results change triggers effect, which updates results!
  // ...
}

Solution: Ensure your dependency array only includes values that, when changed, should trigger the effect:


// Fixed code
useEffect(() => {
  fetchResults(query).then(data => setResults(data));
}, [query]); // Only refetch when query changes

2. Why Isn't My State Updating Correctly in React Hooks?

Closures in JavaScript can lead to stale state in event handlers:


function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      // This uses the initial count value (0) in the closure
      setCount(count + 1);
    }, 1000);

    return () => clearInterval(timer);
  }, []); // Empty deps array means this only runs on mount
  // count will only ever be 1!
}

Solution: Use the functional update form of state setters:


useEffect(() => {
  const timer = setInterval(() => {
    // This always uses the latest count value
    setCount(prevCount => prevCount + 1);
  }, 1000);

  return () => clearInterval(timer);
}, []);

3. Do I Need useMemo and useCallback for Everything in React?

A common mistake is wrapping everything in useMemo and useCallback:


// Excessive optimization
function UserList({ users }) {
  // Unnecessary for simple operations
  const displayUsers = useMemo(() => {
    return users.map(user => (
      <li key={user.id}>{user.name}</li>
    ));
  }, [users]);

  // Unnecessary for this simple function
  const handleClick = useCallback(() => {
    console.log('Clicked');
  }, []);

  return (
    <div>
      <h2>User List</h2>
      <ul>{displayUsers}</ul>
      <button onClick={handleClick}>Click Me</button>
    </div>
  );
}

Solution: Only use useMemo and useCallback when there's a clear performance benefit:

For expensive calculations
When passing callbacks to optimized components using React.memo
When dependencies change frequently

4. How Do I Fix the "React Hook useEffect has a missing dependency" Warning?

Managing dependencies can be tricky:


function SearchComponent({ onSearch, defaultQuery }) {
  const [query, setQuery] = useState(defaultQuery);

  // Missing dependencies
  useEffect(() => {
    const results = searchAPI(query);
    onSearch(results);
  }, []); // Missing dependencies: query, onSearch
}

Solution: Use ESLint's react-hooks/exhaustive-deps rule and address all warnings:


useEffect(() => {
  const results = searchAPI(query);
  onSearch(results);
}, [query, onSearch]); // All dependencies included

If onSearch changes too often, consider stabilizing it with useCallback in the parent component.

Conclusion

React Hooks have fundamentally changed how we build React applications, enabling more concise, maintainable, and reusable code. In 2025, they remain the preferred approach for managing state and side effects in React components, with ongoing improvements in performance, developer experience, and integration with other React features.

By mastering hooks, you can:

Write more expressive and concise components
Easily reuse stateful logic between components
Organize related code together
Create powerful abstractions with custom hooks
Take advantage of the latest React features and optimizations

Whether you're a beginner just starting with React or an experienced developer looking to deepen your understanding, getting comfortable with hooks is essential for modern React development. Start with the basics useState and useEffect and gradually explore more advanced hooks and patterns as you build more complex applications.

Remember that the true power of hooks comes not just from using them individually, but from composing them together to create elegant solutions to complex problems. Happy coding!

Thanks for reading this article, I hope you found it helpful. If you are interested in learning and building project using React, Redux and Next.js you can visit my YouTube channel here: CodeBucks

Here are my other article that you might like to read:

💻Visit my personal blog website from here: DevDreaming
🐥Follow me on X: @code_bucks

Website Performance Optimization: Proven Techniques for Faster Websites

CodeBucks — Mon, 24 Feb 2025 14:47:47 +0000

In the current age of AI apps, where every second counts, web performance optimization is a critical skill for delivering exceptional online experiences. A slow website doesn't just test a user's patience, it can drive them away entirely, costing businesses revenue and reputation. Research shows that 40% of users abandon a site if it takes more than 3 seconds to load, and 47% expect pages to load in 2 seconds or less. For e-commerce giants like Amazon, a mere 100ms delay translates to a 1% drop in sales.

In this article we'll explore everything from minimizing HTTP requests to optimizing images, CSS, JavaScript, and server-side operations, all backed by real-world examples that prove these methods work. Let's dive into the essentials of website speed and how you can transform your site into a high-performing asset.

Introduction to Web Performance Optimization

Web performance optimization is the art and science of making websites load faster, run smoother, and deliver a seamless user experience. It's about reducing the time it takes for a page to become fully interactive, measured through metrics like Time to First Byte (TTFB), First Contentful Paint (FCP), and Time to Interactive (TTI), while ensuring the site performs well across devices and network conditions.

Why does it matter? Beyond user frustration, slow websites hurt your bottom line. Google considers website speed a ranking factor, meaning optimized sites climb higher in search results. Faster load times also improve conversion rates and reduce bounce rates. For instance, Pinterest saw a 15% increase in search traffic and sign-ups after cutting perceived wait times by 40%, while Etsy gained a 12% revenue boost from a 150ms improvement.

Let's break down proven techniques to enhance website speed, addressing common pain points and answering key questions like “How do I minimize HTTP requests?” and “What's the best way to optimize images?” Let's start with one of the foundational steps: reducing HTTP requests.

Minimizing HTTP Requests

Every time a browser loads a webpage, it sends HTTP requests to fetch resources like images, scripts, and stylesheets. Too many requests slow things down, as browsers can only handle a limited number of simultaneous connections. Minimizing HTTP requests is a cornerstone of web performance optimization.

How to Minimize HTTP Requests

Combine Files: Merge multiple CSS or JavaScript files into one. Tools like Webpack or Gulp streamline this process, cutting down requests without changing functionality.
Use CSS Sprites: Combine small images like icons or buttons into a single sprite sheet. Amazon famously uses sprites for product icons, reducing dozens of requests to just one.
Implement Lazy Loading: Delay loading non-critical resources, such as images below the fold, until they're needed. The HTML loading="lazy" attribute makes this simple for images and iframes.
Inline Small Resources: For tiny CSS or JavaScript snippets (under 1KB), embed them directly in the HTML to eliminate extra requests.

Fewer requests mean less waiting. A site with 50 separate resources might take seconds longer to load than one with 10, especially on mobile networks. By tackling this bottleneck, you pave the way for faster rendering.

Pro Tip: Use a tool like Chrome DevTools' Network tab to audit your site's requests and identify opportunities for consolidation.

Optimizing CSS and JavaScript

CSS and JavaScript are vital to modern websites, but if they're not optimized, they can block rendering and drag down website speed. Effective CSS and JavaScript optimization ensures these assets enhance rather than hinder performance.

CSS Optimization Techniques

Minify CSS: Strip out comments, whitespace, and redundant code with tools like CSSNano or CleanCSS. A 100KB stylesheet might shrink to 70KB, speeding up downloads.
Extract Critical CSS: Inline the CSS needed for above-the-fold content, deferring the rest. This reduces render-blocking delays.
Avoid @import: Replace @import with <link> tags, as the former forces sequential loading of stylesheets.

JavaScript Optimization Techniques

Minify JavaScript: Compress files with UglifyJS or Terser, removing unnecessary characters without altering functionality.
Load Asynchronously: Use async or defer attributes for non-critical scripts. For example, <script async src="proxy.php?url=script.js"> lets the page render while the script downloads.
Leverage Bundlers: Tools like Webpack or Rollup bundle multiple scripts into a single, optimized file, reducing requests and improving load times.

Twitter uses Webpack to minify and bundle JavaScript, cutting file sizes and boosting performance for millions of users. These techniques ensure scripts and styles load efficiently, keeping visitors engaged.

Image Optimization

Images often account for over 50% of a webpage's total size, making image optimization a game-changer for web performance optimization. A poorly optimized image can balloon load times, while a streamlined one keeps things snappy.

Best Practices for Image Optimization

Compress Images: Tools like TinyPNG or JPEGmini reduce file sizes without noticeable quality loss. A 1MB JPEG might drop to 300KB with no visible difference.
Serve Correct Sizes: Resize images to match their display dimensions. A 2000px-wide banner doesn't need to load at full resolution on a 500px-wide screen.
Adopt Modern Formats: Use WebP or AVIF for superior compression compared to JPEG or PNG. Add fallbacks with <picture> tags:

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Example">
</picture>

Lazy Load Images: Defer off-screen images with loading="lazy", saving bandwidth until users scroll to them.

Pinterest optimized images and implemented lazy loading, slashing bandwidth usage and improving load times for its image-heavy platform. The result? Happier users and more engagement.

Pro Tip: Test image performance with Google's Lighthouse tool to pinpoint oversized or unoptimized assets.

Server-Side Optimization

Even the best front-end optimizations can falter if the server lags. Server-side optimization reduces Time to First Byte (TTFB) and ensures rapid delivery of resources, a key component of web performance optimization.

Server-Side Optimization Strategies

Use a CDN: Content Delivery Networks (CDNs) like Cloudflare or Akamai cache content on global servers, reducing latency by serving files from locations closer to users.
Optimize Databases: Index slow queries and cache results with tools like Redis or Memcached. A well-tuned database can cut response times from seconds to milliseconds.
Enable HTTP/2: Upgrade to HTTP/2 for multiplexing and header compression, allowing multiple requests over a single connection.
Compress Responses: Activate GZIP or Brotli compression to shrink HTML, CSS, and JavaScript files before sending them to the browser.

CNN uses optimized database queries to deliver news articles instantly, even during traffic surges. Pairing this with a CDN ensures global users get fast access.

Pro Tip: Monitor server performance with New Relic to catch bottlenecks before they impact users.

HTML and Font Optimization

While less obvious than images or scripts, HTML optimization and font optimization play a subtle but significant role in website speed.

HTML Optimization Techniques

Write Clean HTML: Use concise, semantic markup validated by the W3C Validator. Fewer bytes mean faster parsing.
Compress HTML: Enable server-side GZIP or Brotli compression to reduce file sizes by up to 70%.
Prioritize Resources: Use <link rel="preload"> for critical assets, like:

<link rel="preload" href="styles.css" as="style">

Font Optimization Techniques

Subset Fonts: Load only the characters you need with tools like Glyphhanger.
Use System Fonts: Default to system fonts (e.g., font-family: -apple-system, sans-serif) to skip external font downloads.
Optimize Font Loading: Preload key fonts with <link rel="preload"> and use font-display: swap to avoid invisible text during loading.

Google's homepage relies on clean HTML and minimal fonts, contributing to its lightning-fast load times. Small tweaks here can yield big gains.

Caching for Performance

Caching is a powerful way to speed up repeat visits by storing resources locally or on servers, reducing redundant downloads.

Caching Strategies

Browser Caching: Set Cache-Control headers for static files, like:

Cache-Control: public, max-age=31536000

Server-Side Caching: Use Redis or Varnish to store dynamic content, cutting database strain.
CDN Caching: Cache assets on a CDN to serve them from edge locations, minimizing latency.

GitHub Pages leverages browser caching for static assets, ensuring returning users experience near-instant load times.

Performance Monitoring

Optimizing once isn't enough, performance monitoring ensures your site stays fast as content, traffic, and technology evolve.

Top Performance Monitoring Tools

Google PageSpeed Insights: Scores your site and offers actionable fixes for speed and usability.
Lighthouse: Built into Chrome DevTools, it audits performance, accessibility, and SEO.
New Relic: Tracks server-side metrics and application health in real time.

Netflix uses New Relic to monitor streaming performance, ensuring smooth playback for millions during peak hours.

Real-World Case Studies

These examples show how web performance optimization drives tangible results:

Company	Action Taken	Result
Amazon	Cut latency by 100ms	1% sales loss avoided
eBay	Reduced load time by 1s	11% fewer page views lost
Netflix	Optimized for 1s delay	7.5% more views retained
Etsy	Improved load time by 150ms	12% revenue increase
Pinterest	Cut wait times by 40%	15% boost in traffic and sign-ups
BBC	Fixed 1s delay	10% user retention gained

These cases highlight that even tiny improvements can yield outsized benefits.

Conclusion

Web performance optimization is a blend of science, strategy, and creativity. By minimizing HTTP requests, optimizing CSS, JavaScript, images, and server operations, and leveraging caching and monitoring, you can build websites that load fast and keep users coming back. The payoff? Better SEO, higher conversions, and happier visitors.

Start small, test one technique, measure the impact, and scale up. Tools like Lighthouse and New Relic will guide your journey. In a world where speed is king, optimizing your site isn't just a technical task it's a competitive edge.

Thanks for reading this article, I hope you found it helpful. If you are interested in learning and building project using React, Redux and Next.js you can visit my YouTube channel here: CodeBucks

Here are my other article that you might like to read:

💻Visit my personal blog website from here: DevDreaming
🐥Follow me on X: @code_bucks

How to Build a Personal Brand as a Developer: A Step-by-Step Guide

CodeBucks — Mon, 24 Feb 2025 11:30:00 +0000

Building a personal brand as a developer is essential in today's competitive tech landscape. It's not just about your coding skills; it's about how you present yourself to the world, showcasing your unique strengths and values. This guide will walk you through the steps to create a compelling personal brand, helping you stand out and advance your career.

I have been getting lots of queries from freshers and fellow developers on how to get a job or freelance clients. I always tell them to showcase their work out there, write blogs, make content that is relevant to their skills. Right now having a strong personal brand as a developer is more important than ever. It's the story you tell about who you are and what you stand for, and it can be a powerful tool in advancing your career.

Personal branding for developers involves creating a unique identity that encapsulates your skills, experiences, and values. It's how you differentiate yourself from the thousands of other developers, making you memorable and attractive to potential employers, clients, or collaborators. You just have to ask yourself one question, How a recruiter or client can easily find about your work?

Why is personal branding important? Statistics underscore its value:

According to a CareerBuilder survey, 70% of recruiters use social media to screen candidates during the hiring process, emphasizing the need for a strong online presence.
A study by the Harvard Business Review found that employees who engage in personal branding are more likely to be promoted and receive higher salaries, illustrating career advancement benefits.

Let me walk you through the steps to build a compelling personal brand, covering as much as possible to ensure a thorough understanding.

Step 1: Identify Your Unique Strengths

To build a strong personal brand, you need to identify what sets you apart from others in your field. Your unique strengths could be your expertise in a particular programming language, your ability to solve complex problems, your passion for teaching, or any other trait that makes you stand out.

How do you identify these strengths? Start by reflecting on your experiences. Think about projects you've worked on, challenges you've overcome, and feedback you've received from peers and supervisors. What are the common themes or skills you've consistently demonstrated? For example, if you've excelled in front-end development, that could be a key strength. If you are a beginner, start by explaining what you know through blogs, linkedIn post or tweets. You can use tools like ChatGPT, Claude to form the right sentences if you are new to writing technical content.

If you still don't really clear about your strengths then consider taking assessments like the Gallup StrengthsFinder to gain insights into your personality and work style. Seeking feedback from colleagues, mentors, or friends can also reveal strengths you might not recognize yourself. Keeping a journal to document your thoughts, achievements, and goals can help identify patterns over time. At the end, you know best by doing various experiments. For me it was publishing my first video on YouTube and writing first article on dev.to. By doing so I got nice feedbacks from people which lead me to create more such content.

Once identified, highlight these strengths in your personal brand. For instance, if you're particularly good at machine learning, showcase open-source contributions in that area on platforms like GitHub.

Step 2: Define Your Target Audience

Before effectively communicating your personal brand, know who you're trying to reach. Your target audience could be potential employers, clients, other developers, or a combination of these, each with different expectations and needs.

Potential Employers: If you're looking to advance your career or find a new job, present yourself as competent, reliable, and innovative. Highlight professional achievements, certifications, and relevant experience on your LinkedIn profile.
Clients: For freelancers or consultants, focus on expertise, a portfolio of work, and testimonials from satisfied clients to attract business opportunities.
Other Developers: If building a reputation within the community, share knowledge, participate in open-source projects, and engage in discussions on forums and social media.

To define your audience, ask:

Who do I want to influence or impress with my personal brand?
What are their pain points or needs that I can address?
How can I tailor my message to resonate with them?

Step 3: Create Valuable Content

Creating and sharing valuable content is one of the most effective ways to build your personal brand. This could include blog posts, tutorials, videos, open-source contributions, or any content that demonstrates your expertise and passion, providing value to your target audience.

Choose topics that resonate with your audience. For example, if targeting other developers, write about best practices, new technologies, or common challenges. For potential employers, share thoughts on industry trends or experiences with different programming languages. Ensure content is practical and actionable, like a step-by-step guide on implementing a feature.

Stay up-to-date with the tech industry's evolution, keeping content current and relevant. Consistency is key, regularly publish content, whether weekly, bi-weekly, or monthly, to build momentum. Promote your content on social media, email, and other channels to increase visibility. Remember, creating valuable content isn't just about showcasing skills; it's about building relationships and establishing yourself as a thought leader.

Step 4: Build Your Online Presence

Your online presence is crucial for personal branding in the digital age. As a developer, leverage platforms like LinkedIn, GitHub, Stack Overflow, Dev to, Tech Twitter and a personal website to present yourself to the world.

LinkedIn: Complete your profile with a professional photo, compelling headline, and summary highlighting unique strengths and experiences. It's the go-to platform for professional networking.
GitHub: Showcase coding skills and open-source contributions, keeping your profile updated and engaging with others by commenting on issues and pull requests.
Stack Overflow: Demonstrate knowledge by answering questions and providing helpful comments, building a reputation as a reliable expert.
Personal Website or Blog: Control your narrative by featuring your portfolio, blog posts, and other content that supports your brand.
X (Twitter): Write short, insightful posts related to development, share your journey, and engage in relevant conversations with fellow developers and industry professionals. Follow key influencers, share your work, and contribute to ongoing discussions to build your presence and network.
Dev.to: Write articles about your experiences, coding tutorials, or insights into the latest technologies. Dev.to has a large community of developers that value learning and sharing knowledge.

Ensure consistency across platforms, using the same profile picture and bio to create a cohesive image. Regularly update profiles with new achievements, projects, and content to keep them fresh.

Step 5: Engage with Communities

Engaging with the developer community is vital for building relationships, learning from others, and enhancing your reputation. Participate in discussions, attend events, and network with professionals to strengthen your personal brand.

Join online forums like Reddit's r/learnprogramming, Stack Overflow, Facebook groups and Discord servers related to your interest. Participate by asking questions, sharing knowledge, and contributing to discussions. Attend meetups, hackathons, and conferences to meet other developers, learn new skills, and present your work. Volunteer or mentor at community events to demonstrate leadership and generosity, and contribute to open-source projects for collaboration and visibility.

Engagement is a two-way street, build meaningful connections and contribute to the community

Step 6: Use Social Media Effectively

Social media is a powerful tool for promoting your personal brand. Use platforms like LinkedIn, X, and Instagram to share content, engage with your audience, and stay connected with the tech community.

Choose the right platforms based on your audience, LinkedIn for professional networking, X for real-time updates. Be consistent with your brand voice and messaging across channels. Share valuable content, not just self-promotional material, and engage with others by liking, commenting, and sharing posts. Use right keywords to increase visibility and analyze performance with analytics tools to adjust your strategy.

Social media is a marathon, requiring patience and persistence to build a following and establish presence, as noted in various developer branding guides.

Key Platforms for Online Presence

Platform	Purpose	Tips for Optimization
LinkedIn	Professional networking	Complete profile, professional photo, compelling headline
GitHub	Showcase coding skills	Update with projects, engage with community
Stack Overflow	Demonstrate knowledge	Answer questions, build reputation
Personal Website	Control narrative, feature portfolio	Include blog, portfolio, contact info

Conclusion: Putting It All Together

Building a personal brand as a developer is a journey requiring time, effort, and dedication. It's not achieved overnight, but with a strategic approach, you can create a strong, lasting brand that sets you apart. Now to Summarize the article first identify your strengths, define your audience, create content, build online presence, engage with communities, and use social media effectively. Stay true to your values, be authentic, and continuously improve and learn.

Now, go out there and start building your personal brand. The tech world is waiting for your unique contribution.

Thanks for reading this article, I hope you found it helpful. If you are interested in learning and building project using React, Redux and Next.js you can visit my YouTube channel here: CodeBucks

Here are my other article that you might like to read:

💻Visit my personal blog website from here: DevDreaming
🐥Follow me on X: @code_bucks

Next.js SEO Made Simple: Your Quick Start Guide to Higher Search Rankings

CodeBucks — Fri, 31 Jan 2025 18:14:49 +0000

Did you know a perfectly coded website can remain invisible in search results without proper SEO implementation?

SEO in Next.js is vital for developers and businesses today. Next.js 15 offers powerful server-side rendering and static site generation capabilities. These features ensure search engine crawlers receive complete HTML content and substantially improve your SEO performance.

Next.js's built-in features give you a head start toward better search rankings. These include metadata management, semantic HTML implementation, and Core Web Vitals optimization. You just need to configure these elements correctly to see real results.

This guide covers everything about implementing SEO in Next.js, from simple metadata setup to advanced optimization techniques. Your website's visibility in search results will improve whether you're starting fresh or optimizing an existing project.

Let's start making your Next.js website more search-engine friendly!

Understanding Next.js Metadata Basics

Metadata forms the foundations of SEO implementation in Next.js applications. They brought the Metadata API that gives developers robust tools to define and manage webpage information.

What is Next.js Metadata

Metadata is a vital part of information embedded in your webpage's <head> element. Users can't see it, but this data works quietly to tell search engines and social media platforms everything about your content. Next.js gives you two ways to implement metadata: config-based and file-based methods.

Key Metadata Components

Next.js metadata has these core elements:

Title Metadata: Shows the webpage title in browser tabs and search results
Description Metadata: Gives a quick summary of page content
Keywords Metadata: Lists search terms for indexing
Social Tags: Makes content look better on social platforms
Favicon Metadata: Shows site icons in browsers

On top of that, Next.js adds two default meta tags automatically: the charset tag for character encoding and the viewport tag to adjust for devices.

Effect on SEO Rankings

Search engines use your metadata to crawl and rank pages. The title tag plays a vital role for two main reasons: users see it in search results when they find your website, and search engines use it to understand what your page is about.

Google says description meta tags don't directly change ranking positions, but they substantially boost click-through rates from search results. Social tags, mainly through the Open Graph protocol, help links look better across platforms, which brings more visibility and traffic.

Next.js lets you handle metadata with both static and dynamic approaches. Static metadata works best for information that doesn't change, while dynamic metadata through the generateMetadata function adapts to what's happening at runtime and current route parameters.

Setting Up Static Metadata in Next.js

Static metadata implementation in Next.js is the quickest way to improve your website's search engine visibility. Let's look at how you can set up these SEO elements to work well.

Configuring Basic Meta Tags

Next.js gives you a simple method to implement static metadata through the metadata object export. You can configure basic meta tags by creating a metadata object in your layout.js or page.js file:

export const metadata = {
  title: "Your Website Title",
  description: "Your website description",
  keywords: "nextjs, seo, metadata",
  robots: "index, follow"
}

Implementing OpenGraph Tags

We used OpenGraph tags to make your content look better on social media platforms. Next.js makes OpenGraph implementation easy through a dedicated configuration object:

export const metadata = {
  openGraph: {
    title: "Page Title",
    description: "Page Description",
    url: "https://yourwebsite.com",
    siteName: "Your Site",
    images: [{
      url: "https://yourwebsite.com/og-image.jpg",
      width: 1200,
      height: 630,
      alt: "Page Preview"
    }],
    type: "website"
  }
}

The ideal image size for OpenGraph images is 1200x630 pixels. Your OpenGraph images should stay under 8MB in size.

Adding Twitter Cards

Twitter Cards need specific meta tags to control your content's appearance on the platform. Next.js provides a dedicated twitter object within the metadata configuration:

export const metadata = {
  twitter: {
    card: "summary_large_image",
    title: "Your Title",
    description: "Your Description",
    creator: "@yourusername",
    images: ["https://yourwebsite.com/twitter-image.jpg"]
  }
}

Twitter image files must stay under 5MB. Next.js will generate the appropriate <meta> and <link> tags in your HTML <head> element based on these configurations automatically.

Your metadata should be unique and relevant for each page. This helps search engines and social media platforms understand and present your content better to potential visitors.

Implementing Dynamic Metadata

Dynamic metadata helps Next.js applications adjust their SEO elements based on runtime conditions and route parameters. This advanced approach lets you discover the full potential of content-driven websites and applications.

Using generateMetadata Function

The generateMetadata function is the life-blood of implementing dynamic metadata in Next.js. The function takes route parameters and parent metadata as inputs and returns a metadata object. Here's a practical implementation:

export async function generateMetadata({ params }) {
  const product = await fetch(`https://api.example.com/${(await params).id}`)
    .then((res) => res.json())

  return {
    title: product.title,
    description: product.description
  }
}

Next.js automatically caches the fetch results to avoid multiple requests and streamline processes.

Dynamic Title and Description Strategies

We used dynamic titles and descriptions to boost user experience by providing context-specific information. Titles should be 50-60 characters long to ensure complete visibility in search results.

The metadata generation process follows these essential principles:

Fetch data based on route parameters
Access and extend parent metadata when needed
Generate unique metadata for each page
Cache results to improve performance

Learn more about it from Next.js official documentation.

Handling Dynamic Images

Next.js provides the ImageResponse constructor to generate dynamic images through JSX and CSS. This feature is a great way to get:

Social media cards
Open Graph images
Twitter card images

The implementation needs specific configuration:

import { ImageResponse } from 'next/og'

new ImageResponse(
  element: ReactElement,
  options: {
    width?: number = 1200
    height?: number = 630
    emoji?: 'twemoji' | 'blobmoji' | 'noto' | 'openmoji' = 'twemoji',
    fonts?: {
      name: string,
      data: ArrayBuffer,
      weight: number,
      style: 'normal' | 'italic'
    }[]
    debug?: boolean = false

    // Options that will be passed to the HTTP response
    status?: number = 200
    statusText?: string
    headers?: Record < string, string>
  },
)

Dynamic images work with common CSS properties, including flexbox and absolute positioning. Developers can create sophisticated image layouts that adapt to content changes automatically.

Route-specific images need their generation logic in opengraph-image or twitter-image routes. This approach makes sure images are optimized and delivered based on the current page's context.

Advanced Metadata Configuration

The right setup of advanced metadata elements will boost your Next.js application's search engine presence. Here are three significant components that will improve your website's SEO performance.

JSON-LD Implementation

JSON-LD (JavaScript Object Notation for Linked Data) helps search engines better understand your content through structured data. Note that JSON-LD should be rendered as a <script> tag in your layout.js or page.js components. Here's an example implementation:

export default async function Page({ params }) {
  const product = await getProduct(params.id)
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Product',
    name: product.name,
    image: product.image,
    description: product.description
  }
  return (
    <section>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
    </section>
  )
}

You can verify your structured data using Google's Rich Results Test or Schema Markup Validator, just like other metadata elements.

Canonical URLs Setup

Canonical URLs help you avoid duplicate content problems by pointing to the preferred version of a webpage. Next.js needs specific configuration for canonical URLs. You can add them to your metadata configuration:

export const metadata = {
  alternates: {
    canonical: 'https://example.com/your-page'
  }
}

Next.js will automatically generate canonical URLs for all your pages when you combine this with metadataBase in your root layout.

robots.txt and sitemap.xml Configuration

Search engine crawlers rely on these files to navigate your website. You can create them either statically or dynamically.

Your robots.txt configuration should specify crawler access rules, create robots.js file in your app directory and use the following code.

export default function robots() {
  return {
    rules: {
      userAgent: '*',
      allow: '/',
      disallow: '/private/'
    },
    sitemap: 'https://example.com/sitemap.xml'
  }
}

Next.js gives you two options for sitemap.xml:

Static Configuration:

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://example.com</loc>
    <lastmod>2024-01-24</lastmod>
    <changefreq>yearly</changefreq>
    <priority>1</priority>
  </url>
</urlset>

Dynamic Generation:

export default async function sitemap() {
  const posts = await getPosts()
  return posts.map((post) => ({
    url: `https://example.com/posts/${post.slug}`,
    lastModified: post.updatedAt
  }))
}

Your sitemap should include all important URLs and stay updated regularly. Without doubt, a good setup of these advanced metadata elements will improve your website's visibility in search results.

Troubleshooting Common Issues

Next.js metadata implementation can be tricky. Let's look at common problems and their solutions to help you optimize your SEO smoothly.

Metadata Not Updating

Your metadata might stop updating during client-side navigation. This problem shows up in two main cases:

// Common problematic pattern
"use client"
export const metadata = {
  title: "My Page"  // Won't work in client components
}

Here's how to solve the problems of metadata updates:

Move metadata configuration to server components
Ensure proper route segment configuration
Verify metadata object structure

The metadata updates usually fail because the component has a "use client" directive. Moving the metadata configuration to a server component will fix this issue.

Social Media Preview Problems

Open Graph implementation errors often cause social media preview issues. These problems happen because crawlers can't run JavaScript to get preview information.

You can get better social preview rendering with:

export const metadata = {
  openGraph: {
    title: "Page Title",
    images: [{
      url: "https://example.com/og.png",
      width: 1200,
      height: 630
    }]
  }
}

Test your implementation with these platform tools:

Facebook's debugging tool
Twitter's card validator
LinkedIn's post inspector

Server-side rendering works better than client-side data fetching for social previews. Crawlers can get complete metadata in their first page scan this way.

SEO Validation Errors

Next.js applications often face these SEO validation issues:

Missing or duplicate meta tags
Incorrect status code returns
Inconsistent canonical URLs
Improper robots.txt configuration

A recent study showed all but one of these Next.js websites handled 404 status codes incorrectly. Here's how to fix this:

// Proper 404 page implementation
// pages/404.js
export default function Custom404() {
  return <h1>404 - Page Not Found</h1>
}

Only half of the Next.js websites we analyzed had proper canonical tags. You can set up canonical URLs through metadata configuration:

export const metadata = {
  alternates: {
    canonical: 'https://yoursite.com/current-page'
  }
}

These tools help debug SEO issues:

Google Search Console
Lighthouse reports
Schema validation tools

Most validation errors come from wrong server-side rendering setup or incomplete metadata. Next.js's built-in SEO features and best practices can help you solve these issues effectively.

Conclusion

Mastering Next.js Metadata API unlocks superior search engine optimization outcomes. By combining config-based metadata for global settings and generateMetadata for dynamic pages, you ensure proper metadata inheritance and metadata merging. Don’t overlook JSON-LD structured data for rich snippets or Nextjs og image customization for social traction. Implement these metadata best practices to transform your Next.js app into an SEO powerhouse.

Top 10 Best Open Source Next.js Projects to Learn From

CodeBucks — Mon, 23 Dec 2024 16:00:00 +0000

Hi There👋,

I really like Next.js. It has become a favorite among developers for building fast, scalable, and user-friendly web applications. Its features like server-side rendering, static site generation, and API routes make it a powerful tool for creating modern web experiences.

You know basics of Next.js and you might have created few projects but now what? One of the best ways to learn and improve your Next.js skills is by exploring open source projects. By diving into real-world codebases, you can gain valuable insights into best practices, architectural patterns, and problem-solving techniques.

Here are 10 excellent open source projects built with Next.js that can help you level up your development skills:

1. Cal.com

Description: An open-source scheduling infrastructure platform. It provides a customizable and extensible alternative to Calendly.

Key Features:

Booking pages
Team scheduling
Integrations with various calendars and video conferencing tools

Technologies: Next.js, Tailwind CSS, Prisma, tRPC

GitHub Stars: ~33k+ Check it out from here

Why it's great for learning: Cal.com is a well-structured project that demonstrates how to build a complex web application with Next.js. It showcases advanced concepts like data fetching, API integrations, and UI component design.

2. Rallly

Description: A web application for scheduling group meetings with a focus on simplicity and privacy.

Key Features:

Meeting polls based on participant availability
No sign-up/login required
Customization options

Technologies: Next.js, Tailwind CSS, Radix UI, tRPC, Prisma

GitHub Stars: ~3.8k+ Check it out from here

Why it's great for learning: Rallly is a good example of how to build a user-friendly application with a focus on UX. It utilizes modern tools and libraries and provides a clean and maintainable codebase.

3.Photoshot

Description: An open-source AI avatar generator.

Key Features:

AI-powered avatar generation
Customization options

Technologies: React, Next.js, Chakra UI, Prisma, Replicate, Stripe, Flux

GitHub Stars: ~3.6k+ Check it out from here

Why it's great for learning: Photoshot showcases how to integrate AI models into a Next.js application and create a fun and engaging user experience.

Learn to Build a Full-Stack AI SaaS Application

If you're looking to take your Next.js skills to the next level and build a real-world, revenue-generating application, I highly recommend checking out my new YouTube tutorial. In this tutorial, you'll learn how to build a complete AI SaaS platform using Next.js 15, Supabase, Replicate, and Stripe. 👇👇👇👇

4. Documenso

Description: An open-source alternative to DocuSign for handling digital signatures and document workflows.

Key Features:

Document signing
Template creation
Audit trails

Technologies: Next.js, Tailwind CSS, NextAuth.js, Prisma, Zod, Vitest, Shadcn/ui, React Email, Stripe, PDF-lib

GitHub Stars: ~8.9k+ Check it out from here

Why it's great for learning: Documenso demonstrates how to build a secure and reliable application for handling sensitive data and implementing complex workflows.

5. Inbox Zero

Description: An open-source email app with AI assistance to help you achieve inbox zero.

Key Features:

Email management
AI-powered features for email organization and prioritization

Technologies: Next.js, Tailwind CSS, Tinybird, Prisma, Upstash, Turbo, Shadcn/ui

GitHub Stars: ~3.1k+ Check it out from here

Why it's great for learning: Inbox Zero provides insights into building a feature-rich web application with Next.js and integrating AI capabilities.

6. OpenResume

Description: An open-source resume builder that helps you create professional resumes.

Key Features:

Resume templates
Customization options
PDF export

Technologies: React, Next.js, Redux Toolkit, Tailwind CSS, PDF.js, React-PDF

GitHub Stars: ~7k+ Check it out from here

Why it's great for learning: OpenResume is a good example of how to build a tool with a focus on user experience and design.

7. Formbricks

Description: An open-source survey platform that allows you to create and analyze surveys.

Key Features:

Drag-and-drop survey builder
Various question types
Data analytics and reporting

Technologies: Next.js, Tailwind CSS, Auth.js, Prisma, Zod, Vitest

GitHub Stars: ~9.4k+ Check it out from here

Why it's great for learning: Formbricks provides insights into building interactive forms and handling user input in Next.js applications.

8. Infisical

Description: An open-source secret management platform similar to HashiCorp Vault.

Key Features:

Secure storage of sensitive information
Access control

Technologies: React, Next.js, Tailwind CSS, Stripe, Node.js, AWS

GitHub Stars: ~16k+ Check it out from here

Why it's great for learning: Infisical provides insights into building a secure application with Next.js and handling sensitive data.

9. Plane

Description: An open-source Jira alternative for project management.

Key Features:

Task management
Issue tracking
Project planning

Technologies: React, Next.js, Tailwind CSS, Node.js, Docker, Django

GitHub Stars: ~31.3k+ Check it out from here

Why it's great for learning: Plane demonstrates how to build a complex web application for project management with Next.js.

10. Payload CMS

Description: An open-source, headless CMS built with Node.js, React, and MongoDB. It provides a flexible and powerful way to manage content for your Next.js applications.

Key Features:

Intuitive admin panel
Flexible data modeling
GraphQL and REST APIs
Authentication and authorization

Technologies: Next.js, React, Node.js, MongoDB

GitHub Stars: ~30.4k+ Check it out from here

Why it's great for learning: Payload CMS is a robust project that demonstrates how to build a full-stack application with Next.js and integrate it with a database and a CMS. It showcases advanced concepts like data modeling, API development, and user authentication. It's particularly valuable for learning how to build content-driven websites and web applications.

Thanks for reading this article, I hope you found it helpful. If you are interested in learning and building project using React, Redux and Next.js you can visit my YouTube channel here: CodeBucks

Here are my other article that you might like to read:

💻Visit my personal blog website from here: DevDreaming
🐥Follow me on X: @code_bucks

How I Cloned a $1M AI SaaS Application Using Next.js, Supabase, Replicate and Stripe

CodeBucks — Tue, 10 Dec 2024 14:13:03 +0000

Have you heard about Pieter Levels’ PhotoAI app making $120k/month? It’s a game-changer in AI-powered professional photography. Inspired by its success, I set out to replicate its core features in a tutorial that combines cutting-edge tech with practical development skills.

This project combines state-of-the-art technologies with practical implementation to help you create a modern, scalable platform for generating professional AI-powered photos.

Watch the full tutorial from here👇

Key Features of My Clone🔑:

AI-Driven Creativity: Train custom AI models to generate stunning headshots and social media content. We will use latest image generation model called FLUX.
User-Friendly Design: Clean, modern UI built with shadcn-ui and Tailwind CSS.
Business-Ready: Integrated Stripe payments and Supabase for database/authentication needs.

What You’ll Learn🛠️:

This step-by-step guide will walk you through the entire process of building and deploying Pictoria AI:

🌟 UI Development with Modern Tools:

Set up your development environment using Next.js 15, Tailwind CSS, and Shadcn UI to craft a sleek, responsive user interface.

🌟 Database Management with Supabase:

Implement authentication, storage, and a robust database system with Supabase.

🌟 AI Model Training:

Use Replicate AI API to train custom AI models on personal images and understand how techniques like LoRA (Low-Rank Adaptation) work to enhance performance. We will use latest image generation model called FLUX.

🌟 Payments and Monetization:

Set up secure, efficient payment processing with Stripe, and learn how to integrate it seamlessly into your platform.

🌟 State Management & Notifications:

Efficiently handle application state using Zustand and implement email notifications with Resend to improve user experience.

🌟 Handling Long-Running Tasks:

Configure webhooks to manage complex tasks in the background without impacting user workflows.

What Sets This Tutorial Apart?

Whether you’re a beginner eager to build your first full-stack app or an experienced developer looking to sharpen your skills, this tutorial has something for everyone. By the end, you’ll have a deployable AI SaaS platform and a deeper understanding of the technologies driving the future of software development.

Watch the Demo & Start Building🎥

I’ve included a full video walkthrough to make it easy for you to follow along. Whether you’re looking to level up your development skills or create a marketable SaaS, this project is your blueprint.

Thanks For Reading😄

Checkout my other tutorials:

Feel free to visit my youtube channel: @CodeBucks

Checkout my personal blog website: DevDreaming

Cursor AI Crash Course⚡: boost Your Productivity with AI-Powered Coding

CodeBucks — Tue, 17 Sep 2024 11:32:00 +0000

Hey folks! 👋

I've been using Cursor AI since last few weeks, and it's really great for those of us working on webdevelopment projects. This Cursor AI code editor makes coding feel more intuitive, offering multi-file editing, AI code suggestions, and chat assistance that understands your project context. In the tutorial I have created one small Ecom website within few minutes with the help of cursor AI composer.

In this crash course, I explored how you can use Cursor AI to optimize your web-development workflow.

You can checkout the tutorial from here:

Here are few features that I have covered in the video:

Multi-line Autocomplete: Easily scaffold pages and components.
AI Chat Debugging: Ask questions about bugs, performance issues, and even best practices!
Multi-file Refactoring: Make changes across multiple files seamlessly.
Cursor AI Composer: This one is my fabourite feature. Basically it can create whole boilerplate code for you based on your text prompt. You can provide the latest documentations and it will give more accurate results.

I also demonstrate a few real-world Next.js examples, like setting up dynamic routes and optimizing API calls, creating an ECOM website within few minutes. If you're curious about AI in code, this might be worth a look.

What are your thoughts on using AI in development? Have you tried something like Cursor yet?

Here are my other article that you might like to read:

Visit my personal blog website from here: DevDreaming
Visit my YouTube channel from here: CodeBucks