DEV Community: codeek

🚀 I Built an Entire Animated Movie with Just One AI Tool in Minutes | Flova AI (2026)

codeek — Sun, 02 Aug 2026 15:20:39 +0000

Creating an animated movie has traditionally required multiple tools for scripting, storyboarding, voice generation, music composition, video editing, and rendering.

But what if one AI platform could handle the entire workflow?

Recently, I challenged Flova AI to create an entire animated movie from a single prompt—and the results were surprisingly impressive.

🎬 What Flova AI Can Do

With just a simple prompt, Flova AI can generate:

📝 Complete movie scripts
🎬 Storyboards
🎭 Consistent AI characters
🎙️ AI voiceovers
🎵 Background music
🎥 Fully edited cinematic videos

Everything is synchronized automatically, so creators can focus on storytelling instead of switching between multiple tools.

💡 My Experience

Creating an animated short film usually involves:

Writing the script
Designing characters
Creating visuals
Recording voiceovers
Adding background music
Editing the final video

With Flova AI, I simply described my idea.

Within minutes, it generated a complete animated movie that was ready for refinement.

While it isn't perfect, it's an incredible starting point and dramatically reduces the time required to produce animated content.

This makes it especially useful for:

🎥 YouTube creators
📚 Educators
📢 Marketers
🎬 Indie filmmakers

🤔 Is Flova AI Worth It?

If you're looking to:

Create animated YouTube videos
Produce AI short films
Build marketing videos quickly
Experiment with AI filmmaking

Then Flova AI is definitely worth trying in 2026.

It brings nearly every stage of animated video production into one platform, making AI filmmaking more accessible than ever.

🎥 Watch the Full Tutorial

I recorded the complete workflow—from a single prompt to a finished animated movie.

🎬 YouTube:

https://www.youtube.com/watch?v=dAzOLjP4IPU

In the video, I demonstrate every step, share the generated results, and discuss both the strengths and current limitations of the platform.

🚀 Learn React by Building a Real E-commerce App

If you're learning modern React or preparing for frontend interviews, check out my Modern React E-commerce Series.

📺 Watch here:

https://www.youtube.com/watch?v=SdITjnl-zo8

You'll Learn

⚛️ React 19
📘 TypeScript
🧭 React Router
🔄 TanStack Query
🛒 Shopping Cart
💳 Checkout Flow
🏗️ Clean Architecture
✅ Best Practices for Real Projects

Instead of building another small demo project, you'll create a complete production-style e-commerce application from scratch.

Perfect for improving your React skills, strengthening your portfolio, and preparing for real-world frontend development.

💙 Final Thoughts

AI is changing content creation at an incredible pace, and tools like Flova AI are making animated filmmaking accessible to everyone.

If you've ever wanted to create your own animated movie, now is a great time to start experimenting.

Happy coding! 🚀💙

🚀Master React Router Error Handling with `useRouteError`

codeek — Mon, 27 Jul 2026 09:04:39 +0000

One of the easiest ways to improve your React application's user experience is by handling unexpected errors gracefully.

Instead of showing users a blank white screen or cryptic error messages, React Router provides the useRouteError hook along with route-level Error Boundaries to display meaningful fallback UI whenever something goes wrong.

In this guide, you'll learn how to implement professional error handling in React Router step by step.

Why Do You Need Error Handling?

Applications can fail for many reasons:

API requests fail
Invalid route parameters
Missing resources
JavaScript runtime errors
Loader or action exceptions

Without proper handling, users often see:

❌ Blank pages
❌ Console errors
❌ Broken UI

A custom error page gives users a much better experience while helping developers debug problems.

What is `useRouteError`?

useRouteError is a hook provided by React Router that allows an Error Boundary component to access the error that caused the route to fail.

Whenever:

a loader throws an error,
an action throws an error,
or a rendering error occurs inside a route,

React Router automatically renders the route's errorElement instead of the normal page.

Project Structure

src/
 ├── App.tsx
 ├── pages/
 │    ├── Home.tsx
 │    ├── Users.tsx
 │    └── ErrorPage.tsx
 └── router.tsx

Step 1 — Create an Error Page

Create a reusable error component.

import { useRouteError, isRouteErrorResponse } from "react-router-dom";

export default function ErrorPage() {
  const error = useRouteError();

  if (isRouteErrorResponse(error)) {
    return (
      <div>
        <h1>{error.status}</h1>
        <p>{error.statusText}</p>
      </div>
    );
  }

  return (
    <div>
      <h1>Oops!</h1>
      <p>Something went wrong.</p>
    </div>
  );
}

What's happening here?

useRouteError() returns the error thrown by the current route.
isRouteErrorResponse() checks whether the error is a React Router Response.
If it's a router error, we display the HTTP status.
Otherwise, we show a generic fallback message.

Step 2 — Register the Error Boundary

Attach your error page using errorElement.

import { createBrowserRouter } from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />,
    errorElement: <ErrorPage />,
  },
]);

Now every error inside this route will automatically render your custom error page.

Step 3 — Throw an Error

Inside a loader:

export async function loader() {
  throw new Response("Not Found", {
    status: 404,
  });
}

Or throw a normal JavaScript error:

throw new Error("Something broke!");

React Router will immediately render the ErrorPage.

Step 4 — Handle Different HTTP Status Codes

Instead of showing one generic message, provide helpful feedback.

if (isRouteErrorResponse(error)) {
  switch (error.status) {
    case 404:
      return <h1>Page Not Found</h1>;

    case 401:
      return <h1>Unauthorized</h1>;

    case 500:
      return <h1>Internal Server Error</h1>;

    default:
      return <h1>Something went wrong.</h1>;
  }
}

Users instantly understand what happened.

Step 5 — Handle Unexpected JavaScript Errors

Not every error comes from a loader.

if (error instanceof Error) {
  return (
    <>
      <h1>Unexpected Error</h1>
      <p>{error.message}</p>
    </>
  );
}

This is useful during development and for catching runtime exceptions.

Route-Level Error Boundaries

One of React Router's best features is that every route can have its own Error Boundary.

{
  path: "/users",
  element: <Users />,
  loader: usersLoader,
  errorElement: <UsersError />
}

If the /users page fails, only that section is replaced with the error UI while the rest of your application continues working normally.

This keeps your app resilient and improves the overall user experience.

Best Practices

✅ Always define an errorElement.
✅ Use isRouteErrorResponse() before accessing status.
✅ Display friendly messages instead of technical errors.
✅ Handle common HTTP status codes like 404, 401, and 500.
✅ Log unexpected errors to services such as Sentry.
✅ Create reusable error components for consistency.
✅ Use route-level boundaries whenever possible.

Common Mistakes

❌ Forgetting `errorElement`

{
  path: "/",
  element: <Home />
}

Without an errorElement, your users won't see your custom error page.

❌ Assuming Every Error is a Response

Always check first:

isRouteErrorResponse(error)

Otherwise, accessing status may throw another error.

❌ Showing Sensitive Information

Avoid exposing stack traces or server details in production.

Instead:

Show a friendly message.
Log the real error internally.
Help users recover with navigation or retry buttons.

Final Thoughts

A polished application isn't just about beautiful UI—it also handles failures gracefully.

By combining useRouteError with route-level errorElement components, you can catch loader failures, runtime exceptions, and HTTP errors without crashing the entire application.

It's a small feature that dramatically improves both the developer experience and the end-user experience.

📺 Prefer Video Tutorials?

If you'd rather follow along visually, check out my complete YouTube tutorial where I explain everything step by step with practical examples.

🎥 Watch here: https://www.youtube.com/watch?v=yPsco6gnFuc

🚀 Learn React by Building a Production-Ready Ecommerce App

If you're serious about mastering modern React development, don't miss my Modern React Ecommerce Series, where you'll build a complete production-ready application using technologies like:

React
TypeScript
React Router
TanStack Query
Authentication & Authorization
Stripe Payments
Firebase
Responsive UI
Modern Folder Structure
Best Practices

Here is a Youtube video:

https://www.youtube.com/watch?v=SdITjnl-zo

By the end of the series, you'll have the confidence to build scalable React applications from scratch.

Happy Coding! 🚀

🚀How to Use `next/image` properly in Next.js to Maintain Aspect Ratio

codeek — Sat, 25 Jul 2026 03:31:44 +0000

Images are one of the biggest contributors to page load time. Fortunately, Next.js provides the built-in next/image component that automatically optimizes images for better performance while preserving quality.

One of the most common issues developers face is maintaining the correct aspect ratio across different screen sizes without stretching or squashing images.

In this guide, you'll learn the best practices for using the Image component while keeping your images responsive and maintaining their aspect ratio.

Why Use `next/image`?

Compared to the traditional <img> tag, next/image provides:

Automatic image optimization
Lazy loading by default
Responsive image generation
Better Core Web Vitals
Reduced layout shifts (CLS)
Automatic WebP/AVIF support (when available)

Simply import it:

import Image from "next/image";

1. Using Fixed Width & Height

The simplest approach is specifying both width and height.

import Image from "next/image";

export default function App() {
  return (
    <Image
      src="/images/profile.jpg"
      alt="Profile"
      width={400}
      height={300}
    />
  );
}

Next.js automatically calculates the aspect ratio from these values and prevents image distortion.

2. Responsive Images Using `fill`

For responsive layouts, fill is usually the best choice.

First, create a relative parent.

<div className="image-container">
  <Image
    src="/images/banner.jpg"
    alt="Banner"
    fill
    className="image"
  />
</div>

CSS:

.image-container {
  position: relative;
  width: 100%;
  height: 350px;
}

.image {
  object-fit: cover;
}

fill makes the image fill its parent while object-fit controls how the image scales.

3. Understanding `object-fit`

The object-fit property determines how your image behaves inside its container.

Cover

<Image
  fill
  src="/images/photo.jpg"
  alt="Photo"
  style={{ objectFit: "cover" }}
/>

✅ Fills entire container

✅ Maintains aspect ratio

❌ May crop image

Perfect for:

Hero sections
Cards
Banners

Contain

<Image
  fill
  src="/images/logo.png"
  alt="Logo"
  style={{ objectFit: "contain" }}
/>

✅ Entire image visible

✅ Maintains aspect ratio

❌ Empty space may appear

Perfect for:

Logos
Product images
Icons

Fill

<Image
  fill
  src="/images/photo.jpg"
  alt="Photo"
  style={{ objectFit: "fill" }}
/>

⚠️ Stretches the image

⚠️ Does not preserve aspect ratio

Use only when intentional.

4. Using CSS `aspect-ratio`

Modern browsers support the aspect-ratio property.

<div className="wrapper">
  <Image
    src="/images/mountain.jpg"
    alt="Mountain"
    fill
    className="image"
  />
</div>

.wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.image {
  object-fit: cover;
}

This is one of the cleanest ways to build responsive image containers.

5. Responsive Width with Automatic Height

You can also make images scale naturally.

<Image
  src="/images/photo.jpg"
  alt="Photo"
  width={1200}
  height={800}
  style={{
    width: "100%",
    height: "auto",
  }}
/>

This keeps the aspect ratio while allowing the image to resize responsively.

6. Using the `sizes` Prop

When using responsive images, don't forget sizes.

<Image
  fill
  src="/images/banner.jpg"
  alt="Banner"
  sizes="(max-width: 768px) 100vw, 50vw"
  style={{ objectFit: "cover" }}
/>

This helps Next.js generate the most appropriate image size, reducing unnecessary downloads.

7. Local Images

Store images inside the public directory.

public
 └── images
      └── profile.jpg

Use them like this:

<Image
  src="/images/profile.jpg"
  alt="Profile"
  width={500}
  height={500}
/>

8. Importing Images

Instead of using string paths, you can import images directly.

import profile from "@/public/images/profile.jpg";

<Image
  src={profile}
  alt="Profile"
/>

Next.js automatically knows the image dimensions.

9. Remote Images

Configure external domains.

// next.config.js

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "images.unsplash.com",
      },
    ],
  },
};

Now you can safely load remote images.

<Image
  src="https://images.unsplash.com/photo.jpg"
  alt="Unsplash"
  width={800}
  height={600}
/>

Common Mistakes

❌ Setting only width

<Image width={400} />

❌ Stretching images

img {
  width: 100%;
  height: 100%;
}

❌ Forgetting sizes when using fill

<Image fill />

Without sizes, larger images than necessary may be downloaded.

Best Practices

✅ Always provide a meaningful alt attribute.
✅ Prefer fill for responsive layouts.
✅ Use object-fit: cover for banners and cards.
✅ Use object-fit: contain for logos and product images.
✅ Add the sizes prop when using fill.
✅ Store static assets inside the public directory or import them directly.
✅ Avoid stretching images with fixed width and height in CSS.
✅ Use the CSS aspect-ratio property for responsive containers.

Conclusion

The next/image component makes image optimization effortless while helping improve performance, SEO, and Core Web Vitals. By combining fill, object-fit, sizes, and the CSS aspect-ratio property, you can create responsive images that maintain their aspect ratio across every device without distortion.

Following these practices will result in faster-loading pages, better user experiences, and cleaner layouts in your Next.js applications.

🎥 Prefer Video Tutorials?

If you'd like to follow along with a practical walkthrough, check out the complete YouTube tutorial:

📺 How to use Image properly in Next.js to maintain Aspect Ratio | Next.js Tips

https://www.youtube.com/watch?v=Xi5apyDDeyQ

🛒 Learn to Build a Complete Modern Ecommerce Application

If you're looking to master React by building a production-ready Ecommerce application from scratch, be sure to check out this complete playlist covering authentication, cart, checkout, API integration, routing, state management, deployment, and much more.

🚀 Modern Ecommerce Course

https://www.youtube.com/watch?v=SdITjnl-zo8

Happy Coding! 🚀

🚀React Navigation Explained: Link vs useNavigate vs Redirect (Best Practices!)

codeek — Fri, 24 Jul 2026 15:47:08 +0000

Navigation is one of the most fundamental concepts in React applications. Whether you're building a dashboard, an eCommerce store, or a portfolio website, knowing when to use Link, useNavigate, and Navigate (Redirect) will make your application more maintainable and provide a better user experience.

In this tutorial, we'll learn the differences between each navigation method, when to use them, and implement them step by step using React Router v7.

Prerequisites

Before starting, make sure you have:

Basic knowledge of React
Node.js installed
React Router installed

If you haven't installed React Router yet:

npm install react-router

Project Structure

src/
│── App.jsx
│── main.jsx
│── pages/
│   ├── Home.jsx
│   ├── About.jsx
│   ├── Dashboard.jsx
│   └── Login.jsx

Step 1: Configure React Router

First, wrap your application with BrowserRouter.

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

Now define your routes.

import { Routes, Route } from "react-router";
import Home from "./pages/Home";
import About from "./pages/About";
import Dashboard from "./pages/Dashboard";
import Login from "./pages/Login";

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/dashboard" element={<Dashboard />} />
      <Route path="/login" element={<Login />} />
    </Routes>
  );
}

export default App;

Step 2: Navigate Using `Link`

Link is used for navigation initiated by users.

Instead of refreshing the page like an HTML <a> tag, React Router updates the URL without reloading the application.

import { Link } from "react-router";

function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/dashboard">Dashboard</Link>
    </nav>
  );
}

✅ Best Use Cases

Navigation bars
Sidebar menus
Buttons behaving like links
Breadcrumb navigation

Why use Link?

No full page refresh
Faster navigation
Preserves application state
Better user experience

Step 3: Navigate Programmatically with `useNavigate`

Sometimes users shouldn't click a link.

Examples include:

Login success
Form submission
Checkout completed
Logout
Cancel button

For these situations, use useNavigate.

import { useNavigate } from "react-router";

function Login() {
  const navigate = useNavigate();

  function handleLogin() {
    // authentication logic

    navigate("/dashboard");
  }

  return (
    <button onClick={handleLogin}>
      Login
    </button>
  );
}

Replace Browser History

Prevent users from going back to the login page.

navigate("/dashboard", {
  replace: true,
});

This replaces the current history entry.

Perfect for:

Login
Logout
Payment success
Password reset

Navigate Back

navigate(-1);

Navigate forward.

navigate(1);

Very useful for:

Back buttons
Multi-step forms
Wizards

Step 4: Redirect Using `<Navigate />`

Sometimes navigation should happen automatically.

For example:

User isn't logged in
User lacks permission
Page doesn't exist

Use the Navigate component.

import { Navigate } from "react-router";

function Dashboard() {
  const isAuthenticated = false;

  if (!isAuthenticated) {
    return <Navigate to="/login" replace />;
  }

  return <h1>Dashboard</h1>;
}

Instead of rendering the dashboard, React redirects users immediately.

Authentication Example

A common protected route looks like this.

import { Navigate } from "react-router";

function ProtectedRoute({ children }) {
  const isAuthenticated = false;

  if (!isAuthenticated) {
    return <Navigate to="/login" replace />;
  }

  return children;
}

Usage:

<Route
  path="/dashboard"
  element={
    <ProtectedRoute>
      <Dashboard />
    </ProtectedRoute>
  }
/>

Step 5: Which One Should You Use?

Situation	Recommended
Navigation menu	`Link`
Sidebar	`Link`
User clicks page links	`Link`
Login success	`useNavigate`
Form submission	`useNavigate`
Checkout completed	`useNavigate`
Logout	`useNavigate`
Authentication guard	`Navigate`
Permission check	`Navigate`
Redirect unknown pages	`Navigate`

Common Mistakes

❌ Using `<a>` tags

<a href="/dashboard">Dashboard</a>

This refreshes the entire application.

Instead use:

<Link to="/dashboard">
  Dashboard
</Link>

❌ Using `useNavigate` inside JSX

Incorrect:

return navigate("/login");

Correct:

return <Navigate to="/login" replace />;

❌ Using Link after Login

Avoid:

<Link to="/dashboard">
  Login
</Link>

Instead:

navigate("/dashboard");

Only navigate after authentication succeeds.

Best Practices

✅ Use Link for user-initiated navigation.
✅ Use useNavigate after events like login, form submission, or logout.
✅ Use Navigate for conditional redirects.
✅ Use replace: true when users shouldn't return to the previous page.
✅ Avoid using HTML <a> tags for internal routing.
✅ Keep navigation logic predictable and easy to maintain.

Conclusion

Choosing the correct navigation method keeps your React application clean, scalable, and user-friendly.

A simple rule to remember is:

Link → User clicks to navigate
useNavigate → Your JavaScript decides where to go
Navigate → React automatically redirects during rendering

Following these best practices will help you build applications that feel fast, modern, and intuitive.

📺 Prefer Watching Instead?

If you'd rather follow along with a complete walkthrough, check out the full video tutorial:

🎥 React Navigation Explained: Link vs useNavigate vs Redirect (Best Practices!)

https://www.youtube.com/watch?v=BBWF5pQbCeU

🛒 Learn to Build a Complete Modern React eCommerce App

If you want to go beyond navigation and build a real-world project from scratch, check out my complete React eCommerce series where you'll learn:

🛍️ Product Listing
🔍 Product Details
🛒 Shopping Cart
❤️ Wishlist
🔐 Authentication & Authorization
💳 Stripe Payment Integration
☁️ Deployment
📱 Responsive Design
⚡ React Router
🔥 Firebase
🚀 Modern React Best Practices

🎥 Watch here:

https://www.youtube.com/watch?v=SdITjnl-zo8

If you found this article helpful, don't forget to ❤️ like, save, and follow for more React tutorials. Happy coding! 🚀

🚀Enhance Your React App With Seamless Scroll Restoration Tips For A Better User Experience

codeek — Fri, 24 Jul 2026 13:44:45 +0000

One of the easiest ways to improve your React application's user experience is by preserving the user's scroll position during navigation.

Imagine a user browsing through hundreds of products. They click a product, read its details, press the browser's Back button, and instead of returning to where they left off, they are taken back to the top of the page. React Router solves this problem with the built-in ScrollRestoration component, making navigation feel smooth and natural.

Why Scroll Restoration Matters

Without scroll restoration:

❌ Users lose their place on long pages.
❌ Extra scrolling creates frustration.
❌ Navigation feels broken.

With scroll restoration:

✅ Restores previous scroll position.
✅ Better ecommerce experience.
✅ Improves blogs, dashboards, and documentation sites.
✅ Makes browser Back/Forward navigation seamless.

Prerequisites

Install React Router if you haven't already.

npm install react-router-dom

Note: ScrollRestoration works with React Router's Data Router APIs (createBrowserRouter + RouterProvider).

Project Structure

src/
 ├── App.jsx
 ├── main.jsx
 ├── layouts/
 │      RootLayout.jsx
 ├── pages/
 │      Home.jsx
 │      Products.jsx
 │      ProductDetails.jsx

Step 1: Create the Root Layout

import {
  Outlet,
  ScrollRestoration,
} from "react-router-dom";

export default function RootLayout() {
  return (
    <>
      <Outlet />

      <ScrollRestoration />
    </>
  );
}

Place ScrollRestoration only once inside your root layout.

Step 2: Configure React Router

import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";

import RootLayout from "./layouts/RootLayout";
import Home from "./pages/Home";
import Products from "./pages/Products";
import ProductDetails from "./pages/ProductDetails";

const router = createBrowserRouter([
  {
    element: <RootLayout />,
    children: [
      {
        path: "/",
        element: <Home />,
      },
      {
        path: "/products",
        element: <Products />,
      },
      {
        path: "/products/:id",
        element: <ProductDetails />,
      },
    ],
  },
]);

export default function App() {
  return <RouterProvider router={router} />;
}

Step 3: Test the Feature

Open your products page.
Scroll halfway down.
Open any product.
Click the browser Back button.

You'll return to the exact scroll position where you left off.

Custom Scroll Restoration Keys

React Router allows customizing how scroll positions are stored.

<ScrollRestoration
  getKey={(location) => location.pathname}
/>

This is useful when you want different history entries that share the same pathname to reuse the same scroll position.

Optional: Scroll to Top on New Pages

Sometimes you want:

Restore scroll on browser Back
Scroll to the top for fresh page navigations

Create a helper component.

import { useEffect } from "react";
import { useLocation } from "react-router-dom";

export default function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
}

Then include it in your layout.

<>
  <ScrollToTop />
  <Outlet />
  <ScrollRestoration />
</>

Ecommerce Example

Without Scroll Restoration

Products

⬇️ Scroll to Product #120

↓

Open Product

↓

Back

❌ Returns to Product #1

With Scroll Restoration

Products

⬇️ Scroll to Product #120

↓

Open Product

↓

Back

✅ Returns to Product #120

Best Practices

Keep ScrollRestoration inside the root layout.
Use Data Router (createBrowserRouter).
Test browser Back and Forward buttons.
Combine with ScrollToTop when needed.
Use getKey only for custom behavior.

Conclusion

Small UX improvements make a huge difference. ScrollRestoration is one of those features that users rarely notice when it works—but immediately notice when it's missing. With just a few lines of code, your React application can provide a much smoother browsing experience, especially for ecommerce websites, blogs, and dashboards.

📺 Watch the Complete Video Tutorial

If you'd like to see the implementation step by step, watch the full tutorial:

🎥 Enhance Your React App With Seamless Scroll Restoration Tips For A Better User Experience

https://www.youtube.com/watch?v=1zmOrQ61s3I

🛒 Build a Complete React Ecommerce Application

Want to master React by building a real-world project?

Check out my Complete React Ecommerce Series, where you'll build a production-ready ecommerce application from scratch.

You'll learn:

⚛️ React & React Router
🔥 Firebase Authentication
💳 Payment integration with Stripe
🛒 Shopping Cart
❤️ Wishlist
🔍 Product Search & Filtering
🌙 Dark Mode
📱 Responsive Design
🚀 Deployment
And much more!

🎥 Watch the Complete Ecommerce Playlist

https://www.youtube.com/watch?v=SdITjnl-zo8

If this article helped you, consider leaving a ❤️ and following for more React tutorials.

Happy Coding! 🚀

🚀useMemo vs useCallback Hooks in React for Performance Optimization: A Step-by-Step Guide with Practical Examples

codeek — Thu, 23 Jul 2026 16:24:47 +0000

React applications re-render whenever state or props change. While this behavior is essential, unnecessary re-renders and expensive calculations can negatively impact your application's performance.

React provides two optimization hooks to solve these problems:

⚡ useMemo – Memoizes values
⚡ useCallback – Memoizes functions

Although they seem similar, they solve different performance issues. In this guide, you'll learn when to use each hook and how to implement them correctly.

What is useMemo?

useMemo caches the result of an expensive calculation and only recalculates it when one of its dependencies changes.

Syntax

const memoizedValue = useMemo(() => {
  return expensiveCalculation(data);
}, [data]);

Think of it as:

"Don't recalculate this value unless something important changes."

When Should You Use useMemo?

Use useMemo when:

Filtering large arrays
Sorting data
Complex mathematical calculations
Data transformations
Expensive computations

Avoid using it for simple calculations because memoization itself has a small overhead.

Step 1: Without useMemo

Imagine we have thousands of products.

function ProductList({ products, search }) {
  const filteredProducts = products.filter(product =>
    product.title.toLowerCase().includes(search.toLowerCase())
  );

  return (
    <>
      {filteredProducts.map(product => (
        <p key={product.id}>{product.title}</p>
      ))}
    </>
  );
}

Every render runs:

products.filter(...)

Even if products and search never changed.

Step 2: Optimize with useMemo

import { useMemo } from "react";

function ProductList({ products, search }) {
  const filteredProducts = useMemo(() => {
    return products.filter(product =>
      product.title.toLowerCase().includes(search.toLowerCase())
    );
  }, [products, search]);

  return (
    <>
      {filteredProducts.map(product => (
        <p key={product.id}>{product.title}</p>
      ))}
    </>
  );
}

Now React only recalculates the filtered products when:

products change
search changes

Otherwise it reuses the cached value.

What is useCallback?

Unlike useMemo, useCallback memoizes functions, not values.

Without it, every render creates a brand new function.

const handleClick = () => {
  console.log("Clicked");
};

Every render creates a new function reference.

Why is This a Problem?

Consider this component:

const Child = React.memo(({ onClick }) => {
  console.log("Child Rendered");

  return (
    <button onClick={onClick}>
      Click Me
    </button>
  );
});

Even though Child is wrapped with React.memo, it still re-renders because:

onClick !== previousOnClick

The function reference changes every render.

Step 3: Without useCallback

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

  const handleClick = () => {
    console.log("Clicked");
  };

  return (
    <>
      <button onClick={() => setCount(count + 1)}>
        Count {count}
      </button>

      <Child onClick={handleClick} />
    </>
  );
}

Every time count changes:

Parent renders
handleClick is recreated
Child renders again

Step 4: Optimize with useCallback

import { useCallback } from "react";

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

  const handleClick = useCallback(() => {
    console.log("Clicked");
  }, []);

  return (
    <>
      <button onClick={() => setCount(count + 1)}>
        Count {count}
      </button>

      <Child onClick={handleClick} />
    </>
  );
}

Now the function reference stays the same.

If the child component is memoized using React.memo, it won't unnecessarily re-render.

useMemo vs useCallback

useMemo	useCallback
Memoizes values	Memoizes functions
Prevents expensive recalculations	Prevents unnecessary function recreation
Returns computed value	Returns memoized function
Useful for filtering, sorting, calculations	Useful when passing callbacks to child components

Which One Should You Use?

Use useMemo when:

Filtering arrays
Sorting data
Expensive calculations
Transforming API responses

Use useCallback when:

Passing callbacks to child components
Using React.memo
Preventing unnecessary child re-renders
Stable event handlers

Common Mistakes

❌ Using useMemo Everywhere

const value = useMemo(() => count + 1, [count]);

This calculation is trivial and doesn't need memoization.

❌ Forgetting Dependencies

useMemo(() => calculate(products), []);

Always include all required dependencies.

❌ Using useCallback Without React.memo

If child components aren't memoized, useCallback often provides little or no performance benefit.

Performance Tips

✅ Measure performance before optimizing.
✅ Use useMemo only for expensive computations.
✅ Use useCallback for stable function references.
✅ Combine React.memo with useCallback for the best results.
✅ Don't overuse memoization—simplicity is often better.

Conclusion

Both useMemo and useCallback are powerful optimization hooks, but they solve different problems.

useMemo caches computed values.
useCallback caches functions.

Understanding the difference helps you write faster, cleaner, and more efficient React applications.

🎥 Watch the Complete Video Tutorial

Want to see everything implemented step by step?

📺 Watch the full tutorial here:

https://www.youtube.com/watch?v=lIVngCxky38

In the video, you'll learn:

Complete implementation
Real-world examples
Performance optimization techniques
Common mistakes to avoid
Best practices for modern React applications

🚀 Learn React by Building a Complete Ecommerce Project

If you're serious about mastering React through real-world projects, check out our complete Ecommerce tutorial series.

You'll learn:

React Fundamentals
React Router
Context API
Authentication & Authorization
Shopping Cart
Product Filtering
Stripe Payment Integration
Firebase
Express.js Backend
Modern React Best Practices

🎥 Start the Ecommerce Playlist:

https://youtu.be/SdITjnl-zo8?si=IbA-E-Xe1ctJBEnY

Happy Coding! 🚀

🚀 How to Find or Change XAMPP MySQL Username and Password in Windows

codeek — Thu, 23 Jul 2026 14:47:49 +0000

If you're using XAMPP for local web development, you'll often need your MySQL username and password to connect applications like PHP, Laravel, Node.js, or React. By default, XAMPP uses the root user with an empty password, but you can easily change it for better security.

Prerequisites

XAMPP installed on Windows
MySQL service running
phpMyAdmin accessible

Step 1: Start MySQL

Open XAMPP Control Panel.
Click Start next to MySQL.

Step 2: Open phpMyAdmin

Navigate to:

http://localhost/phpmyadmin

Step 3: Find the Current Username

Open the User Accounts tab to view all MySQL users.

Default credentials:

Username: root
Password: (empty)

Step 4: Change the MySQL Password

Click User Accounts.
Select Change password for the root user.
Enter a new password.
Click Go to save.

Step 5: Update phpMyAdmin Configuration

Open:

C:\xampp\phpMyAdmin\config.inc.php

Update the password:

$cfg['Servers'][$i]['password'] = 'YourNewPassword';

Save the file and restart MySQL.

Step 6: Update Your Application

Example .env configuration:

DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=my_database
DB_USERNAME=root
DB_PASSWORD=YourNewPassword

Forgot the Root Password?

If you forget your MySQL root password, you can reset it using MySQL's recovery mode or the skip-grant-tables method.

Best Practices

Use a strong password.
Store credentials in environment variables.
Create separate users for different projects.
Never commit passwords to Git.

Conclusion

Changing your XAMPP MySQL password is straightforward and helps secure your local development environment. Remember to update both phpMyAdmin and your application's database configuration after changing the password.

📺 Video Tutorial

Watch the complete step-by-step tutorial:

How to Find or Change XAMPP MySQL Username and Password (Windows)

https://www.youtube.com/watch?v=XezG33DdEQ8

🚀 Build a Complete Modern E-Commerce Application

If you're looking to master full-stack e-commerce development, check out the complete playlist where we build everything from scratch using modern technologies.

Topics Covered
⚛️ React + Vite
🎨 Chakra UI
🛒 Shopping Cart
🔄 React Query (TanStack Query)
🌐 Axios
📦 Zustand
💳 Stripe Payment Integration
🚀 Deployment
📁 Clean Project Structure
🔥 Best Practices
🎥 Complete E-Commerce Playlist

https://www.youtube.com/watch?v=Jluy-W9eP-4&list=PL_02r0p8Ku_6tR8L-n-yj7MW8rrMtswwk&index=1

If you enjoy practical, real-world React tutorials, consider following the series for more production-ready projects and modern development techniques.

Happy coding! 🚀

🚀 OAuth 2 Sign-In with Facebook — React Authentication & Authorization Playlist

codeek — Wed, 22 Jul 2026 16:23:36 +0000

Implementing authentication from scratch can be time-consuming, especially when users expect to sign in with a single click. OAuth 2.0 authentication solves this problem by allowing users to log in using their existing accounts from providers like Facebook.

In this tutorial, you'll learn how to integrate Facebook Sign-In into a React application using Firebase Authentication. Firebase securely handles the OAuth flow while React manages your application's UI.

By the end of this guide, users will be able to sign in and sign out using their Facebook account with just a few lines of code.

📌 Prerequisites

Before getting started, make sure you have:

React (Vite) project
Firebase project
Firebase Authentication enabled
Meta Developer account
Basic understanding of React Hooks

Install Firebase:

npm install firebase

Step 1: Create a Firebase Project

Navigate to the Firebase Console and create a new project.

Once your project is created:

Add a new Web App
Copy your Firebase configuration
Install the Firebase SDK

Step 2: Enable Facebook Authentication

Inside Firebase Console:

Authentication
      ↓
 Sign-in Method
      ↓
    Facebook

Enable Facebook Authentication.

You'll need:

Facebook App ID
Facebook App Secret

These credentials are obtained from your Meta Developer application.

Step 3: Create a Meta (Facebook) App

Visit the Meta Developers Dashboard.

Create a new application and add the Facebook Login product.

After creating the application you'll receive:

App ID
App Secret

Copy both values into Firebase Authentication settings.

Finally, add the OAuth Redirect URI provided by Firebase into your Facebook application's OAuth settings.

Step 4: Configure Firebase

Create a firebase.js file.

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  apiKey: "...",
  authDomain: "...",
  projectId: "...",
  appId: "...",
};

const app = initializeApp(firebaseConfig);

export const auth = getAuth(app);

Step 5: Create the Facebook Provider

import { FacebookAuthProvider } from "firebase/auth";

export const facebookProvider = new FacebookAuthProvider();

If your application requires additional permissions:

facebookProvider.addScope("email");

Step 6: Implement Facebook Login

import {
  FacebookAuthProvider,
  signInWithPopup,
} from "firebase/auth";

import { auth } from "./firebase";

const provider = new FacebookAuthProvider();

const loginWithFacebook = async () => {
  try {
    const result = await signInWithPopup(auth, provider);

    console.log(result.user);
  } catch (error) {
    console.log(error);
  }
};

Step 7: Create the Login Button

<button onClick={loginWithFacebook}>
  Continue with Facebook
</button>

When users click the button:

Facebook popup opens
User grants permission
Firebase authenticates the user
User information becomes available

Step 8: Access User Information

const user = result.user;

console.log(user.displayName);
console.log(user.email);
console.log(user.photoURL);

Typical user information includes:

UID
Name
Email
Profile Picture
Access Token

Step 9: Implement Logout

import { signOut } from "firebase/auth";

const logout = async () => {
  await signOut(auth);
};

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

Step 10: Observe Authentication State

Instead of manually checking login status, Firebase provides a listener.

import { onAuthStateChanged } from "firebase/auth";

onAuthStateChanged(auth, (user) => {
  if (user) {
    console.log("Logged in");
  } else {
    console.log("Logged out");
  }
});

This keeps your React UI synchronized with the authentication state.

📂 Project Structure

src/
│
├── firebase.js
├── App.jsx
├── Login.jsx
├── Navbar.jsx
└── main.jsx

🚨 Common Errors

Popup Closed

The user closed the authentication popup before completing login.

Unauthorized Domain

Add your application's domain inside:

Firebase Authentication
        ↓
Authorized Domains

Invalid OAuth Redirect

Ensure the redirect URI from Firebase exactly matches the one configured inside your Meta Developer application.

App Not Live

If your Facebook application is still in Development Mode, only authorized test users can authenticate.

✅ Best Practices

Never expose sensitive credentials outside Firebase configuration.
Use onAuthStateChanged() to manage authentication state.
Handle authentication errors gracefully.
Protect private routes after successful login.
Store additional user profile data in Firestore or your own backend.

🎉 Conclusion

Facebook Sign-In provides a fast and familiar authentication experience for users. By combining React with Firebase Authentication, you can integrate secure OAuth 2.0 login without implementing the entire authentication flow yourself.

In this tutorial, you learned how to:

Configure Firebase Authentication
Create a Meta Developer application
Enable Facebook Login
Authenticate users using signInWithPopup
Read authenticated user information
Sign users out
Track authentication state

With only a few Firebase APIs, you can add production-ready Facebook authentication to your React applications.

🎥 Watch the Complete Video Tutorial (Part 16)

Prefer learning by building?

Follow the complete hands-on implementation in Part 16 of the React Authentication & Authorization Playlist, where we build Facebook OAuth Sign-In from scratch using React and Firebase Authentication.

📺 Watch here

https://www.youtube.com/watch?v=z1SpI42MlzU&list=PL_02r0p8Ku_5-h4teExCf6egkktSQblC4&index=16

🚀 Follow the Complete React Authentication & Authorization Playlist

This tutorial is one part of a complete series covering modern authentication in React.

Throughout the playlist, you'll learn how to build secure authentication systems using:

Firebase Authentication
JWT Authentication
OAuth Providers
Protected Routes
Role-based Authorization
Password Reset
Email Verification
Authentication Best Practices

🎬 Start the playlist here

https://www.youtube.com/watch?v=gbjqaiwjTZ8&list=PL_02r0p8Ku_5-h4teExCf6egkktSQblC4&index=1

If you found this article helpful, consider:

❤️ Leaving a reaction
💬 Sharing your thoughts in the comments
🔖 Saving it for future reference
🚀 Following me on Dev.to for more React and Firebase tutorials

Happy coding! 🚀

react #firebase #oauth #facebook #authentication #javascript #webdev #frontend #vite #beginners

💳 How to Implement Stripe Payments in an E-Commerce App: A Step-by-Step Guide with React & Express

codeek — Tue, 21 Jul 2026 08:36:33 +0000

Online payments are one of the most important parts of any modern e-commerce application. They are the bridge between a customer's cart and a successful order.

If you're building a shopping application and want to provide a secure, professional checkout experience, Stripe is one of the best payment platforms available.

In this guide, we'll build a Stripe Checkout integration using:

⚛️ React + Vite
🚀 Express.js
💳 Stripe Checkout
🌐 Axios

The implementation uses a hosted Stripe Checkout page, meaning Stripe securely handles all payment details while your application simply creates a checkout session.

Why Choose Stripe?

Stripe is trusted by thousands of businesses because it is:

✅ Secure and reliable
✅ Easy to integrate
✅ PCI compliant
✅ Supports multiple payment methods
✅ Provides a beautiful hosted checkout experience

Instead of building your own payment form, Stripe redirects users to a secure hosted payment page, reducing both complexity and security concerns.

Step 1: Create a Stripe Account

Create a free Stripe account.

After logging into the Stripe Dashboard:

Open Developers
Navigate to API Keys
Copy your Secret Key

⚠️ Important: Never expose your Stripe Secret Key in your frontend application. It should always remain on your backend.

Step 2: Install the Required Packages

Install the packages required for your Express backend.

npm install express stripe cors dotenv

These packages help you:

Create the backend server
Connect with Stripe APIs
Handle CORS
Store sensitive keys securely

Step 3: Configure Environment Variables

Create a .env file inside your backend project.

STRIPE_SECRET_KEY=your_stripe_secret_key
PORT=5000
FRONTEND_URL=http://localhost:5173

These variables allow your backend to:

Authenticate with Stripe
Run on the correct port
Redirect users back to your frontend after payment

Step 4: Create the Checkout Session (Backend)

Initialize Stripe inside your Express server.

import express from "express";
import Stripe from "stripe";
import cors from "cors";
import dotenv from "dotenv";

dotenv.config();

const app = express();

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);

app.use(express.json());
app.use(cors());

Now create a checkout session endpoint.

app.post("/create-checkout-session", async (req, res) => {
  try {
    const { cartItems } = req.body;

    const line_items = cartItems.map((item) => ({
      price_data: {
        currency: "usd",
        product_data: {
          name: item.title,
          images: [item.thumbnail],
        },
        unit_amount: Math.round(item.price * 100),
      },
      quantity: item.quantity,
    }));

    const session = await stripe.checkout.sessions.create({
      payment_method_types: ["card"],
      line_items,
      mode: "payment",
      success_url: `${process.env.FRONTEND_URL}/success`,
      cancel_url: `${process.env.FRONTEND_URL}/cart`,
    });

    res.json({
      url: session.url,
    });
  } catch (err) {
    console.error(err);

    res.status(500).json({
      error: "Something went wrong",
    });
  }
});

What happens here?

Receives cart items
Converts them into Stripe line items
Creates a Checkout Session
Returns the Stripe Checkout URL

This is the heart of the payment flow.

Step 5: Send Cart Data from React

When the customer clicks Checkout, send the cart items to your backend.

const res = await axios.post(
  `${apiBaseUrl}/create-checkout-session`,
  {
    cartItems,
  }
);

const { url } = res.data;

window.location.href = url;

Payment Flow

User clicks Checkout
        │
        ▼
React sends cart to Express
        │
        ▼
Express creates Stripe Checkout Session
        │
        ▼
Stripe returns secure Checkout URL
        │
        ▼
Browser redirects to Stripe Checkout

The payment form is fully hosted by Stripe.

Step 6: Configure Success & Cancel URLs

Inside your Checkout Session:

success_url: `${process.env.FRONTEND_URL}/success`,
cancel_url: `${process.env.FRONTEND_URL}/cart`,

After payment:

✅ Successful payments go to /success
❌ Cancelled payments return users to /cart

You can use these pages to display an order confirmation or allow users to continue shopping.

Step 7: Test the Payment Flow

Before deploying to production, always test using Stripe Test Mode.

Use the following test card:

Field	Value
Card Number	`4242 4242 4242 4242`
Expiry	Any future date
CVC	Any 3 digits

Verify that:

✅ Checkout session is created
✅ Payment succeeds
✅ Redirect works correctly
✅ Success page loads properly

Step 8: Production Improvements

Once everything works, consider adding:

📦 Store orders in your database
👤 Save customer information
🚚 Store shipping details
🔔 Handle Stripe Webhooks
📄 Order history page
💳 Multiple payment methods

Instead of generating order IDs with timestamps, use database-generated records for production applications.

Best Practices

Always remember to:

Never expose your Stripe Secret Key
Store sensitive values inside .env
Validate cart items on the backend
Handle API errors gracefully
Test thoroughly before production
Use Stripe Webhooks to confirm completed payments

Payment Flow Overview

User Adds Products
        │
        ▼
React Sends Cart
        │
        ▼
Express Backend
        │
        ▼
Stripe Checkout Session
        │
        ▼
Stripe Hosted Checkout
        │
        ▼
Payment Success
        │
        ▼
Success Page

Final Thoughts

Adding Stripe transforms your application from a simple shopping website into a fully functional e-commerce platform.

By using a backend route to create Checkout Sessions and redirecting users to Stripe's hosted payment page, you can build a secure, scalable, and production-ready payment system with minimal effort.

If you're building a React + Express e-commerce project, this architecture is one of the simplest and most reliable approaches for accepting online payments.

🎥 Prefer Learning by Watching?

This article is based on the complete step-by-step video tutorial.

👉 Stripe Payment Integration Tutorial

https://www.youtube.com/watch?v=GjKbwPt9RlE&list=PL_02r0p8Ku_6tR8L-n-yj7MW8rrMtswwk&index=17

You'll learn how to:

Integrate Stripe Checkout
Build the backend payment API
Redirect users securely
Handle successful payments
Build a production-ready payment flow

🚀 Build a Complete Modern E-Commerce Application

If you're looking to master full-stack e-commerce development, check out the complete playlist where we build everything from scratch using modern technologies.

Topics Covered

⚛️ React + Vite
🎨 Chakra UI
🛒 Shopping Cart
🔄 React Query (TanStack Query)
🌐 Axios
📦 Zustand
💳 Stripe Payment Integration
🚀 Deployment
📁 Clean Project Structure
🔥 Best Practices

🎥 Complete E-Commerce Playlist

https://www.youtube.com/watch?v=Jluy-W9eP-4&list=PL_02r0p8Ku_6tR8L-n-yj7MW8rrMtswwk&index=1

If you enjoy practical, real-world React tutorials, consider following the series for more production-ready projects and modern development techniques.

Happy coding! 🚀

🌙 Building Dark & Light Theme in React with Chakra UI v2 (Step-by-Step Guide)

codeek — Tue, 21 Jul 2026 08:17:25 +0000

🌙 Build a Dark & Light Theme Switcher in React with Chakra UI v2

Dark mode has become a standard feature in modern web applications. It not only improves accessibility but also provides a better user experience for users who prefer darker interfaces.

The good news is that Chakra UI v2 comes with built-in support for color modes, making it incredibly easy to implement dark and light themes without writing complex CSS.

In this tutorial, we'll build a fully functional theme switcher in React using Chakra UI v2.

Prerequisites

Before starting, make sure you already have:

A React project (Vite or CRA)
Chakra UI v2 installed
Basic understanding of React components

If you haven't installed Chakra UI yet, check out my previous guide on setting it up.

Step 1: Install Chakra UI

Install Chakra UI and its required dependencies.

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

Step 2: Wrap Your Application

Wrap your application with ChakraProvider.

import React from "react";
import ReactDOM from "react-dom/client";
import { ChakraProvider } from "@chakra-ui/react";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")).render(
  <ChakraProvider>
    <App />
  </ChakraProvider>
);

Now every component inside your app can access Chakra UI features.

Step 3: Enable Color Mode

Create a file named theme.js.

import { extendTheme } from "@chakra-ui/react";

const config = {
  initialColorMode: "light",
  useSystemColorMode: true,
};

const theme = extendTheme({ config });

export default theme;

Now update your main.jsx.

import theme from "./theme";

<ChakraProvider theme={theme}>
  <App />
</ChakraProvider>;

Configuration Options

Option	Description
`initialColorMode`	Default theme when the app loads
`useSystemColorMode`	Automatically use the user's operating system preference

Step 4: Add `ColorModeScript`

This prevents the screen from flashing the wrong theme during page refresh.

import { ColorModeScript } from "@chakra-ui/react";
import theme from "./theme";

<ColorModeScript initialColorMode={theme.config.initialColorMode} />

Place it before rendering your application.

Step 5: Create a Theme Toggle Button

Chakra UI provides the useColorMode() hook.

import { Button, useColorMode } from "@chakra-ui/react";

function ThemeToggle() {
  const { colorMode, toggleColorMode } = useColorMode();

  return (
    <Button onClick={toggleColorMode}>
      {colorMode === "light"
        ? "🌙 Dark Mode"
        : "☀️ Light Mode"}
    </Button>
  );
}

export default ThemeToggle;

That's all you need to switch between themes.

Step 6: Use Theme-Aware Colors

Instead of hardcoding colors, use useColorModeValue().

import {
  Box,
  Text,
  useColorModeValue,
} from "@chakra-ui/react";

function Card() {
  const bg = useColorModeValue("gray.100", "gray.700");
  const color = useColorModeValue("black", "white");

  return (
    <Box bg={bg} p={6} rounded="lg">
      <Text color={color}>
        Chakra UI automatically changes these colors.
      </Text>
    </Box>
  );
}

This is one of Chakra UI's most powerful features.

Step 7: Build a Complete Layout

Now combine everything together.

import {
  Box,
  Heading,
  Text,
  Button,
  useColorMode,
  useColorModeValue,
} from "@chakra-ui/react";

export default function App() {
  const { colorMode, toggleColorMode } = useColorMode();

  const bg = useColorModeValue("gray.100", "gray.900");
  const card = useColorModeValue("white", "gray.800");

  return (
    <Box bg={bg} minH="100vh" p={10}>
      <Button mb={6} onClick={toggleColorMode}>
        {colorMode === "light"
          ? "🌙 Dark"
          : "☀️ Light"}
      </Button>

      <Box bg={card} p={8} rounded="xl" shadow="lg">
        <Heading mb={4}>
          Chakra UI Dark Mode
        </Heading>

        <Text>
          This layout automatically updates based on the selected color mode.
        </Text>
      </Box>
    </Box>
  );
}

Now your application supports both dark and light themes with very little code.

Why Use `useColorModeValue()`?

Instead of writing CSS like this:

.dark .card {
  background: #222;
}

.light .card {
  background: white;
}

You simply write:

const bg = useColorModeValue("white", "gray.800");

It's much cleaner, easier to maintain, and fully integrated with Chakra UI.

Best Practices

✅ Always use useColorModeValue() instead of hardcoded colors.
✅ Keep your theme configuration in a separate theme.js file.
✅ Use semantic color tokens for better scalability.
✅ Enable useSystemColorMode to respect user preferences.
✅ Add ColorModeScript to avoid flashing the wrong theme on page load.

Final Thoughts

Implementing dark and light themes in React becomes incredibly simple with Chakra UI v2. With just a few hooks and configuration options, you can provide users with a modern, accessible, and polished experience.

Whether you're building dashboards, admin panels, e-commerce platforms, or portfolio websites, Chakra UI's built-in color mode system helps you create responsive and beautiful interfaces with minimal effort.

🎥 Prefer Learning by Watching?

If you enjoy learning through hands-on coding videos, check out my complete React + Chakra UI v2 playlist on YouTube.

In the playlist, you'll learn:

Chakra UI Setup
Dark & Light Theme
Building Complete Projects with Chakra UI

Whether you're a beginner or an experienced React developer, the series walks through every concept step by step with practical examples.

📺 Complete Playlist

https://www.youtube.com/playlist?list=PL_02r0p8Ku_5-h4teExCf6egkktSQblC4

If you found this article helpful, consider following Codeek for more tutorials on React, Next.js, TypeScript, Chakra UI, and modern full-stack web development. 🚀

🚀How to Integrate Swiper.js in a React Project (Step-by-Step) for modern slider implementation

codeek — Tue, 21 Jul 2026 07:55:49 +0000

🚀 How to Build a Responsive Carousel in React with Swiper.js

If you're building an e-commerce application, portfolio, blog, or dashboard, a responsive carousel can significantly improve the user experience. Swiper.js is one of the most popular libraries for creating modern, touch-enabled sliders in React applications.

📦 Step 1: Install Swiper

npm install swiper

Swiper React components are included within the main swiper package.

🎯 Step 2: Create a Basic Slider

import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";

const ProductSlider = () => {
  return (
    <Swiper spaceBetween={20} slidesPerView={1}>
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
    </Swiper>
  );
};

export default ProductSlider;

This creates a simple responsive slider.

🧭 Step 3: Add Navigation & Pagination

import { Navigation, Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";

import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";

const ProductSlider = () => {
  return (
    <Swiper
      modules={[Navigation, Pagination]}
      navigation
      pagination={{ clickable: true }}
      spaceBetween={20}
      slidesPerView={1}
    >
      <SwiperSlide>Product 1</SwiperSlide>
      <SwiperSlide>Product 2</SwiperSlide>
      <SwiperSlide>Product 3</SwiperSlide>
    </Swiper>
  );
};

export default ProductSlider;

Swiper provides several useful modules, including:

Navigation
Pagination
Autoplay
Scrollbar
Keyboard
Mousewheel
Effect Fade
Thumbs

▶️ Step 4: Enable Autoplay

import { Navigation, Pagination, Autoplay } from "swiper/modules";

<Swiper
  modules={[Navigation, Pagination, Autoplay]}
  navigation
  pagination={{ clickable: true }}
  autoplay={{
    delay: 3000,
    disableOnInteraction: false,
  }}
>

This is perfect for:

Hero banners
Featured products
Testimonials
Promotional sliders

📱 Step 5: Make It Responsive

<Swiper
  breakpoints={{
    640: {
      slidesPerView: 2,
    },
    768: {
      slidesPerView: 3,
    },
    1024: {
      slidesPerView: 4,
    },
  }}
>

Your slider will automatically adjust based on screen size:

Screen Width	Slides
Mobile	1
≥640px	2
≥768px	3
≥1024px	4

🛒 Real-World E-Commerce Example

<Swiper
  modules={[Navigation, Pagination]}
  navigation
  pagination={{ clickable: true }}
  spaceBetween={20}
  breakpoints={{
    640: { slidesPerView: 2 },
    768: { slidesPerView: 3 },
    1024: { slidesPerView: 4 },
  }}
>
  {products.map((product) => (
    <SwiperSlide key={product.id}>
      <ProductCard product={product} />
    </SwiperSlide>
  ))}
</Swiper>

💡 Perfect Use Cases

🛍️ Featured Products
🆕 New Arrivals
🔥 Best Sellers
💬 Testimonials
🖼️ Product Galleries
📚 Portfolio Projects
📰 Blog Highlights

🎯 Conclusion

Swiper.js makes it incredibly easy to build beautiful, responsive, and touch-friendly carousels in React. With features like Navigation, Pagination, Autoplay, and Responsive Breakpoints, it's an excellent choice for modern React applications.

🎥 Prefer Video Tutorials?

If you'd like to see Swiper.js integrated into a complete modern React E-Commerce application, check out this tutorial from the Codeek E-Commerce Series.

📺 Swiper.js Integration in React E-Commerce App

https://www.youtube.com/watch?v=NWPLHEpaHGc&list=PL_02r0p8Ku_6tR8L-n-yj7MW8rrMtswwk&index=9

In this series, you'll learn:

⚛️ React + Vite
🛣️ React Router
🐻 Zustand
🔄 React Query
🌐 Axios
💳 Stripe Payments
🎠 Swiper.js
🚀 Deployment

Build a production-ready React e-commerce application from scratch while learning the tools used in modern frontend development.

#react #javascript #webdev #frontend #reactjs #swiper #css #vite #tutorial #beginners

🚀 10x your project workflow with Reusable Layouts in React Router V6 with createBrowserRouter and Nested Routes

codeek — Sun, 19 Jul 2026 09:14:18 +0000

If you've ever copied the same Navbar, Sidebar, or Footer across multiple pages, you're doing extra work.

React Router's createBrowserRouter, children, and Outlet let you create reusable layouts that automatically wrap multiple pages. Instead of repeating components everywhere, you define them once and let nested routes handle the rest.

In this guide, we'll build a clean routing structure that scales as your application grows.

Why Use Nested Routes?

Imagine your application has the following pages:

Home
Login
Register
Dashboard
Profile
Settings

The authentication pages shouldn't display the dashboard sidebar.

The dashboard pages, however, should all share:

Navigation
Sidebar
Footer

Instead of repeating these components inside every page, we'll create a reusable layout.

React Router supports this through nested routing using the children property and renders child pages through the Outlet component.

Project Structure

src
│
├── layouts
│   ├── MainLayout.jsx
│   └── DashboardLayout.jsx
│
├── pages
│   ├── Home.jsx
│   ├── Login.jsx
│   ├── Register.jsx
│   ├── Dashboard.jsx
│   ├── Profile.jsx
│   └── Settings.jsx
│
├── routes
│   └── router.jsx
│
└── main.jsx

Step 1 — Install React Router

npm install react-router-dom

Step 2 — Create the Router

React Router recommends creating your router once using createBrowserRouter and passing it to RouterProvider.

import { createBrowserRouter } from "react-router-dom";

export const router = createBrowserRouter([
  {
    path: "/",
    element: <MainLayout />,
    children: [
      {
        index: true,
        element: <Home />,
      },
      {
        path: "login",
        element: <Login />,
      },
      {
        path: "register",
        element: <Register />,
      },
    ],
  },
]);

Step 3 — Create a Layout Component

Instead of rendering pages directly, create a reusable layout.

import { Outlet } from "react-router-dom";

function MainLayout() {
  return (
    <>
      <Navbar />

      <main>
        <Outlet />
      </main>

      <Footer />
    </>
  );
}

export default MainLayout;

The magic happens with Outlet.

Whenever one of the child routes matches, React Router renders it exactly where the Outlet is placed.

Step 4 — Create a Dashboard Layout

Now let's create a completely different layout.

{
  path: "/dashboard",
  element: <DashboardLayout />,
  children: [
    {
      index: true,
      element: <Dashboard />,
    },
    {
      path: "profile",
      element: <Profile />,
    },
    {
      path: "settings",
      element: <Settings />,
    },
  ],
}

Dashboard layout:

import { Outlet } from "react-router-dom";

function DashboardLayout() {
  return (
    <div className="dashboard">
      <Sidebar />

      <section className="content">
        <Outlet />
      </section>
    </div>
  );
}

export default DashboardLayout;

Every dashboard page now automatically shares the sidebar.

No duplicated code.

Step 5 — Wrap Everything with `RouterProvider`

import ReactDOM from "react-dom/client";
import { RouterProvider } from "react-router-dom";
import { router } from "./routes/router";

ReactDOM.createRoot(document.getElementById("root")).render(
  <RouterProvider router={router} />
);

Final Route Structure

/

├── Home
├── Login
├── Register

/dashboard
├── Dashboard
├── Profile
└── Settings

Why This Pattern is Better

✅ No duplicated Navbar or Sidebar
✅ Cleaner project structure
✅ Easier to maintain
✅ Better scalability
✅ Perfect for authentication layouts
✅ Great for admin dashboards

Key Takeaways

Use createBrowserRouter to define your application's routes.
Organize related pages with the children property.
Wrap shared UI inside layout components.
Render nested pages using Outlet.
Keep routing scalable and easy to maintain as your application grows.

🎥 Prefer Learning by Watching?

This article covers the concepts step by step, but if you'd like to see the complete implementation in action—including project setup, nested layouts, authentication routing, and best practices—check out Episode 6 of my React Authentication & Authorization series.

📺 Watch here:

https://www.youtube.com/watch?v=n0evocfZls0&list=PL_02r0p8Ku_5-h4teExCf6egkktSQblC4&index=6

The full playlist walks through building a modern authentication system with React Router, protected routes, JWT authentication, authorization, and much more from scratch.

Happy coding! 🚀

DEV Community: codeek

🚀 I Built an Entire Animated Movie with Just One AI Tool in Minutes | Flova AI (2026)

🎬 What Flova AI Can Do

💡 My Experience

🤔 Is Flova AI Worth It?

🎥 Watch the Full Tutorial

🚀 Learn React by Building a Real E-commerce App

You'll Learn

💙 Final Thoughts

🚀Master React Router Error Handling with `useRouteError`

Why Do You Need Error Handling?

What is useRouteError?

Project Structure

Step 1 — Create an Error Page

What's happening here?

Step 2 — Register the Error Boundary

Step 3 — Throw an Error

Step 4 — Handle Different HTTP Status Codes

Step 5 — Handle Unexpected JavaScript Errors

Route-Level Error Boundaries

Best Practices

Common Mistakes

❌ Forgetting errorElement

❌ Assuming Every Error is a Response

❌ Showing Sensitive Information

Final Thoughts

📺 Prefer Video Tutorials?

🚀 Learn React by Building a Production-Ready Ecommerce App

Here is a Youtube video:

🚀How to Use `next/image` properly in Next.js to Maintain Aspect Ratio

Why Use next/image?

1. Using Fixed Width & Height

2. Responsive Images Using fill

3. Understanding object-fit

Cover

Contain

Fill

4. Using CSS aspect-ratio

5. Responsive Width with Automatic Height

6. Using the sizes Prop

7. Local Images

8. Importing Images

9. Remote Images

Common Mistakes

Best Practices

Conclusion

🎥 Prefer Video Tutorials?

🛒 Learn to Build a Complete Modern Ecommerce Application

🚀React Navigation Explained: Link vs useNavigate vs Redirect (Best Practices!)

Prerequisites

Project Structure

Step 1: Configure React Router

Step 2: Navigate Using Link

✅ Best Use Cases

Why use Link?

Step 3: Navigate Programmatically with useNavigate

Replace Browser History

Navigate Back

Step 4: Redirect Using <Navigate />

Authentication Example

Step 5: Which One Should You Use?

Common Mistakes

❌ Using <a> tags

❌ Using useNavigate inside JSX

❌ Using Link after Login

Best Practices

Conclusion

📺 Prefer Watching Instead?

🛒 Learn to Build a Complete Modern React eCommerce App

🚀Enhance Your React App With Seamless Scroll Restoration Tips For A Better User Experience

Why Scroll Restoration Matters

Prerequisites

Project Structure

Step 1: Create the Root Layout

Step 2: Configure React Router

Step 3: Test the Feature

Custom Scroll Restoration Keys

Optional: Scroll to Top on New Pages

Ecommerce Example

Best Practices

What is `useRouteError`?

❌ Forgetting `errorElement`

Why Use `next/image`?

2. Responsive Images Using `fill`

3. Understanding `object-fit`

4. Using CSS `aspect-ratio`

6. Using the `sizes` Prop

Step 2: Navigate Using `Link`

Step 3: Navigate Programmatically with `useNavigate`

Step 4: Redirect Using `<Navigate />`

❌ Using `<a>` tags

❌ Using `useNavigate` inside JSX