Tag: webapp
Monolith to Microservices: Building an Application
Introduction I built a Formula 1 application to manage Teams, Tracks, Drivers, and Races, starting as a monolithic Next.js + Payload CMS app. As my needs grew, I transitioned to a microservices architecture for better scalability, modularity, and autonomy. This article details my process—folder structure, code changes, challenges, and deployment—using my F1 app as an… Continue reading Monolith to Microservices: Building an Application
API Key Strategy for Authentication
To enable API keys on a collection, set the useAPIKey auth option to true. From there, a new interface will appear in the Admin Panel for each document within the collection that allows you to generate an API key for each user in the Collection. import type { CollectionConfig } from ‘payload’ export const ThirdPartyAccess:… Continue reading API Key Strategy for Authentication
RAM Application Workflow – Web application
Customer Authentication: Login via SO Number/Contact Number: The customer will be able to log in using their SO number or contact number, synchronised with the shopping site’s/NetSuite database. New Customer Login can be added with a validation concept.(Purchase Bill or Item Serial Number) Seamless User Interface: Simple and intuitive design to ensure ease of… Continue reading RAM Application Workflow – Web application
State Management in Next.js
State management in Next.js determines how data is stored and shared across components. While React provides built-in state handling with useState, larger applications require more scalable solutions like Context API, Redux, or Zustand. Using Context API import { createContext, useState, useContext } from “react”; const AppContext = createContext(); export function AppProvider({ children }) { … Continue reading State Management in Next.js
Workflow for the relations on Postgress DB using Payload
Payload CMS uses a schema-based approach to define relationships in the collections configuration. One to One import { CollectionConfig } from “payload/types”; const Users: CollectionConfig = { slug: “users”, fields: [ { name: “profile”, type: “relationship”, relationTo: “profiles”, // The related collection unique: true, // Ensures one-to-one relationship }, ], }; export default Users; import… Continue reading Workflow for the relations on Postgress DB using Payload
Creating a PostgreSQL database on a server terminal
Access the PostgreSQL Terminal Log in to the PostgreSQL command-line interface using the following command: sudo -u postgres psql This assumes you’re logged in as a user with sudo privileges and postgres is the PostgreSQL administrative user. Create a Database In the psql terminal, run: CREATE DATABASE database_name; Verify the Database Creation You can list… Continue reading Creating a PostgreSQL database on a server terminal
Adding Validation Rules in Payload CMS Fields
Introduction Field validation is crucial to ensure data quality and integrity in Payload CMS. By configuring validation rules, you can enforce requirements on fields, such as length, format, and uniqueness. 1. Adding Validation to Fields Each field type in Payload CMS has built-in options for validation. Let’s explore some examples of adding validation rules to… Continue reading Adding Validation Rules in Payload CMS Fields
useId hook in React
React’s useId hook provides a unique, stable ID that is useful for accessibility, form inputs, and ensuring consistency across server-side and client-side renders. It was introduced to help developers avoid manually generating IDs, particularly in dynamic or reusable components. How It Works useId generates a unique ID string that remains stable across the component’s lifecycle.… Continue reading useId hook in React
useCallback hook in React
React’s useCallback hook is designed to optimize performance by memoizing functions, ensuring they are only recreated when their dependencies change. It’s particularly useful in preventing unnecessary re-renders in child components that rely on stable function references. How It Works React creates a new function every time a component re-renders. While this usually isn’t a problem,… Continue reading useCallback hook in React