Payload GraphQL refers to the GraphQL API provided by Payload, a headless CMS and application framework built with TypeScript, Node.js, React, and MongoDB. Unlike traditional CMS platforms, Payload is code-based and developer-centric, offering a powerful backend that can be extended to power various applications. Its GraphQL API is one of three ways (alongside REST and… Continue reading What is Payload GraphQL?
Author: Juby Thomas
Payload 3.0
The much-anticipated Payload 3.0 has officially arrived, marking a significant milestone in the evolution of this powerful headless CMS. This major release brings revolutionary changes that promise to transform how developers build and deploy content-driven applications. However, with great power comes great responsibility – and some important considerations for deployment. The Dawn of a New… Continue reading Payload 3.0
How to Implement Multiple Image Upload Functionality in React/Next.js
Adding multiple image upload functionality to a web application enhances user experience by allowing the association of several images with a single entity—such as a “sketch” in a design app. This guide walks you through implementing this feature in a React/Next.js frontend with a backend that stores images as an array, covering state management, file… Continue reading How to Implement Multiple Image Upload Functionality in React/Next.js
Understanding Tailwind’s Spacing System: Space, X, and Y
Tailwind CSS provides a powerful and flexible spacing system that helps developers control margin, padding, and gaps effortlessly. The spacing utilities in Tailwind are designed to make layout adjustments intuitive and maintainable. Among these, space-x and space-y play a crucial role in managing the spacing between elements. Tailwind uses a predefined spacing scale based on… Continue reading Understanding Tailwind’s Spacing System: Space, X, and Y
Using Slugs in Next.js for Dynamic Routing
Introduction Slugs are user-friendly, URL-safe strings used to identify resources. In Next.js, slugs are commonly used for dynamic routes, such as blog posts, products, or user profiles. This article covers how to implement and use slugs in Next.js. 1. Setting Up a Dynamic Route To create a dynamic route using slugs, create a file inside… Continue reading Using Slugs in Next.js for Dynamic Routing
1. App Router (Next.js 13+) – Using useSearchParams (Client) & searchParams (Server)
Client Component – useSearchParams (next/navigation) “use client”; import { useSearchParams } from “next/navigation”; export default function Page() { const searchParams = useSearchParams(); const name = searchParams.get(“name”); // Get ‘name’ from URL return <div>Hello, {name || “Guest”}!</div>; } Example URL: http://localhost:3000?name=John Output:Hello, John! Server Component – searchParams Prop export default function Page({ searchParams }: { searchParams:… Continue reading 1. App Router (Next.js 13+) – Using useSearchParams (Client) & searchParams (Server)
Implementing Dependent Dropdowns in React with API Filtering
When building forms in React, you might need to create dependent dropdowns, where the options in one dropdown depend on the selection of another. This is commonly used in scenarios like selecting a category and then filtering relevant subcategories. In this article, we’ll cover: How to create a dependent dropdown feature in React. How to… Continue reading Implementing Dependent Dropdowns in React with API Filtering
Handling Nested Arrays and Objects in React: Correcting Data Access in Assembly Items
In React applications, handling API responses with nested arrays and objects can often lead to unintended undefined or null values if not accessed properly. A common issue arises when trying to retrieve properties from a nested structure without checking if intermediate values exist. Understanding the Issue In our case, we are dealing with data coming… Continue reading Handling Nested Arrays and Objects in React: Correcting Data Access in Assembly Items
Fixing TypeScript Error with useState Hook in React
Introduction While working with React and TypeScript, developers often encounter issues when defining state with useState. One such issue arises when trying to initialize a state variable with an array of objects. In this article, we will discuss a common mistake related to state initialization and its solution. The Issue Consider the following piece of… Continue reading Fixing TypeScript Error with useState Hook in React
How to Truncate Text with Ellipsis in Tailwind CSS
How to Truncate Text with Ellipsis in Tailwind CSS Introduction When displaying dynamic content in a table or a list, text can sometimes overflow beyond the available space, making the UI look messy. A common solution is to truncate the text with an ellipsis (…) to ensure a clean and responsive design. In this article,… Continue reading How to Truncate Text with Ellipsis in Tailwind CSS