DEV Community: Joodi

MeetCast: Launch Your Own Webinar Platform in Minutes, Without a VPS

Joodi — Sat, 26 Sep 2026 13:48:11 +0000

MeetCast is a free and fast way to launch your own webinar platform, even without a VPS.
You can also test its features in the demo version.

To get started, you only need to configure PostgreSQL and LiveKit in your ENV and deploy the project. For getting started, free services are enough.

Webinar Features:
• Create and schedule Webinars and Meetings
• Public and Private Rooms
• Invite Links and Guest Join
• HD Video and Audio
• Screen Sharing
• Participant Grid and speaking status
• Chat, Reactions, and Raise Hand
• Host and Moderator tools
• Mute, Disable Camera, Remove, and Promote/Demote users
• Restrict access to private meetings with Email Allowlist

Platform Management:
• Admin panel for managing users, meetings, Plans, and orders
• Create different Plans and set limits such as participant capacity and meeting duration
• Manage user access based on their Plan
• Email-based registration and login
• Email Verification and Forgot Password using your own email service
• Billing and Checkout are ready, only payment gateway integration remains

🚀 Demo: http://webinari.ir/
💻 GitHub: https://miladjoodi.github.io/#project/meetcast
🌐 Portfolio: https://lnkd.in/ebHU8PsB

If you run into any issues while setting up or using MeetCast, feel free to reach out to me by email.

CaptchaKit: A Self-Hosted CAPTCHA Package for React & Next.js + Try It Live

Joodi — Fri, 25 Sep 2026 19:13:30 +0000

Adding CAPTCHA to a React or Next.js app usually means relying on an external service.

It supports:
• Text, number, math, and image CAPTCHAs
• English and Persian (RTL)
• Easy, medium, and hard difficulty
• Light and dark themes
• Server-side verification
• HMAC-signed tokens
• Expiration, one-time usage, attempt limits, and rate limiting

The goal was simple: add CAPTCHA protection without adding another external service to your stack.

The full technical details and setup are available in the documentation.
🔗 Live demo: https://captchakit.netlify.app/
📦 npm: https://www.npmjs.com/package/captchakit
💻 GitHub: https://github.com/MiladJoodi/CaptchaKit

Resend: The easiest way to add email to your app

Joodi — Fri, 25 Sep 2026 15:02:46 +0000

Need to add email to your web app?

Resend lets you send, receive, track, and manage emails through a simple developer-friendly API.

What can you do with it?
📨 Transactional emails Verification, password reset, invitations, notifications, and more.

🎨 React Email Build email templates with React and TypeScript instead of dealing with messy email HTML.

📅 Scheduling & batch sending Schedule emails or send batches through the API.

📎 Attachments Send files with your emails.

🔔 Webhooks Receive events for deliveries, bounces, opens, clicks, and other email activity.

📥** Inbound emails** Receive emails in your application and process their content and attachments.

👥 Audiences & broadcasts Manage contacts and send email campaigns with analytics.

📊 Logs & analytics Monitor email activity and troubleshoot delivery issues.

🔐 Custom domains Send from your own domain with SPF, DKIM, and DMARC authentication.

🔁 Idempotency Prevent duplicate emails when requests are retried.

How to set it up
1. Create a Resend account Create your account and generate an API key.

Add your domain Add your domain in Resend and configure the required DNS records for email authentication.

3. Add the API key
RESEND_API_KEY=re_xxxxxxxxx
Keep it server-side. Never expose the API key in client-side code.

4. Install the SDK
npm install resend

Send your first email

Article content
With Next.js, you can call Resend from a Route Handler or Server Action, keeping the API key on the server.

That's basically it.

If you're building with Next.js, React, Node.js, or TypeScript, Resend is definitely worth checking out.

How I Got a Next.js Project to 100% SEO on Lighthouse

Joodi — Tue, 15 Sep 2026 05:21:55 +0000

I recently went through the SEO setup of MockData and wanted to see how far I could push the technical side of it.

The goal wasn't to rank #1 on Google.

I just wanted to make sure search engines could properly understand and discover the pages I actually want indexed.

After going through Lighthouse and fixing the issues one by one, MockData reached 100 SEO on Lighthouse.

Here are the main things I changed.

1. Centralized metadata

One thing that was getting annoying was managing metadata separately across different pages.

So I created a small helper to keep things consistent:

export function createPageMetadata({
  title,
  description,
  path,
  noIndex = false,
}: PageMetadata) {
  return {
    title,
    description,
    alternates: {
      canonical: path,
    },
    robots: noIndex ? "noindex, nofollow" : "index, follow",
    openGraph: {
      title,
      description,
      url: path,
      type: "website",
    },
  };
}

Now a page can simply define what is different instead of rebuilding all the metadata every time.

2. Fixed the root layout

I also moved the global defaults into layout.tsx.

Things like:

metadataBase
title template
default description
Open Graph
Twitter cards
robots
lang

For example:

export const metadata: Metadata = {
  metadataBase: new URL("https://mockdata.ir"),
  title: {
    default: "MockData",
    template: "%s | MockData",
  },
  description: "...",
};

This also makes relative URLs such as canonical and Open Graph URLs resolve correctly.

3. Added robots.txt

I added a real robots.ts instead of leaving crawler rules undefined.

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

Nothing fancy.

Just clear rules and a sitemap location.

4. Added a dynamic sitemap

MockData has more than just a few static pages.

There are resource pages for things like users, posts, products, and other data.

So instead of maintaining a huge static XML file manually, I generate the sitemap through Next.js:

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const resources = await getPublicResources();

  return [
    {
      url: "https://mockdata.ir",
      lastModified: new Date(),
    },
    ...resources.map((resource) => ({
      url: `https://mockdata.ir/${resource.slug}`,
      lastModified: resource.updatedAt,
    })),
  ];
}

That means new public resources can automatically become part of the sitemap.

5. Added structured data

For pages where it actually makes sense, I added JSON-LD using Schema.org.

For example, the application itself can be described as a SoftwareApplication.

I also used:

WebSite
Organization
SoftwareApplication
BreadcrumbList

The important part here is not adding as much schema as possible.

Only add structured data that actually represents the content on the page.

No fake reviews.

No fake ratings.

No made-up information just to make Google happy.

6. Added breadcrumbs

For nested pages, users can now see a clear hierarchy such as:

Home → Docs → Users API

I also represent the same hierarchy in BreadcrumbList structured data.

The UI and structured data should describe the same page structure.

7. Checked every indexable page

Finally, I went through the public pages individually.

For each one I checked:

Is there one clear H1?
Does the title describe the page?
Does the description match the actual content?
Are there useful internal links?
Should this page really be indexed?
Is there any empty or useless page exposed to crawlers?

Not every page needs to be indexed.

Sometimes noindex is the correct SEO decision.

The result

After fixing these things, I ran Lighthouse again.

SEO: 100

But there's an important distinction here.

A 100 Lighthouse SEO score does not mean your website will rank first on Google.

Lighthouse is mostly checking technical SEO basics.

Actual search rankings depend on much more:

Content quality, search intent, authority, backlinks, competition, performance, and many other factors.

For me, the useful part of this process wasn't really the number 100.

It was making sure MockData has a clean technical foundation before worrying about rankings.

You can check the project here:

https://mockdata.ir

If you're building a Next.js app, I'd definitely recommend going through the Lighthouse SEO audit before shipping it.

It catches a surprising number of small things.

Vercel & Netlify Are Great. But What About Deploying Background Workers?

Joodi — Sun, 13 Sep 2026 11:25:36 +0000

I recently tried Railway for one of my Next.js projects.

I needed a background worker to process GitHub data and jobs continuously.

Vercel and Netlify are great for serverless apps, but they're not designed for long-running worker processes.

Railway makes it simple to run workers, databases, cron jobs, and backend services, while also making environment variables and logs easy to manage.

It feels like having more control over the backend without having to manage the infrastructure yourself.

Definitely a tool I'll be using more.

No signup. No card. Free GPT & Claude.

Joodi — Wed, 26 Aug 2026 08:12:08 +0000

Just go to: https://Duck.ai

Duck.ai (by DuckDuckGo ) lets you chat with several AI models for free. Your requests are anonymized, and chats aren’t stored on DuckDuckGo’s servers by default.

Current free models:

GPT-5.6 Luna – best for everyday use (default)
GPT-5.4 mini – solid, but hits limits sooner
Claude Haiku 4.5
Mistral Small 4
gpt-oss-120b
Gemma 4 31B

If you care about privacy and want quick access to good models without signing up, it’s worth trying.

Your Date Picker Is Outdated. Here’s a Better Way.

Joodi — Sat, 15 Aug 2026 14:54:29 +0000

Most React apps still use the same old date picker. It works… but it feels clunky, especially on mobile.

There’s a much better way: an iOS-style Wheel Picker.

It scrolls smoothly, has that natural inertia feel, supports infinite looping, and just looks more polished. Users actually enjoy interacting with it. 😊

One of the best libraries for this right now is @ncdai/react-wheel-picker.

It’s:

Lightweight and unstyled (so you can fully customize it)
Smooth on both touch and desktop
Supports keyboard navigation
Easy to install with shadcn if you’re using it

Live demo: https://react-wheel-picker.chanhdai.com

npm: https://www.npmjs.com/package/@ncdai/react-wheel-picker

GitHub: https://github.com/ncdai/react-wheel-picker

Install it with:

npm install @ncdai/react-wheel-picker

If you’re building forms, filters, or any kind of selection UI, give this a try. It’s one of those small upgrades that makes your product feel noticeably better.

Have you switched to wheel pickers yet? Curious to hear your experience.

Tried Zed for a few days — here’s what actually stood out

Joodi — Sun, 09 Aug 2026 10:58:22 +0000

Zed is a fast, minimal code editor built in Rust. The same team behind Atom and Tree-sitter made it. It’s designed for speed and working with both humans and AI.

A few things that stood out:

It’s really fast. Opening projects and switching files feels almost instant.
You can run AI agents right inside the editor.
It has real collaboration features if you’re coding with someone else.
You can import settings from VS Code or Cursor.
On the free plan you can still connect your own models. I used OpenRouter and it worked fine.
You can try Pro for 14 days without adding a credit card.
They actually collaborated with Anthropic early on when building the AI features.

One small tip: the folder panel is on the right by default. If you prefer it on the left like VS Code, you can move it. Guide is here:
https://zed.dev/blog/new-panel-system

Overall it feels clean and light. If you’re looking for something faster and simpler than the usual options, it’s worth a try.

🥈 React Performance Tips: 12 Ways to Make Your App Faster

Joodi — Wed, 05 Aug 2026 20:00:30 +0000

React is fast by default.

But as an application grows, unnecessary renders, large lists, too much JavaScript, and excessive API requests can make it slower.

The good news is that you don't need complicated tricks everywhere.

Let's look at 12 practical ways to improve React performance, from simple improvements to more advanced techniques.

1. Stop Rendering What You Don't Need

Every time a component renders, React runs its component function again.

That doesn't mean every render is a problem. The problem is doing expensive work when nothing actually changed.

For example, avoid putting unrelated state in a component that contains a large part of your UI.

Instead, keep components focused so an update only affects the part of the UI that actually needs it.

The goal isn't to prevent every render.

The goal is to avoid unnecessary work.

2. Keep Your State in the Right Place

Don't move every piece of state to the top of your application.

If only one component needs the state, keep it there.

function SearchBox() {
  const [query, setQuery] = useState("");

  return (
    <input
      value={query}
      onChange={(e) => setQuery(e.target.value)}
    />
  );
}

Keeping state close to where it is used can reduce unnecessary updates in other parts of the application.

Keep state as close as possible to the components that use it.

3. Don't Store Data You Can Calculate

Not everything needs useState.

For example, don't store fullName separately if you already have firstName and lastName.

Avoid:

const [fullName, setFullName] = useState("");

useEffect(() => {
  setFullName(`${firstName} ${lastName}`);
}, [firstName, lastName]);

Just calculate it:

const fullName = `${firstName} ${lastName}`;

This avoids unnecessary state and an unnecessary Effect.

A simple rule:

If you can calculate it during render, you probably don't need state for it.

4. Make Large Lists Faster

Rendering thousands of elements can become expensive.

Imagine a chat application with 10,000 messages.

You don't need all 10,000 messages in the DOM at the same time.

For large lists, consider:

Virtualization
Pagination
Infinite scrolling

Virtualization keeps only the visible items, plus a small buffer, mounted in the DOM.

Libraries such as react-window can help with this.

Don't add virtualization to every list. A list with 50 items probably doesn't need it.

5. Load Heavy Components Only When Needed

Your users shouldn't have to download code they don't need immediately.

React supports lazy loading with lazy and Suspense:

const Settings = lazy(() => import("./Settings"));

Now the Settings component can be loaded when it is needed instead of being included in the initial JavaScript.

This is useful for heavy or rarely visited features such as:

Charts
Editors
Maps
Settings pages
Large dashboards

Smaller initial bundles usually mean faster initial loading.

6. Keep Search and UI Interactions Responsive

Some updates don't need to happen immediately.

For example, a search input should respond instantly while filtering thousands of results can happen at a lower priority.

React provides useTransition and useDeferredValue for these situations.

You can also debounce user input:

const debouncedSearch = useDebounce(search, 500);

Instead of sending a request on every keystroke, you can wait until the user stops typing.

These techniques are useful for search, filtering, large lists, and complex dashboards.

7. Avoid Unnecessary API Requests

Performance isn't only about rendering.

Too many network requests can also make your application feel slow.

Depending on your application, consider:

Caching responses
Request deduplication
Pagination
Debouncing search
Canceling outdated requests

For example, if a user quickly searches for:

react
react performance
react performance optimization

you don't necessarily want three requests running at the same time.

The goal is simple:

Don't make the network do work you don't need.

8. Memoization: When Should You Actually Use It?

React provides three common memoization tools:

useMemo caches a calculation result.
useCallback caches a function reference.
React.memo can skip a component render when its props haven't changed.

For example:

const filteredUsers = useMemo(() => {
  return users.filter(user =>
    user.name.includes(search)
  );
}, [users, search]);

But don't add memoization everywhere.

Memoization also has a cost and adds complexity.

Use it when:

A calculation is expensive.
A component renders unnecessarily.
A stable reference is actually useful.

Don't optimize code that doesn't have a performance problem.

9. React Compiler: Less Manual Optimization

Modern React introduces another important piece: React Compiler.

The Compiler can automatically optimize components, values, and functions in many cases, reducing the need for manual memoization.

That means you shouldn't automatically think:

useMemo(...)
useCallback(...)
React.memo(...)

whenever you see a performance problem.

First ask:

Is there actually a performance problem?

If React Compiler is enabled for your project, let it handle the optimizations it can, and use manual memoization when you have a specific reason to do so.

10. Use Stable Keys and References

Keys help React identify items in a list.

Prefer:

items.map(item => (
  <Item key={item.id} />
));

Instead of:

items.map((item, index) => (
  <Item key={index} />
));

Stable keys help React understand which item was added, removed, or changed.

The same idea applies to object and function references.

Creating new objects or functions on every render can matter when you're working with memoized components.

11. Find the Real Bottleneck

Once you understand the common optimization techniques, don't guess.

Use React DevTools Profiler to see which components render and how much time they take.

You can also use the browser's Performance panel to investigate:

Long tasks
Slow scripting
Layout work
Rendering problems

Instead of saying:

"This component feels slow."

Find out why it is slow.

12. Measure Again Before You Ship

After making an optimization, measure the result again.

Did the render time improve?

Did the bundle become smaller?

Did the interaction become more responsive?

If the change doesn't improve anything, you may not need it.

Performance Checklist

Before shipping your React application, ask:

Am I rendering unnecessary UI?
Is my state in the right place?
Am I storing values I can calculate?
Are large lists handled efficiently?
Am I loading heavy code only when needed?
Are search and interactions responsive?
Am I making unnecessary API requests?
Am I using memoization for a real reason?
Can React Compiler handle the optimization?
Am I using stable keys?
Did I measure the actual bottleneck?
Did I verify the improvement afterward?

The best React optimization isn't adding more code.

It's making React do less unnecessary work.

🚀 Next.js 16.3 Has a New useOffline Hook

Joodi — Tue, 04 Aug 2026 12:54:35 +0000

Meet useOffline 👇

It lets you know when the user loses their internet connection.

const isOffline = useOffline()

return isOffline
  ? <p>You’re offline</p>
  : <App />

So instead of your app silently breaking when the connection drops, you can show a proper offline state.

For example:
📡 Online→ Show the app
📴 Offline→ Show an offline message or disable actions that need the network

One important thing:

useOffline does not make your app offline-first.

You still need things like caching, IndexedDB, and sync logic if you want the app to actually work offline.

⚠️ useOffline is currently experimental, so its API may change.

📚 Docs: Next.js Documentation

No More nodemon or dotenv? Node.js Can Handle It Now

Joodi — Sun, 02 Aug 2026 20:00:02 +0000

You might not need two popular packages in your Node.js projects anymore.

Since Node.js 20.6, Node can load .env files natively with --env-file.
And since Node.js 22, --watch is stable for automatic restarts.

node --env-file=.env --watch app.js

That’s it.

No dotenv.
No nodemon.
No extra setup.

For a simple Node.js app, the runtime can now handle both.
Of course, nodemon and dotenv still make sense if you need their extra features.

📌 Official Node.js docs: Node.js CLI documentation

If Claude Code is expensive or hard to access for you, try OpenCode

Joodi — Thu, 30 Jul 2026 09:56:02 +0000

If Claude Code is expensive or hard to access for you, try OpenCode.

It’s an open-source AI coding agent that works in the terminal, desktop, and as a VS Code extension.

Free models available:

DeepSeek V4 Flash Free (best option)
MiMo v2.5 Free
Nemotron 3 Ultra Free
North Mini Code Free
Big Pickle
Ling-3.0-flash Free
Laguna S 2.1 Free

These free models work well for most daily coding tasks. Note: They have daily usage limits (they reset every day).

How to install (Windows):
First, make sure Node.js is installed on your system.

Then run:

npm install -g opencode-ai

After installation, run:

opencode

You can also install the VS Code extension for a smoother experience.

There's also a desktop app. You can open your project directly in it and use the AI agent without relying on VS Code.

Like Claude Code, it guides you through actions by presenting options and asking for confirmation before executing them.

OpenCode lets you use free models or connect any API key you want. It’s flexible, open-source, and a solid alternative to Claude Code.

I tested it myself. Setup is easy and the free models are usable for real work.

Link: https://opencode.ai/