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
Tag: webapplication
To add a “Scroll to Top” button in a Next.js TypeScript project
To add a “Scroll to Top” button in a Next.js TypeScript project, follow these steps: 1. Create the ScrollToTop component Create a reusable component that: Listens to scroll position Shows a button when scrolled down Scrolls smoothly to top on click components/ScrollToTop.tsx ‘use client’; import { useEffect, useState } from ‘react’; const ScrollToTop = ()… Continue reading To add a “Scroll to Top” button in a Next.js TypeScript project
Proposal for RMA-Based Web Application
The proposed web application will allow customers to easily manage their Return Merchandise Authorization (RMA) claims, track status, and interact with the claims process. Integration with a shopping site and NetSuite RMA flow will streamline the RMA process, making it more efficient for both customers and the administration. 2. Key Features Customer Authentication: Login via… Continue reading Proposal for RMA-Based Web Application
Best and Cost-Effective SMS & OTP Services
Twilio (SMS & OTP) Pricing: Twilio is a leading service provider for SMS and OTP validation. SMS cost: Typically around $0.0075 per SMS for the US, but rates vary based on country and volume. OTP: Twilio also offers two-factor authentication (2FA) services for OTPs with competitive pricing. Pros: Reliable, easy to use, and has extensive… Continue reading Best and Cost-Effective SMS & OTP Services
Item Sync option from Web- App to NEtSuite
Table Creation and raw material information example
Dew Diamonds Web Application Workflow
PD Order Creation & Approval A new PD order is created in the system. The Sales Supervisor reviews and approves the order. Once approved, the order moves to the Sketch Phase. 2. Sketch Creation & Approval Employees (Designers) create the Sketches based on the PD order. Once the sketches are completed, they are submitted for… Continue reading Dew Diamonds Web Application Workflow
Handling Relationships in PostgreSQL in Payload
Payload automatically manages relational data using PostgreSQL under the hood. The relationships will be stored as JSON fields containing references to related documents. const user = await payload.find({ collection: “users”, where: { id: { equals: “USER_ID” }, }, depth: 2, // Fetch nested relationships }); console.log(user); Use depth in API calls to fetch nested relational… Continue reading Handling Relationships in PostgreSQL in Payload
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
Optimizing Performance with useMemo in React
React’s useMemo hook is a powerful tool for optimizing performance by memoizing the results of expensive computations, ensuring they are recalculated only when necessary. How It Works useMemo stores the result of a function and only recomputes it when one of its dependencies changes. This prevents unnecessary recalculations, improving performance in cases where the computation… Continue reading Optimizing Performance with useMemo in React