Glossary S–Z

Technical terms from S to Z — plain English, Excel analogies, and practical context for CA/finance professionals learning to build web apps.

Plain English: The structure of a database — the list of tables, their columns, the data type of each column, and the relationships between tables. The schema is the blueprint; the data is what fills it.

Excel equivalent: The header row of each sheet, the column validation rules, and the relationship structure between sheets. If Sheet 1 "Clients" has columns ID, Name, City and Sheet 2 "Invoices" has a "Client_ID" column linking back to Sheet 1 — that structure is the schema. The actual client names and invoice amounts are the data.

In Excel terms: The header row and validation rules across all your sheets — the structure that defines what data can go where. The data fills it in; the schema defines the container.

In practice: Before writing a single line of React code, we design the database schema. What tables do we need? What columns does each table have? How do tables relate to each other? For EduTrack, the schema includes tables for branches, students, teachers, classes, attendance, fee_records — each with specific columns and relationships. A well-designed schema makes everything else easier. A poorly designed schema causes pain throughout the project.

As a CA, thinking through the schema first is the equivalent of designing the chart of accounts before entering any transactions. The structure determines what you can and cannot report on later.

Don't confuse with: Data. The schema is the structure; the data is the content. An empty spreadsheet with properly labeled columns is a schema. The numbers filled into those columns are data.

SDK

Plain English: Software Development Kit. A collection of pre-built tools, libraries, and documentation provided by a service so you can integrate with them more easily.

Excel equivalent: The full suite of add-ins, templates, and VBA object model references that Microsoft provides to build Excel-based solutions. Instead of building everything from scratch, you use Microsoft's tools to interact with Excel programmatically.

In Excel terms: The VBA object model that Microsoft provides — a complete toolkit for working with Excel programmatically, so you do not have to reverse-engineer how it works internally.

In practice: @supabase/supabase-js is Supabase's JavaScript SDK. Instead of manually writing HTTP requests to Supabase's API, the SDK provides clean functions. Stripe, Razorpay, and Google Maps all have SDKs. We use these instead of building our own integrations.

Server

Plain English: A computer (usually running 24/7 in a data center somewhere) that runs software and responds to requests from other computers. When you visit a website, a server sends you the webpage.

Excel equivalent: The shared network drive in a CA firm. Your own laptop holds local files. The network drive holds files that everyone can access anytime, from any authorized device. A server is that shared resource, but for software and data rather than files.

In Excel terms: The shared network drive — always on, accessible to anyone with permission, holds the files (or in this case, runs the software) that everyone depends on.

In practice: Supabase runs servers that hold your database and run Edge Functions. Vercel runs servers that host your built React app and serve it to users worldwide. You do not manage these servers directly — that is the point of managed cloud services. The servers are always running, automatically scaled, and maintained by professionals.

Don't confuse with: Backend. The backend is the software layer. The server is the hardware (or virtualized hardware) that runs it. In modern cloud development, the distinction rarely matters day-to-day — "something went wrong on the server" is just as valid a statement as "something went wrong in the backend."

Session

Plain English: A period of time during which a user is authenticated and active. A session begins when a user logs in and ends when they log out or the session expires.

Excel equivalent: Being logged into a multi-user system with a timeout. Your session at a client's tax portal starts when you enter credentials and ends when you click logout or after 30 minutes of inactivity. The system remembers you are "you" throughout the session.

In Excel terms: Your logged-in window at a client's online tax portal — it remembers who you are throughout your work period, then expires after inactivity or when you log out.

In practice: Supabase creates a session when a user logs in. The session includes a token that proves the user's identity. Every request to the database includes this token — that is how RLS knows which user is asking and enforces the appropriate security rules. Sessions persist across browser refreshes (Supabase stores them in the browser's local storage). When a session expires, the user must log in again.

Don't confuse with: A user account. The account exists permanently. The session is temporary — it is the authenticated period of use. You have one account; you might have many sessions across different devices and times.

SDK

See the SDK entry above.

Soft Delete

Plain English: Instead of permanently removing a record from the database, marking it as deleted (with a timestamp) while keeping the data intact. The record appears deleted to users but can be recovered if needed.

Excel equivalent: Hiding a row instead of deleting it. The data is still there — you can unhide the row and recover it. Soft delete is the disciplined, automated version of this: every "delete" operation sets deleted_at = now() and every query filters to show only rows where deleted_at IS NULL.

In Excel terms: Hiding a row instead of deleting it. The data persists and can be unhidden. Soft delete is this same discipline applied automatically by the database — no one can accidentally delete permanently without a deliberate second step.

In practice: We never hard-delete user-generated content. When a candidate deletes their account, we set deleted_at = now() on their profile. They cannot log in, cannot be found by recruiters, effectively "do not exist" — but their data persists. If they come back six months later, the account can be restored. If there is a legal dispute, we have the data. This is standard practice in any serious application.

Don't confuse with: Archive. Archiving implies moving data to a separate location (like moving old invoices to an archive folder). Soft delete keeps data in place — just marked as inactive.

Staging

Plain English: A non-production environment that mirrors the live product as closely as possible. A safe place to test changes before they reach real users.

Excel equivalent: The "internal review" copy of an audit report — the version that goes through internal review and partner sign-off before it is sent to the client. It looks exactly like the final version, but has not yet been released to the outside world.

In Excel terms: The internal review draft — functionally identical to the final report, but it has not been sent to the client yet. The partner reviews and approves before it goes live.

In practice: Every project has at least two environments: staging (deployed from the develop branch, visible only to the team) and production (deployed from the main branch, visible to real users). New features land in staging first. Subhash reviews them there. Only after approval does code merge to main and go to production. Staging has its own Supabase instance so testing does not pollute production data.

Don't confuse with: Development (local). Staging is on a real server but not live to users. Development is on your laptop and not accessible to anyone else.

State

Plain English: Data that can change over time within a React component, and which triggers the screen to re-render when it changes. A component's memory.

Excel equivalent: A cell whose value changes based on user input, and whose change automatically updates all dependent formulas. Cell B1 contains a date. Change B1 and five pivot tables refresh instantly. State in React works the same way — change the state value, and every part of the screen that depends on it updates automatically.

In Excel terms: A named cell that drives other formulas. Change the value in B1 and five pivot tables update instantly. State in React is that same reactive update — change state, and everything that depends on it re-renders automatically.

In practice: useState is the most commonly used React hook. A search bar component uses state to track what the user has typed. A filter panel uses state to track which filters are active. A form uses state to track every field's current value. When state changes, React re-renders the component with the new values.

Don't confuse with: Props (inputs from parent) or database data (fetched from Supabase). State is the component's own internal, temporary memory — not permanent storage, not external input.

Supabase

Plain English: An open-source Backend-as-a-Service platform. It provides a hosted PostgreSQL database, authentication system, file storage, real-time subscriptions, and serverless edge functions — all through a clean API and dashboard.

Excel equivalent: Imagine if Microsoft built a single service that gave you: a multi-user database (instead of Excel), user login management, file storage, automatic email notifications, and real-time collaboration — all configured through a web dashboard without any server setup. That is Supabase.

In Excel terms: If Microsoft built a single platform giving you a multi-user database, user login management, file storage, and serverless macros — all through a web dashboard with no server to manage. That is Supabase.

In practice: Supabase is the backbone of every project in this program. The database stores all data. Auth handles login. Storage holds uploaded files (resumes, profile photos). Edge Functions run server-side logic (emails, payment verification). The Supabase dashboard at app.supabase.com is where you see your data, write SQL, manage users, and monitor your app.

Don't confuse with: Firebase (Google's similar product). Supabase is an alternative to Firebase that uses a relational database (PostgreSQL) instead of a document store, and is fully open-source. We chose Supabase because the relational model (tables + relationships) maps more naturally to how CAs already think about data.

Reflect — The terms in this section (Schema, Soft Delete, State, Supabase) form the core of how we structure and protect data in every project. Which of these was most surprising compared to what you assumed before reading it?

T

Tailwind CSS

Plain English: A CSS framework that provides thousands of small, single-purpose utility classes. Instead of writing custom CSS rules, you apply pre-built classes directly in your HTML/JSX to style elements.

Excel equivalent: Using built-in Excel cell styles ("Heading 1", "Input Cell", "Warning Text") instead of manually formatting every cell. The styles are pre-defined and consistent. You apply them, not build them. Tailwind is this concept taken to its logical extreme — a class for every possible styling decision.

In Excel terms: Using built-in cell styles ("Heading 1", "Input Cell", "Warning Text") instead of manually setting font, fill, and border on every cell. Apply a class name and the styling is done.

In practice: className="flex items-center gap-4 rounded-lg bg-white p-6 shadow-md" produces a flexbox container, vertically centered, 16px gap between children, rounded corners, white background, 24px padding, and a medium shadow. No custom CSS file. No class naming decisions. Just descriptive utility classes composed together.

Don't confuse with: shadcn/ui (a component library built with Tailwind). Tailwind provides the raw styling utilities. shadcn/ui provides pre-built, styled components (Button, Card, Dialog, Input) built using those Tailwind utilities. We use both together.

Token

Plain English: A small piece of data that proves identity or grants access. In authentication, a token is a cryptographically signed string that tells the server "this request comes from user X who was authenticated at time Y."

Excel equivalent: A temporary access code printed on a physical token device that CA practitioners use for MCA portal login. It is valid for 30 seconds, proves you are the authorized user, and cannot be reused once it expires.

In Excel terms: The physical token device you use for the MCA portal — valid for 30 seconds, proves you are the authorized user, cannot be reused. Authentication tokens work the same way, but digitally.

In practice: When a user logs in, Supabase generates a JWT (JSON Web Token) — a long encoded string. This token is stored in the browser and attached to every Supabase request. The database reads the token, verifies it is valid (not expired, not tampered with), extracts the user's ID, and applies RLS based on that ID. You do not write token handling code — Supabase's SDK handles it automatically.

Don't confuse with: Password. A password is something you know and use to authenticate. A token is what you receive after authenticating — it proves you already authenticated successfully. The password is the key; the token is the visitor badge that proves you showed the key.

TypeScript

Plain English: A superset of JavaScript that adds a type system — you declare what type of data each variable, function parameter, and return value should be, and TypeScript catches mismatches before the code runs.

Excel equivalent: Column data validation rules. You set a rule: "This column must contain numbers between 0 and 100." If someone types "abc" in that column, Excel flags it immediately. TypeScript does this for your entire codebase — if a function expects a number and you pass a string, TypeScript flags it at write-time, before any user is affected.

In Excel terms: Column data validation rules across your entire codebase. If a function expects a number and you pass text, TypeScript flags it immediately at write-time — before it reaches any user.

In practice: Without TypeScript: you might write user.nme (typo for name) and only discover the bug when a user sees a broken screen. With TypeScript: the editor underlines nme immediately and tells you "Property 'nme' does not exist on type 'User'. Did you mean 'name'?" Every project in this program uses TypeScript in strict mode. It feels restrictive at first and saves enormous debugging time later.

Don't confuse with: JavaScript. TypeScript is compiled to JavaScript before running. The browser never sees TypeScript. It is a development-time safety tool that disappears at runtime.

U

UI (User Interface)

Plain English: Everything a user can see and interact with in a software application — screens, buttons, forms, menus, icons, colors, typography.

Excel equivalent: The formatted reporting sheet — pivot charts, slicers, formatted tables, color-coded cells, dropdown menus. Everything the partner or client sees and clicks on.

In Excel terms: The "Dashboard" tab the partner sees — formatted, interactive, visually clear. Everything that is presentation rather than raw data is UI.

In practice: When you build a React application, you are building the UI. A good UI is not just visually attractive — it is intuitive, responsive (works on all screen sizes), accessible (usable with assistive technology), and consistent (every button looks like a button, every form works the same way).

Don't confuse with: UX. UI is what something looks like. UX is how it feels to use. A UI can be beautiful but have terrible UX (confusing navigation, unclear error messages, tasks that require too many steps). Aiming for good UX means designing for the user's mental model and workflow, not just aesthetics.

UX (User Experience)

Plain English: The overall experience of using a product — how easy it is to accomplish tasks, how clear the feedback is, how much cognitive effort is required, whether users feel confident and in control.

Excel equivalent: The difference between a well-designed audit workbook (clear tabs, consistent formatting, obvious navigation, helpful comments in cells) and a chaotic one (random tab names, inconsistent formatting, formulas with no documentation). Same data, same Excel — very different experience of using it.

In Excel terms: A well-organized audit workbook vs a chaotic one. Same data, same Excel version — the UX difference is entirely in how it was designed for the person using it.

In practice: UX decisions include: How many steps does it take to book a service? What does the user see when a payment fails? Does the form tell you specifically which field has an error? Is the cancel button clearly distinct from the confirm button? These are not visual design questions — they are experience design questions. Good UX is invisible; bad UX is constantly frustrating.

Reflect — Think about a government tax portal or MCA filing tool you have used. What made it frustrating? Those specific pain points — confusing labels, unclear errors, too many steps — are UX failures you will consciously avoid when designing your own portals.

V

Variable

Plain English: A named container that holds a value. You give it a name, assign a value to it, and can use and change that value throughout your code.

Excel equivalent: A named range in Excel — a cell or range you have given a meaningful name like GST_RATE or FY_START_DATE. Instead of referencing $B$5 everywhere, you write GST_RATE. Change the value once; it updates everywhere it is referenced.

In Excel terms: A named range like GST_RATE or FY_START_DATE. Readable, maintainable, and when you change it once, every formula using that name updates automatically.

In practice: In JavaScript/TypeScript, candidateCount, feePerCandidate, and totalRevenue are all variables. Use const for values that will not change, let for values that might. Never use var — it is outdated and causes subtle bugs.

Don't confuse with: State. In React, state is a special kind of variable managed by the useState hook — when it changes, the component re-renders. A regular variable changing does not trigger a re-render. The distinction matters enormously when building UIs.

Vercel

Plain English: A cloud platform for deploying and hosting frontend web applications. Connect your GitHub repository and Vercel automatically deploys every push to main — with zero server configuration required.

Excel equivalent: A publishing service that automatically takes your finalized Excel report, converts it to PDF, and publishes it to the client portal every time you save a new version. You focus on the content; the publishing is automatic.

In Excel terms: An auto-publishing service that takes your updated workbook and publishes the PDF to the client portal the moment you save — no manual steps, no waiting. You push code; Vercel publishes within 60 seconds.

In practice: Every web project in this program deploys to Vercel. You create a Vercel account, connect your GitHub repository, and configure environment variables once. From then on: push code to the main branch, Vercel builds it, Vercel deploys it, your changes are live within 60 seconds. Vercel also provides preview deployments — every pull request gets its own temporary URL so you can review changes before merging.

W

Webhook

Plain English: A mechanism where one service automatically notifies another service when something happens, by sending an HTTP request to a pre-configured URL.

Excel equivalent: Setting up an email alert in Excel: "When cell B1 exceeds 100,000, send an email to the partner." The partner does not have to keep checking the value — Excel notifies them automatically. A webhook works the same way between software services.

In Excel terms: An automated email alert rule — "when this condition is met, notify someone without them having to check." Webhooks are that same automatic notification, but between two software systems instead of Excel and a human.

In practice: When a payment is completed through Razorpay, Razorpay sends a webhook to your Edge Function: "Payment INV2025-042 just succeeded." Your Edge Function receives this, verifies it is genuine, and marks the fee record as paid in your database. Without webhooks, you would have to constantly poll Razorpay's API asking "did a payment happen yet?" — inefficient and unreliable.

Don't confuse with: API calls. An API call is you asking a service for information (outbound, you initiate). A webhook is a service telling you something happened (inbound, they initiate). One is a question; the other is a notification.

Z

Zod

Plain English: A TypeScript library for defining the exact shape and rules that data must follow, and for validating that real data conforms to those rules. It catches bad data at the boundary — when a form is submitted or when an API response arrives.

Excel equivalent: Data validation rules on a column — "this cell must be a number between 0 and 200", "this cell is required and must be a date", "this dropdown can only contain these specific values". If someone tries to enter invalid data, Excel rejects it. Zod does this for code, at runtime, with detailed error messages.

In Excel terms: Data validation rules on every column — enforced automatically at the point of entry. Zod is those validation rules applied to every form your users submit, with specific error messages pointing to exactly which field failed and why.

In practice: Every form in our projects has a Zod schema that defines the rules. When a user submits the form, Zod validates the data against these rules. If anything fails, Zod returns a detailed error message pointing to exactly which field failed and why. TypeScript also automatically knows the type of validated data — because Zod infers the type from the schema.

As a CA, you know that garbage data in means garbage reports out. Zod is the gatekeeper that enforces clean data at the entry point — before anything reaches the database.

Don't confuse with: TypeScript types. TypeScript type checking happens at compile time (while writing code). Zod validation happens at runtime (when real user data arrives). TypeScript ensures your code is structured correctly. Zod ensures the data users send to your code is valid. Both are necessary.

Reflect — Think about a client form you manage where people regularly submit incorrect data (wrong PAN format, future dates, negative amounts). Zod eliminates that problem at the software layer — the form physically cannot be submitted with invalid data. No more manual data cleaning downstream.

S

Schema