DEV Community: codeek

🚀 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! 🚀

🚀 Deploy a Full Stack React Application (Firebase + Render) — Complete Deployment Guide (2026)

codeek — Sun, 19 Jul 2026 08:47:21 +0000

Deploying your application is one of the most exciting parts of web development. After spending hours building features, authentication, payments, and dashboards, it’s finally time to make your application accessible to everyone.

In this guide, you'll learn how to deploy a modern full-stack application where:

⚛️ React (Vite) is hosted on Firebase Hosting
🚀 Express.js backend is deployed on Render
🗄️ PostgreSQL (Neon/Supabase or any hosted database) remains online
🔒 Environment variables stay secure
🌍 Your frontend communicates with your backend in production

By the end of this tutorial, you'll have a production-ready deployment pipeline suitable for portfolios, personal projects, and even startup MVPs.

🏗️ Final Architecture

Users
   │
   ▼
Firebase Hosting (React)
   │
HTTPS API Requests
   │
   ▼
Render (Express API)
   │
   ▼
Database (Neon/PostgreSQL)

Separating the frontend and backend makes your application easier to scale, maintain, and deploy independently.

📋 Prerequisites

Before starting, make sure you have:

Node.js installed
Firebase account
Render account
GitHub repository
Production database (Neon, Supabase, PostgreSQL, etc.)
React frontend
Express backend

Example project structure:

Ecommerce/
│
├── client/
│   ├── src/
│   ├── public/
│   └── package.json
│
└── server/
    ├── controllers/
    ├── routes/
    ├── middleware/
    ├── app.js
    └── package.json

🤔 Why Firebase + Render?

This combination is perfect for modern React applications.

🔥 Firebase Hosting

Global CDN
HTTPS by default
Extremely fast
Easy deployment
Excellent for React/Vite projects

🚀 Render

Free starter tier
Automatic GitHub deployments
Environment variable support
SSL included
Great Express support

Step 1 — Prepare Your Backend

Before deployment, make sure your backend works locally.

npm install
npm run dev

Visit:

http://localhost:5000

Ensure your API responds correctly.

Step 2 — Configure Environment Variables

Never hardcode secrets.

Create a .env file:

PORT=5000
DATABASE_URL=your_database_url
JWT_SECRET=your_secret
STRIPE_SECRET_KEY=your_key
CLIENT_URL=http://localhost:5173

Never commit this file.

Instead, add it to .gitignore.

.env

Step 3 — Configure CORS

When the frontend is hosted on Firebase, Express must allow requests from that domain.

app.use(
  cors({
    origin: [
      "http://localhost:5173",
      "https://your-app.web.app",
      "https://your-app.firebaseapp.com",
    ],
    credentials: true,
  })
);

Later you'll replace these URLs with your production Firebase domain.

Step 4 — Push Your Backend to GitHub

Initialize Git if necessary.

git init

Commit your project.

git add .
git commit -m "Initial deployment"

Push to GitHub.

git push origin main

Step 5 — Deploy Express Backend to Render

Create:

New +

Choose:

Web Service

Connect your GitHub repository.

Select your backend repository.

Build Command

npm install

Start Command

npm start

node app.js

depending on your project.

Root Directory

If your backend lives inside:

server

Set:

Root Directory = server

Environment Variables

Add every variable from your .env.

Example:

DATABASE_URL
JWT_SECRET
STRIPE_SECRET_KEY
CLIENT_URL

Render securely stores these values, so they are never committed to Git.

Step 6 — Wait for Deployment

Render will:

Clone your repository
Install dependencies
Build the application
Start the server

Eventually you'll receive:

https://your-api.onrender.com

Test it.

Example:

https://your-api.onrender.com/api/products

If you receive JSON…

🎉 Congratulations! Your backend is live.

Step 7 — Update Frontend API URL

Instead of:

axios.get("http://localhost:5000/api/products");

Use environment variables.

VITE_API_URL=https://your-api.onrender.com

Create an Axios instance.

import axios from "axios";

export default axios.create({
  baseURL: import.meta.env.VITE_API_URL,
});

Now your frontend automatically switches between development and production.

Step 8 — Prepare React for Production

Install Firebase CLI.

npm install -g firebase-tools

firebase login

Initialize hosting.

firebase init hosting

Choose:

Existing Firebase Project
Hosting

For the public directory enter:

dist

When prompted:

Single Page Application?

Choose:

Yes

Do not overwrite index.html.

Step 9 — Build React

npm run build

This generates:

dist/

Your production build is ready.

Step 10 — Deploy to Firebase

firebase deploy

Firebase provides:

https://your-project.web.app

and

https://your-project.firebaseapp.com

Your React application is now served globally over HTTPS.

Step 11 — Update Backend CORS

Replace:

origin: ["http://localhost:5173"];

with:

origin: [
  "http://localhost:5173",
  "https://your-project.web.app",
  "https://your-project.firebaseapp.com",
];

Redeploy your backend.

Step 12 — Test Everything

Visit your Firebase URL and verify:

✅ Home page
✅ Authentication
✅ Login
✅ Register
✅ Products
✅ Categories
✅ Cart
✅ Orders
✅ Stripe Checkout
✅ Protected routes
✅ Logout

Open Developer Tools.

There should be:

✅ No CORS errors
✅ No 404 errors
✅ Successful API requests

💡 Production Tips

🔒 Use HTTPS Everywhere

Both Firebase and Render provide HTTPS by default.

Never mix HTTP and HTTPS.

🔐 Keep Secrets Secure

Never expose:

JWT Secret
Stripe Secret Key
Database URL

Only variables beginning with:

VITE_

should be exposed to the frontend.

🔄 Enable Automatic Deployments

Every push to GitHub can automatically trigger a deployment on Render, making continuous delivery effortless.

❌ Common Deployment Errors

CORS Error

Access-Control-Allow-Origin

Fix

Add your Firebase domain to Express CORS.

API Not Found

Check your Axios baseURL.

Blank React Screen

Usually:

npm run build

failed.

Always build locally first.

Environment Variables Missing

Restart your Render service after updating environment variables.

Wrong Build Folder

For Vite, use:

dist

not

build

✅ Deployment Checklist

✅ Backend deployed
✅ Database connected
✅ Environment variables added
✅ Firebase Hosting configured
✅ React built
✅ Axios uses production URL
✅ CORS updated
✅ HTTPS enabled
✅ Everything tested

🎉 Conclusion

Congratulations!

You now have a fully deployed modern full-stack application with:

⚛️ React hosted on Firebase Hosting
🚀 Express running on Render
🗄️ PostgreSQL hosted online
🔒 Secure environment variables
🌍 Production-ready frontend/backend communication

This architecture is simple, scalable, and perfect for portfolios, personal projects, and startup MVPs.

As your application grows, you can further improve it by adding:

Custom domains
CI/CD pipelines
Monitoring
Logging
Docker
Automated testing

Happy coding! 🚀

🎥 Prefer Watching Instead?

This article accompanies Part 18 of my Modern React E-Commerce Series, where I walk through the complete deployment process step by step.

In the video you'll learn:

🚀 Deploy an Express backend to Render
🔥 Host a React (Vite) frontend on Firebase Hosting
🌍 Configure production environment variables
🔐 Handle CORS correctly
🔄 Connect frontend and backend
✅ Deploy a real-world full-stack application from start to finish

If you're building along with the series, this lesson completes the journey by taking your application from local development to a live production deployment.

👉 Watch Part 18

https://www.youtube.com/watch?v=3LMJjIwZDx0&list=PL_02r0p8Ku_6tR8L-n-yj7MW8rrMtswwk&index=18

📚 Continue Learning — Complete React E-Commerce Playlist

If you're interested in building a production-ready e-commerce application from scratch, check out the complete playlist on my YouTube channel Codeek.

The series covers:

⚛️ Modern React
🎨 Chakra UI
🔄 React Query
📦 Zustand
💳 Stripe Payments
🗄️ Express.js Backend
🐘 PostgreSQL
🚀 Firebase Hosting
☁️ Render Deployment
📁 Project Architecture
🛒 Complete E-Commerce Development

Whether you're preparing for interviews, building your portfolio, or creating your next startup, this series walks you through every step with practical, real-world examples.

⭐ If you find the tutorials helpful, consider subscribing to Codeek and sharing the playlist with fellow developers.

Happy coding! 🚀

🚀 Stop Sorting on the Frontend! Implement Server-Side Sorting with Chakra UI Select & React Query

codeek — Sat, 18 Jul 2026 12:07:34 +0000

🚀 Server-Side Sorting in React with React Query & Chakra UI

Most of the Frontend developers directly jump into the native sort function given by Javascript when it comes to sorting:

const sortedProducts = [...products].sort((a, b) => a.price - b.price);

This works great for small datasets.

But what happens when your API returns 50,000+ products?

Every user must download every product before React can sort them. That results in:

❌ Large API responses
❌ Slow page loads
❌ High memory usage
❌ Poor scalability

A better solution is server-side sorting.

Instead of sorting in React, send the sorting options to your backend using query parameters and let your database return the data already sorted.

Why Server-Side Sorting?

❌ Frontend Sorting

GET /products
        ↓
Returns 50,000 Products
        ↓
React Sorts Everything

Problems

Large API responses
Slow loading
High memory usage
Doesn't scale
More work for the browser

✅ Server-Side Sorting

GET /products?sortBy=price&order=asc
        ↓
Backend sorts database
        ↓
Returns sorted products

Benefits

Faster responses
Smaller payloads
Database does the heavy lifting
Better scalability
Cleaner frontend

Step 1 — Install Dependencies

npm install @tanstack/react-query axios

Step 2 — Create API Function

import axios from "axios";

export const getProducts = async (sortBy, order) => {
  const response = await axios.get("/products", {
    params: {
      sortBy,
      order,
    },
  });

  return response.data;
};

Example request:

GET /products?sortBy=price&order=desc

Step 3 — Create React Query Hook

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

export const useProducts = (sortBy, order) => {
  return useQuery({
    queryKey: ["products", sortBy, order],
    queryFn: () => getProducts(sortBy, order),
  });
};

Each sorting combination gets its own cache automatically.

Step 4 — Create the Sort Dropdown

<Select
  value={sort}
  onChange={(e) => setSort(e.target.value)}
>
  <option value="latest">Latest</option>
  <option value="price-asc">Price: Low to High</option>
  <option value="price-desc">Price: High to Low</option>
  <option value="name-asc">Name (A-Z)</option>
  <option value="name-desc">Name (Z-A)</option>
</Select>

Step 5 — Convert the Selected Option

const sortOptions = {
  latest: {
    sortBy: "createdAt",
    order: "desc",
  },
  "price-asc": {
    sortBy: "price",
    order: "asc",
  },
  "price-desc": {
    sortBy: "price",
    order: "desc",
  },
  "name-asc": {
    sortBy: "title",
    order: "asc",
  },
  "name-desc": {
    sortBy: "title",
    order: "desc",
  },
};

const { sortBy, order } = sortOptions[sort];

Step 6 — Fetch Sorted Products

const { data, isLoading } = useProducts(sortBy, order);

Flow:

User Selects Sort
        ↓
React State Updates
        ↓
React Query detects new queryKey
        ↓
API Request
        ↓
Backend Sorts Database
        ↓
Updated Products

Step 7 — Render Products

{data?.products?.map((product) => (
  <ProductCard
    key={product.id}
    product={product}
  />
))}

React Query automatically handles:

Loading state
Error state
Request caching
Background refetching

Bonus — Combine Search + Sorting

GET /products?search=iphone&sortBy=price&order=asc

useQuery({
  queryKey: ["products", search, sortBy, order],
  queryFn: () =>
    getProducts({
      search,
      sortBy,
      order,
    }),
});

Every search and sorting combination is cached independently.

Complete Flow

User Selects Sort
        ↓
Chakra UI Select
        ↓
React State
        ↓
React Query
        ↓
GET /products?sortBy=price&order=asc
        ↓
Backend Database
        ↓
Sorted Products
        ↓
React UI Updates

Final Thoughts

Frontend sorting is perfectly fine for small datasets.

However, for production applications such as:

Ecommerce
CRM Systems
Admin Dashboards
Inventory Management
SaaS Platforms

Server-side sorting is the preferred approach because it minimizes data transfer, improves performance, and keeps your frontend lightweight.

Combined with TanStack React Query and Chakra UI, you can build scalable, production-ready React applications with very little code.

🎥 Watch the Full Ecommerce Series

This tutorial is part of my Modern Ecommerce in React & Modern Stacks (2026) series.

📺 Full Playlist

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

🎬 This Episode

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

If you enjoy practical React tutorials covering React Query, Chakra UI, Zustand, Stripe, Firebase, Authentication, and Full-Stack Development, consider following Codeek for more production-ready React content.

🚀 Stop Filtering on the Frontend, Build Server-Side Search in React using React Query For Performance Optimization

codeek — Fri, 17 Jul 2026 09:13:30 +0000

Every React Developer Has Done This at Least Once 😅

const filteredProducts = products.filter((product) =>
  product.title.toLowerCase().includes(search.toLowerCase())
);

It works...

Until your API returns 10,000+ products.

Now you're downloading thousands of unnecessary records just to search for a single keyword.

❌ Slower loading
❌ Wasted bandwidth
❌ High memory usage
❌ Doesn't scale

So what's the better approach?

🚀 The Solution: Server-Side Search

Instead of downloading every product and filtering them inside React, let your backend search the database and return only the matching records.

When you combine this with TanStack React Query, you also get:

✅ Automatic caching
✅ Loading states
✅ Background refetching
✅ Request deduplication
✅ Cleaner server-state management

In this guide, we'll build a production-ready server-side search using React Query.

Why Server-Side Search?

Imagine an ecommerce application with 100,000 products.

❌ Client-Side Search

Frontend
     ↓
GET /products
     ↓
100,000 products
     ↓
React filters data

Problems

Huge API responses
Slow initial loading
High memory usage
Wasted network bandwidth
Poor scalability

✅ Server-Side Search

Frontend
     ↓
GET /products?search=iphone
     ↓
Backend searches database
     ↓
Returns only matching products

Benefits

Faster responses
Smaller payloads
Better scalability
Lower memory usage
Better user experience

Project Structure

src
├── api
│     productApi.js
│
├── hooks
│     useProducts.js
│
├── pages
│     ProductPage.jsx
│
└── components
      SearchInput.jsx

Keeping your API logic separate from your UI makes applications much easier to maintain as they grow.

Step 1 — Install React Query

npm install @tanstack/react-query axios

Create your Query Client.

const queryClient = new QueryClient();

<QueryClientProvider client={queryClient}>
  <App />
</QueryClientProvider>;

Step 2 — Create the API Function

Your backend should support query parameters like this:

GET /products?search=iphone

Create the API function.

export const getProducts = async (search) => {
  const response = await axios.get("/products", {
    params: {
      search,
    },
  });

  return response.data;
};

Instead of filtering on the frontend, we're sending the search value directly to the backend.

Step 3 — Create a React Query Hook

export const useProducts = (search) => {
  return useQuery({
    queryKey: ["products", search],
    queryFn: () => getProducts(search),
  });
};

This is where React Query really shines.

Every unique search term gets its own cache automatically.

Searching for:

iphone

and later:

samsung

creates two independent cached queries without any extra code.

Step 4 — Create Search State

const [search, setSearch] = useState("");

<input
  value={search}
  onChange={(e) => setSearch(e.target.value)}
  placeholder="Search products..."
/>

Step 5 — Fetch Products

const { data, isLoading } = useProducts(search);

Every time the search changes:

User Types
      ↓
React State Updates
      ↓
React Query
      ↓
Backend API
      ↓
Updated Products

No client-side filtering required.

Step 6 — Render Products

{
  data?.products?.map((product) => (
    <ProductCard key={product.id} product={product} />
  ));
}

That's it.

React Query automatically handles:

Caching
Loading states
Background refetching
Request deduplication
Server-state synchronization

⚡ Bonus Improvement: Debounce Search

Without debouncing:

i
ip
iph
ipho
iphon
iphone

That's 6 API requests.

Instead, debounce the search input by 300–500ms so the request is only sent after the user pauses typing.

This significantly reduces unnecessary API calls while keeping the UI responsive.

Complete Flow

User Types
      ↓
Search State Updates
      ↓
React Query detects new queryKey
      ↓
Calls Backend API
      ↓
Database searches records
      ↓
Returns matching products
      ↓
React UI updates

Simple.

Clean.

Scalable.

Why React Query Makes This Better

Without React Query, you'd have to manually manage:

Loading states
Error handling
Caching
Duplicate requests
Background refetching

React Query gives you all of these features out of the box, making it a perfect companion for server-side search.

Final Thoughts

Client-side searching is completely fine for small datasets.

However, once you're building applications like:

🛒 Ecommerce
📊 Admin Dashboards
👥 CRM Systems
📦 Inventory Management
🏢 HR Platforms

server-side search becomes the professional solution.

Your frontend stays lightweight, your backend does the heavy lifting, and your users enjoy a much faster experience.

🎥 Watch the Full Video Tutorial

This article is part of my Modern Ecommerce in React & Modern Stacks (2026) series.

▶️ Full Playlist

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

In Episode 11, I walk through the complete implementation of server-side search using React Query, Axios, and backend query parameters.

👉 Watch Episode 11

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

If you're following the full series, you'll learn how to build a production-ready ecommerce application from scratch using modern React technologies.

⭐ If this article helped you, consider following Codeek for more tutorials on React, TypeScript, Chakra UI, TanStack Query, Zustand, Stripe, Firebase, and full-stack development.

Happy coding! 🚀

🚀React Router Setup Using createBrowserRouter (v6+ Pattern)

codeek — Wed, 08 Jul 2026 07:38:09 +0000

If you're still using BrowserRouter with Routes, it's time to move to the modern React Router pattern using createBrowserRouter.

This approach makes your application more scalable and prepares your project for advanced features like nested layouts, loaders, actions, and protected routes.

📦 Step 1: Install React Router

npm install react-router-dom
📁 Recommended Project Structure
src/
│
├── layouts/
│ └── MainLayout.jsx
│
├── pages/
│ ├── Home.jsx
│ ├── Products.jsx
│ ├── ProductDetails.jsx
│ ├── Cart.jsx
│ └── NotFound.jsx
│
├── routes/
│ └── index.jsx
│
├── App.jsx
└── main.jsx

Keeping your routes in a dedicated folder makes the application easier to maintain as it grows.

⚡ Step 2: Create Your Router

Create a file:

src/routes/index.jsx

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

import MainLayout from "../layouts/MainLayout";

import Home from "../pages/Home";
import Products from "../pages/Products";
import ProductDetails from "../pages/ProductDetails";
import Cart from "../pages/Cart";
import NotFound from "../pages/NotFound";

export const router = createBrowserRouter([
  {
    path: "/",
    element: <MainLayout />,
    children: [
      {
        index: true,
        element: <Home />,
      },
      {
        path: "products",
        element: <Products />,
      },
      {
        path: "products/:id",
        element: <ProductDetails />,
      },
      {
        path: "cart",
        element: <Cart />,
      },
    ],
  },
  {
    path: "*",
    element: <NotFound />,
  },
]);

The router is created once and supplied to your application through RouterProvider, which is the recommended pattern for modern React Router applications.

🏗 Step 3: Configure main.jsx

import React from "react";
import ReactDOM from "react-dom/client";

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

import { router } from "./routes";

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

🏠 Step 4: Create a Layout


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

const MainLayout = () => {
  return (
    <>
      <header>Navbar</header>

      <main>
        <Outlet />
      </main>

      <footer>Footer</footer>
    </>
  );
};

export default MainLayout;

is where nested child routes are rendered.

📍 Route Overview

URL	Component
`/`	Home
`/products`	Products
`/products/:id`	Product Details
`/cart`	Cart
`*`	404 Page

💡 Why Use createBrowserRouter?

✅ Cleaner route configuration

✅ Supports nested layouts effortlessly

✅ Built for Data APIs (Loaders & Actions)

✅ Easier authentication and protected routes

✅ Better scalability for large React applications

React Router recommends creating the router outside the React tree and passing it to RouterProvider for modern applications.

🔥 What's Next?

Once your router is configured, you can easily add:

🔐 Protected Routes
👤 Authentication
📦 Nested Layouts
⚡ Loaders & Actions
❌ Error Pages
🔄 Lazy Loading
🌍 Dynamic Routes
🎥 Learn React Router the Practical Way

If you'd like to see everything built step by step—from installation to nested routes, protected routes, authentication, and real-world project structure—check out this tutorial:

📺 React Router Complete Setup

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

You'll learn:

✅ Modern React Router setup
✅ createBrowserRouter
✅ Nested Routing
✅ Layouts
✅ Navigation
✅ Best Folder Structure
🛒 Build a Production-Ready Ecommerce Application

Want to apply React Router in a real project?

Watch the complete Ecommerce series where we build everything from scratch using modern React technologies:

Tech Stack

⚛️ React
🛣 React Router
🎨 Chakra UI
🐻 Zustand
💳 Stripe Payment Integration
📡 API Integration
🛒 Shopping Cart
🚀 Production Best Practices

📺 Full Ecommerce Playlist

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

If you're aiming to build production-ready React applications instead of simple demos, this series is designed to help you understand how these technologies work together in a real-world ecommerce project.

How to Deploy/Host a React App to Firebase in few minutes: A Step-by-Step Guide

codeek — Mon, 06 Jul 2026 12:56:17 +0000

Taking a React application live doesn't have to be complicated. If you've built a React app and want a fast, secure, and reliable hosting solution, Firebase Hosting is one of the best options available.

In this guide, you'll learn how to deploy your React application to production using Firebase Hosting in just a few minutes.

Why Firebase Hosting?

Firebase Hosting provides:

⚡ Fast global CDN delivery
🔒 Free SSL certificates
🌍 Custom domain support
🚀 Easy deployment with a single command
🔄 CI/CD integration with GitHub

Whether you're deploying a personal project, portfolio, SaaS dashboard, or production application, Firebase Hosting offers a simple and scalable solution.

Step 1: Install Firebase CLI

To interact with Firebase services from your terminal, install the Firebase Command Line Interface globally:

npm install -g firebase-tools

After installation, verify that the CLI is available:

firebase --version

Step 2: Login to Firebase

Authenticate your local machine with your Firebase account:

firebase login

You may be asked whether you want to enable anonymous usage reporting.

Allow Firebase to collect CLI usage and error reporting information? (Y/n)

Choose your preferred option.

A browser window will open automatically. Sign in using the Google account associated with your Firebase project and grant the required permissions.

Once authenticated successfully, you'll see a confirmation message in your terminal.

Step 3: Initialize Firebase Hosting

Navigate to your React project directory and run:

firebase init hosting

The Firebase CLI will guide you through several configuration steps.

Configuration Options

✔ Ready to proceed?

✔ Select a Firebase project

Choose:

Use an existing project

Then select your Firebase project from the list.

✔ Public directory

If you're using:

Vite → dist
Create React App → build

dist

build

✔ Configure as a Single-Page Application?

Configure as a single-page app (rewrite all urls to /index.html)?

Choose:

This is extremely important for React Router applications. It ensures that refreshing routes such as:

/products
/profile
/settings

won't result in a 404 error.

✔ GitHub Actions Setup

Set up automatic builds and deploys with GitHub?

Choose:

unless you want to configure CI/CD immediately.

✔ Overwrite Existing Files?

If Firebase asks to overwrite existing files such as index.html, select:

This prevents accidental replacement of your application files.

Step 4: Build Your React Application

Before deploying, create a production build.

Vite

npm run build

Create React App

npm run build

This generates the optimized production assets inside your configured output directory.

Step 5: Deploy to Firebase Hosting

Now deploy your application:

firebase deploy --only hosting

Firebase will:

Upload your production build
Configure hosting infrastructure
Generate a public URL

Example output:

✔ Deploy complete!

Hosting URL:
https://your-project.web.app

Open the URL in your browser and your React application is now live 🎉

Common React Router Fix

If you're using React Router, always answer:

Configure as a single-page app?

with:

Firebase will automatically create the required rewrite rules:

{
  "hosting": {
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

This prevents route refreshes from returning 404 errors.

Final Thoughts

Firebase Hosting is one of the easiest ways to deploy a React application. The setup takes only a few minutes, and you get global hosting, SSL, and excellent performance out of the box.

The complete deployment workflow is:

npm install -g firebase-tools
firebase login
firebase init hosting
npm run build
firebase deploy --only hosting

That's it! Your React application is now live and accessible worldwide.

Happy Coding! 🚀

🎥 Prefer a Video Tutorial?

Watch the full deployment tutorial here:

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

If you enjoy React, TypeScript, and Full-Stack Development content, follow Codeek on YouTube and Medium for more production-grade tutorials, courses, and real-world engineering practices.

How Enterprise React Apps Handle JWT Token Refresh Automatically

codeek — Mon, 06 Jul 2026 07:38:35 +0000

Access Token & Refresh Token Authentication in React (Axios + React Query)

Authentication is one of the most critical parts of modern web applications. In enterprise applications, simply storing a JWT and sending it with every request isn't enough. We need a secure mechanism that provides a seamless user experience while protecting user sessions.

This is where Access Tokens and Refresh Tokens come into play.

In this article, we'll understand how a production-ready authentication flow works using React, Axios, and React Query.

Why Do We Need Two Tokens?

A common question developers ask is:

"Why not just use one JWT token?"
The answer is security.

Imagine your access token is stolen. If it never expires, an attacker could access your APIs indefinitely.

Instead, enterprise applications separate authentication into two different tokens:

Access Token
Refresh Token

Access Token

An Access Token is a short-lived JWT that is sent with every protected API request.

Characteristics
✅ Sent with every API request
✅ Usually expires within 5–15 minutes
✅ Stored only in memory (recommended) or a secure cookie
✅ Contains user identity and permissions

Example
Authorization: Bearer eyJhbGciOi...

Refresh Token

A Refresh Token has a completely different responsibility.

Instead of accessing APIs, it is used only to obtain a new Access Token after the current one expires.

Characteristics
✅ Long-lived (days or weeks)
✅ Never sent with every request
✅ Stored inside an HttpOnly Secure Cookie
✅ Sent only to the refresh endpoint

Initial Login Flow

User Login
│
▼
Backend validates credentials
│
▼
Returns
├── Access Token (15 min)
└── Refresh Token (7 days)

Authentication Flow

A typical enterprise authentication flow looks like this:

User Login
│
▼
Backend validates credentials
│
▼
Returns:
• Access Token
• Refresh Token
│
▼
Frontend stores Access Token
Refresh Token stays inside HttpOnly Cookie
│
▼
User makes API requests
│
▼
Access Token expires
│
▼
Axios detects 401 Unauthorized
│
▼
Calls /auth/refresh
│
▼
Backend validates Refresh Token
│
▼
Returns new Access Token
│
▼
Retry original request

The user never has to log in again while the Refresh Token remains valid.

Why Store Refresh Token in an HttpOnly Cookie?

Many beginners store both tokens in localStorage.

This is not recommended.

If your application suffers from an XSS (Cross-Site Scripting) attack, JavaScript can read everything stored in localStorage.

An HttpOnly Cookie cannot be accessed by JavaScript, making it significantly more secure.

Recommended Storage Strategy

Token Storage
Access Token Memory (React State, Zustand, Redux, etc.)
Refresh Token HttpOnly Secure Cookie
Using Axios Interceptors

Axios Interceptors allow us to intercept every request and response globally.

Instead of checking token expiration inside every API call, we centralize the authentication logic.

Request Interceptor

Before every request:

Read the current Access Token
Attach it to the Authorization header
Authorization: Bearer accessToken

No need to manually attach tokens every time.

Response Interceptor

When the backend returns 401 Unauthorized:

Pause the failed request.
Call the refresh endpoint.
Receive a new Access Token.
Update the stored token.
Retry the original request.

The user never notices that the Access Token expired.

Where Does React Query Fit?

React Query is responsible for:

Server state
Data fetching
Caching
Background refetching
Automatic retries

Authentication should not be mixed into every query.

Instead, the architecture should look like this:

React Query
│
▼
Axios Instance
│
▼
Axios Interceptors
│
▼
Backend APIs

React Query simply calls Axios.

Axios automatically handles authentication.

This separation keeps your application clean, reusable, and maintainable.

Example Flow with React Query

Suppose we're fetching a user's profile.

useQuery()
│
▼
Axios GET /profile
│
▼
401 Unauthorized
│
▼
Axios refreshes token
│
▼
Retries request
│
▼
Profile returned
│
▼
React Query updates cache

Notice that React Query never needs to know about authentication.

Everything happens transparently.

Prevent Multiple Refresh Requests

Imagine five API requests are sent simultaneously.

If the Access Token expires, every request receives:

401 Unauthorized

Without proper handling:

Refresh
Refresh
Refresh
Refresh
Refresh

This creates:

Duplicate refresh requests
Race conditions
Unnecessary server load
Better Approach
First request
│
Starts refresh
│
───────────────
Other failed requests wait
───────────────
│
New Access Token received
│
Retry all queued requests

This queueing strategy is commonly used in enterprise applications.

Logout Flow

Eventually, the Refresh Token also expires.

When refreshing fails:

401 Unauthorized
│
▼
Refresh Failed
│
▼
Clear user state
│
▼
Redirect to Login

This ensures invalid sessions are cleaned up properly.

Best Practices
✅ Keep Access Tokens short-lived (5–15 minutes)
✅ Store Refresh Tokens inside HttpOnly Secure Cookies
✅ Store Access Tokens in memory whenever possible
✅ Use Axios Interceptors for automatic token refresh
✅ Keep authentication logic outside React Query
✅ Retry the original request after refreshing the token
✅ Queue failed requests during refresh to prevent duplicate refresh calls
✅ Clear authentication state when refresh fails

Architecture Overview

React Components
│
▼
React Query
│
▼
Axios Instance
│
▼
Request Interceptor
│
▼
Protected API
│
401 Unauthorized
│
▼
Response Interceptor
│
▼
Refresh Endpoint
│
▼
New Access Token
│
▼
Retry Original Request
Conclusion

Using Access Tokens and Refresh Tokens is the industry standard for building secure authentication systems.

By combining Axios Interceptors with React Query, you can create a seamless authentication experience where expired tokens are refreshed automatically without interrupting the user.

Keeping authentication inside the Axios layer also makes your React Query hooks simple, reusable, and focused only on fetching data.

🎥 Video Tutorial

If you prefer learning through video, check out the complete guide:

How to Automatically Refresh JWT Tokens in React

https://www.youtube.com/watch?v=ntr2CCoeP8o&t=71s

If you found this article helpful, consider leaving a ❤️, sharing it with other developers, and following me for more React, TypeScript, and full-stack development content.

🚀 Build a Production-Ready E-Commerce Application with React & Modern Frontend Technologies - 2026

codeek — Sat, 13 Jun 2026 09:58:00 +0000

Want to learn how modern e-commerce applications are built in real-world companies?

In this comprehensive project-based series, we'll build a complete online store from scratch using React and industry-standard tools used by professional frontend developers.

Here is a link to a playlist freely uploaded in Youtube:
Youtube playlist

🎯 What You'll Build

✅ Advanced Product Listing Page

✅ Search, Filtering, Sorting & Pagination

✅ Product Details & Related Products

✅ Shopping Cart with Persistent State

✅ Secure Stripe Payment Integration

✅ Responsive Mobile-First UI

✅ Dynamic Loading & Error States

✅ Reusable Component Architecture

✅ API Integration & Server State Management

✅ Modern Animations & Interactive Effects

✅ Hero Sliders & Product Carousels

✅ Performance Optimization Techniques

✅ Production-Ready Folder Structure

🛠️ Technologies You'll Learn

⚛️ React

🐻 Zustand for Global State Management

🔄 React Query (TanStack Query) for Server State & Caching

📡 Axios for API Communication

💳 Stripe for Payment Processing

🎨 Chakra UI for Accessible UI Components

🧭 React Router for Client-Side Routing

🎠 Swiper.js for Modern Sliders

✨ Tilt Parallax for Interactive Animations

🟨 JavaScript

💡 Why Build This Project?

Most tutorials teach you isolated concepts.

This series focuses on building a complete real-world application while applying best practices used in professional development teams.

You'll learn:

✅ Scalable frontend architecture
✅ State management patterns
✅ Efficient data fetching strategies
✅ Payment gateway integration
✅ Component reusability
✅ Performance optimization
✅ Responsive design principles
✅ Production-ready coding practices

By the end of this series, you'll have a portfolio-worthy project that demonstrates the skills companies expect from modern React developers.

Whether you're a beginner building your first serious project or an experienced developer looking to strengthen your React fundamentals, this series will help you gain practical experience by building something real.

🔥 Build. Learn. Deploy. Get Job-Ready.

Follow along and let's create a modern e-commerce application from scratch.

🚀 Build a Production-Ready E-Commerce Application with React & Modern Frontend Technologies

codeek — Sat, 13 Jun 2026 09:58:00 +0000

Want to learn how modern e-commerce applications are built in real-world companies?

In this comprehensive project-based series, we'll build a complete online store from scratch using React and industry-standard tools used by professional frontend developers.

Here is a link to a playlist freely uploaded in Youtube:
Youtube playlist

🎯 What You'll Build

✅ Advanced Product Listing Page

✅ Search, Filtering, Sorting & Pagination

✅ Product Details & Related Products

✅ Shopping Cart with Persistent State

✅ Secure Stripe Payment Integration

✅ Responsive Mobile-First UI

✅ Dynamic Loading & Error States

✅ Reusable Component Architecture

✅ API Integration & Server State Management

✅ Modern Animations & Interactive Effects

✅ Hero Sliders & Product Carousels

✅ Performance Optimization Techniques

✅ Production-Ready Folder Structure

🛠️ Technologies You'll Learn

⚛️ React

🐻 Zustand for Global State Management

🔄 React Query (TanStack Query) for Server State & Caching

📡 Axios for API Communication

💳 Stripe for Payment Processing

🎨 Chakra UI for Accessible UI Components

🧭 React Router for Client-Side Routing

🎠 Swiper.js for Modern Sliders

✨ Tilt Parallax for Interactive Animations

🟨 JavaScript

💡 Why Build This Project?

Most tutorials teach you isolated concepts.

This series focuses on building a complete real-world application while applying best practices used in professional development teams.

You'll learn:

Scalable frontend architecture
State management patterns
Efficient data fetching strategies
Payment gateway integration
Component reusability
Performance optimization
Responsive design principles
Production-ready coding practices

By the end of this series, you'll have a portfolio-worthy project that demonstrates the skills companies expect from modern React developers.

🔥 Build. Learn. Deploy. Get Job-Ready.

Follow along and let's create a modern e-commerce application from scratch.

Build Live stream or video call app in React.js in few minutes

codeek — Fri, 12 Dec 2025 17:04:53 +0000

Build a Live stream app in React with Zegocloud 🚀

If your preference is video, here is a video source

Introduction

Video calling and live streaming have become must-have features in today's applications, and ZEGOCLOUD API simplifies the integration process remarkably. You can implement complete live streaming functionality, create separate rooms, add in-app chat, and more with minimal code.
What makes ZEGOCLOUD particularly attractive is their generous offer: every new account receives 10,000 free minutes, perfect for testing or launching a basic version of your application.

This guide walks you through creating a live streaming app, step by step — simply follow the instructions and use the code snippets provided here or from ZEGOCLOUD's official documentation.
Zegocloud
The flexibility doesn't end with React. ZEGOCLOUD supports multiple modern frameworks including Nextjs, Angular, Vue and also with Wordpress and HTML with framework or code examples available for each.
By following this tutorial, we'll have a fully operational live streaming application in React. Let's dive in! 🚀

Project Setup And Prerequisites

Let's make sure we have everything we need before we start:

1️⃣ Node.js
Make sure Node.js is installed on our machine. If it's not already installed.

Download and install from the official site:
nodejs
Choose LTS version.

This installs:
node
npm
npx

To check if Node.js is installed or needs an update, we need to run the script:

node -v  # Check installed version
npm update nodejs  # Update Node.js if needed

Setting up React with Vite

First of all, lets create an empty folder with any name, lets say live-stream-app-react and open in your editor like Visual studio Code.
Lets now open terminal and run the script

npm create vite@latest .

We then need to give package name in the prompt, any name you prefer and choose React from the second prompt and then Javascript/Typescript from the third prompt.
This will install all the required packages and dependencies in your folder, live-stream-app-react in our case.

Lets sign up for a ZEGOCLOUD Account for free

To use ZEGOCLOUD SDK, we need to sign up for a free account and get our App ID and App Sign here:
🔗 Sign Up on ZEGOCLOUD

After signing up, we will receive 10,000 free minutes to test and deploy our live streaming application.

Let’s Start: Building a live streaming App with ZEGOCLOUD in React

Now that we have everything set up, let’s start integrating ZEGOCLOUD into our React project step by step.

Step 1: Install the ZEGOCLOUD SDK

To integrate ZEGOCLOUD into your React project, we will need to install the SDK using the following script:

npm install @zegocloud/zego-uikit-prebuilt

Step 2: Get our AppID and ServerSecret

Lets now log in to ZEGOCLOUD and navigate to the developer console to obtain our AppID and ServerSecret which we need to use in our project code later to initialize SDK.

⚠️ Important: Lets keep our AppID and ServerSecret private! We need to consider we never share it with anyone or exposing it to others.

Step 3: Initialize the SDK in React

Now, modify your App.jsx/App.tsx file to initialize the ZEGOCLOUD SDK and create a function to start live streaming component.

import * as React from "react";
import { ZegoUIKitPrebuilt } from "@zegocloud/zego-uikit-prebuilt";

function randomID(len) {
  let result = "";
  if (result) return result;
  var chars = "12345qwertyuiopasdfgh67890jklmnbvcxzMNBVCZXASDQWERTYHGFUIOLKJP",
    maxPos = chars.length,
    i;
  len = len || 5;
  for (i = 0; i < len; i++) {
    result += chars.charAt(Math.floor(Math.random() * maxPos));
  }
  return result;
}

export function getUrlParams(url = window.location.href) {
  let urlStr = url.split("?")[1];
  return new URLSearchParams(urlStr);
}

export default function App() {
  const roomID = getUrlParams().get("roomID") || randomID(5);
  let role_str = getUrlParams(window.location.href).get("role") || "Host";
  const role =
    role_str === "Host"
      ? ZegoUIKitPrebuilt.Host
      : role_str === "Cohost"
      ? ZegoUIKitPrebuilt.Cohost
      : ZegoUIKitPrebuilt.Audience;

  let sharedLinks = [];
  if (role === ZegoUIKitPrebuilt.Host || role === ZegoUIKitPrebuilt.Cohost) {
    sharedLinks.push({
      name: "Join as co-host",
      url:
        window.location.protocol +
        "//" +
        window.location.host +
        window.location.pathname +
        "?roomID=" +
        roomID +
        "&role=Cohost",
    });
  }
  sharedLinks.push({
    name: "Join as audience",
    url:
      window.location.protocol +
      "//" +
      window.location.host +
      window.location.pathname +
      "?roomID=" +
      roomID +
      "&role=Audience",
  });
  // generate Kit Token
  const appID = your_app_id;
  const serverSecret = "your_app_secret";
  const kitToken = ZegoUIKitPrebuilt.generateKitTokenForTest(
    appID,
    serverSecret,
    roomID,
    randomID(5),
    randomID(5)
  );

  // start the call
  let myMeeting = async (element) => {
    // Create instance object from Kit Token.
    const zp = ZegoUIKitPrebuilt.create(kitToken);
    // start the call
    zp.joinRoom({
      container: element,
      scenario: {
        mode: ZegoUIKitPrebuilt.LiveStreaming,
        config: {
          role,
        },
      },
      sharedLinks,
    });
  };

  return (
    <div
      className="myCallContainer"
      ref={myMeeting}
      style={{ width: "100vw", height: "100vh" }}
    ></div>
  );
}

Step 4: Add our AppID and ServerSecret

Now, we need to add our AppID and ServerSecret here in this codeblock of above code in App.jsx/App.tsx:

// generate Kit Token
  const appID = your_app_id;
  const serverSecret = "your_app_secret";

Step 5: Run the App

Now, lets start our project by running the script:

npm run dev

Our live streaming app is now up and running! 🎉

🎬 Want a Video Tutorial?
If you prefer watching a video instead of reading, check out my tutorial on YouTube where I explain the entire process step by step! 🎥
Youtube video

And before leaving, we can also connect in github:
My github

Conclusion

Hurray! 🎉 We have successfully built a fully functional live streaming app using React and ZEGOCLOUD.

I will be coming back with other tutorials regarding Nextjs, Reactjs and so many other things about Frontend and web development. Until then, have a good time my friends.

Warm Regards,
Codeek

DEV Community: codeek

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

Why Use Nested Routes?

Project Structure

Step 1 — Install React Router

Step 2 — Create the Router

Step 3 — Create a Layout Component

Step 4 — Create a Dashboard Layout

Step 5 — Wrap Everything with RouterProvider

Final Route Structure

Why This Pattern is Better

Key Takeaways

🎥 Prefer Learning by Watching?

🚀 Deploy a Full Stack React Application (Firebase + Render) — Complete Deployment Guide (2026)

🏗️ Final Architecture

📋 Prerequisites

🤔 Why Firebase + Render?

🔥 Firebase Hosting

🚀 Render

Step 1 — Prepare Your Backend

Step 2 — Configure Environment Variables

Step 3 — Configure CORS

Step 4 — Push Your Backend to GitHub

Step 5 — Deploy Express Backend to Render

Build Command

Start Command

Root Directory

Environment Variables

Step 6 — Wait for Deployment

Step 7 — Update Frontend API URL

Step 8 — Prepare React for Production

Step 9 — Build React

Step 10 — Deploy to Firebase

Step 11 — Update Backend CORS

Step 12 — Test Everything

💡 Production Tips

🔒 Use HTTPS Everywhere

🔐 Keep Secrets Secure

🔄 Enable Automatic Deployments

❌ Common Deployment Errors

CORS Error

API Not Found

Blank React Screen

Environment Variables Missing

Wrong Build Folder

✅ Deployment Checklist

🎉 Conclusion

🎥 Prefer Watching Instead?

📚 Continue Learning — Complete React E-Commerce Playlist

🚀 Stop Sorting on the Frontend! Implement Server-Side Sorting with Chakra UI Select & React Query

🚀 Server-Side Sorting in React with React Query & Chakra UI

Why Server-Side Sorting?

❌ Frontend Sorting

Problems

✅ Server-Side Sorting

Benefits

Step 1 — Install Dependencies

Step 2 — Create API Function

Step 3 — Create React Query Hook

Step 4 — Create the Sort Dropdown

Step 5 — Convert the Selected Option

Step 6 — Fetch Sorted Products

Step 7 — Render Products

Bonus — Combine Search + Sorting

Complete Flow

Final Thoughts

🎥 Watch the Full Ecommerce Series

🚀 Stop Filtering on the Frontend, Build Server-Side Search in React using React Query For Performance Optimization

Every React Developer Has Done This at Least Once 😅

🚀 The Solution: Server-Side Search

Why Server-Side Search?

❌ Client-Side Search

Problems

✅ Server-Side Search

Benefits

Project Structure

Step 1 — Install React Query

Step 2 — Create the API Function

Step 3 — Create a React Query Hook

Step 4 — Create Search State

Step 5 — Wrap Everything with `RouterProvider`