Key Achievements:

• Architected a scalable distributed backend using Redis Pub/Sub and asynchronous task polling to efficiently orchestrate concurrent processes across multiple services.
• Engineered system resilience and data integrity by implementing rate limiting to prevent API overload, alongside idempotent execution to guarantee data consistency during network retries.
• Architected an orchestration layer and execution harness for autonomous AI coding agents, integrating robust memory management and reliable tool-calling to execute complex, multi-step workflows.
• Developed a secure evaluation environment for AI-generated code, utilizing sandboxed execution to safely test outputs and validate automated interactions with local environments.

• Led end-to-end development of a freelance platform utilizing SvelteKit, demonstrating strong time management and project delivery skills.
• Engineered backend modules for user management; converted complex UI requirements into responsive, high-quality functional code.

Clearing the Internal Hackathon — SPARC (Smart India Hackathon 2025)

Overview

My team and I cleared our college's internal hackathon and earned the right to represent the institute at Smart India Hackathon 2025. We built SPARC — Shared Peer Access Resource Connector, an offline-first digital learning platform for rural school students.

| | | |---|---| | Problem Statement ID | 25019 | | Title | Digital Learning Platform for Rural School Students in Nabha | | Theme | Smart Education | | Category | Software | | Team Name | SPARC | | Team ID | 58600 | | Team Size | 6 |

The Problem We Took On

Students in rural Nabha (Punjab) don't have reliable internet, which cuts them off from the digital learning tools that students elsewhere take for granted. The challenge was framed simply but was hard to solve well: what if every student in a rural classroom could have a personal teaching assistant and a shared, collaborative space — with zero internet?

That constraint — "must work fully offline" — shaped every decision we made and, I think, was the main reason our idea stood out in the internal round.

What We Proposed

SPARC gives each student a personal AI teaching assistant for individual mastery and a connected classroom for collaborative work, all running on a local network without the internet.

Offline Collaborative Classroom

• A central resource hub where teachers share notes, worksheets, and materials, pushed to every student device over a local WLAN.
• A class announcement board and a synchronized activity stream — essentially a social-media-style feed for the classroom, kept in sync locally.

Locally Running SLM (Small Language Model)

• A compact model fine-tuned on the local curriculum, acting as a doubt-clearing assistant with explanations, practice questions, and feedback.
• Everything runs inside a secure on-device "sandbox," so student data and AI interactions never leave the local school network.

Other features

• Multilingual support (Punjabi, Urdu, Hindi) across the SLM, the UI, and stored data.
• A parents' portal with visual report cards, attendance, and performance analysis.
• Encrypted data sync to the Punjab Education Department when connectivity is available.

The Technical Approach

We deliberately picked a mature, well-documented stack so we could move fast and demo something real:

• Student App (mobile): React Native + SQLite for offline storage.
• Teacher App (desktop): Electron + React.
• On-device AI: Python, TensorFlow, and TensorFlow Lite — the model optimized with 8-bit quantization, pruning, and knowledge distillation into a .tflite file for low-latency inference on cheap phones.
• Local backend: FastAPI + PostgreSQL, handling encryption, chunked sync, and backup.

We laid out a four-phase plan — Setup → Core Features → Testing → Deployment — which made the project feel executable rather than just a pitch.

What Clearing the Internal Round Actually Taught Me

• The constraint was the idea. Plenty of teams pitched learning apps. Ours won attention because we took the "offline" requirement literally and designed the whole architecture around it instead of treating it as a footnote.
• A convincing story beats a long feature list. Opening with the "zero internet" question gave the judges a clear picture of the problem before we showed a single technology choice.
• Justify every tech decision. For each tool we wrote down a Why? and a What it does?. Being able to defend the stack — rather than just name-drop it — made the feasibility section credible.
• Name the risks yourself. We called out the hard parts (AI model optimization, stable collaborative connectivity, user adoption, legacy software) and paired each with a strategy. Owning the weaknesses was more persuasive than pretending there weren't any.
• Divide the work by strength. With a clear split — mobile, desktop/frontend, two AI/ML, backend, and a full-stack lead on architecture — everyone knew their lane, which showed in how coherent the final submission felt.
• Differentiate against what exists. We studied Kolibri and articulated exactly how SPARC differs: two-way collaboration and a local AI model, not just one-way content distribution.

Outcome

We cleared the internal hackathon and advanced as the institute's representative to Smart India Hackathon 2025 under problem statement 25019. Beyond the result, it was my first time taking a hard real-world constraint and shaping an entire system around it — from the AI model down to the sync strategy — and defending those choices in front of a panel.

Empowering Women Through AI: Building a Legal & Financial Advisor

Access to clear, actionable legal advice is still a major hurdle for a lot of people. Legal documents, statutory frameworks, and rights-related literature are often written in heavy jargon that is nearly impossible to parse if you don't have a background in law. For women navigating questions around workplace rights, property ownership, domestic safety, or financial independence, this barrier can feel even higher.

To help bridge this gap, I built Legal Advisor Chatbot—a targeted conversational platform designed to give women direct, easy-to-understand insights into their legal rights and key financial concepts.

The Problem

When someone faces a legal or financial issue, getting reliable answers quickly usually comes with two main challenges:

1. High Cost & Friction: Professional consultation isn't always immediately accessible or affordable.
2. Dense Terminology: Raw legal statutes and financial terms are rarely written for everyday comprehension.

Standard chatbots can give general summaries, but they frequently miss domain-specific grounding. The main goal of this project was to take complex legal framework information and break it down into clean, empathetic, and easily digestable advice.

Tech Stack & Architecture

The project relies on a full-stack architecture built to keep response times fast while managing conversational state smoothly.

• Frontend: Built with React. It handles the interactive chat flow, message state management, and real-time streaming updates.
• Backend: Powered by a lightweight API service to bridge client interactions with the intelligence layer.
• AI & Knowledge Pipeline: Uses retrieval workflows (via LangChain / RAG patterns) grounded on legal documentation and financial resources to keep answers focused and accurate.

Deep Dive: Mastering Modern React & Redux — A 75.5-Hour Engineering Journey

• Published: June 13, 2025
• Category: Web Development / Learning Log
• Read Time: ~8 min read
• Topics: React, Redux Toolkit, RTK Query, JavaScript (ES6+), Tailwind CSS, Custom Hooks

Over the past few months, I dedicated 75.5 hours of focused study and hands-on coding to complete Stephen Grider and Sanjay Azhagan’s intensive Modern React with Redux course on Udemy.

Rather than just watching lectures passively, I built every project from scratch, refactored state management layers, and dissected how React handles rendering under the hood. Here is a comprehensive technical breakdown of everything I learned, engineered, and mastered during this deep dive.

1. Deconstructing the React Core: Rendering & Mental Models

Mastering React requires moving beyond basic JSX syntax to understand the Virtual DOM, rendering cycles, and state immutability.

The Component Engine & Functional Patterns

• Virtual DOM & Reconciliation: Learned how React compares virtual element trees using the diffing algorithm to minimize actual DOM manipulations, ensuring maximum UI responsiveness.
• Unidirectional Data Flow: Standardized component design around strict top-down data flow via props and bottom-up event notifications via callback triggers.
• Component Composition over Inheritance: Utilized the children prop pattern to build highly configurable structural wrappers, isolating layout logic from domain specific business data.

// Example of clean component composition for reusable panel containers
function Panel({ children, className, ...rest }) {
  const finalClassNames = classNames(
    'border rounded p-3 shadow bg-white w-full',
    className
  );

  return (
    <div {...rest} className={finalClassNames}>
      {children}
    </div>
  );
}

Advanced Hooks & Side-Effect Synchronization

• useState Batching & Functional Updates: Mastered state updater functions (prevCount => prevCount + 1) to eliminate race conditions in rapid asynchronous updates.
• useEffect Lifecycle Discipline: Dissected synchronization cycles, dependency arrays, and essential cleanup functions to prevent memory leaks in websocket connections and event listeners.
• Custom Hooks Extraction: Abstracted stateful UI logic into standalone custom hooks (e.g., useSort, useNavigation, useThunk) to maintain single-responsibility modules across the codebase.
• useRef for Persistent Non-State Data: Leveraged refs for direct DOM element access (focus management, measuring layout coordinates) without triggering unnecessary render passes.

2. Scalable State Architecture: Context API vs. Redux Toolkit

Managing client-side state efficiently is one of the hardest parts of frontend architecture. This course provided a deep contrast between local context providers and global state machines.

       [ Client Request / Event ]
                   │
                   ▼
         [ Dispatch Action ]
                   │
                   ▼
    ┌─────────────────────────────┐
    │     Redux Toolkit Store     │
    │  ┌───────────────────────┐  │
    │  │ Immer Immutable State │  │
    │  └───────────────────────┘  │
    └──────────────┬──────────────┘
                   │
         [ Auto-Trigger Re-render ]
                   │
                   ▼
         [ UI Component View ]

Context API for Feature-Level Isolation

Built custom Context Providers paired with custom hooks to solve "prop-drilling" across deeply nested component trees. Ideal for localized configuration settings, theme switching, or feature-bound application states.

Redux Toolkit (RTK) for Enterprise Global State

When local context causes widespread re-renders, Redux Toolkit becomes essential. I implemented clean state slicers, explicit action dispatches, and normalized store structures:

• Slices & Immutable Operations: Created modular slices using createSlice, leveraging Immer.js behind the scenes to write safe, readable "mutating" syntax that outputs pure immutable state trees.
• Redux Thunks for Async Operations: Managed asynchronous API lifecycles through explicit pending, fulfilled, and rejected action dispatches to handle loading spinners and dynamic fallback states seamlessly.
• RTK Query for Advanced Data Fetching: Shifted from manual fetching to RTK Query's automated caching, request deduplication, optimistic UI updates, and tag-based cache invalidation (providesTags and invalidatesTags).

3. UI Engineering & Reusable Component Systems

A major highlight of this learning log was building a full-featured, zero-dependency UI component library styled with Tailwind CSS.

Component Library Tree
 ├── Accordion (Toggle state & icon animations)
 ├── Dropdown (Custom click-outside listener via useRef)
 ├── Modal Overlay (DOM Portal mounting to document.body)
 └── Sortable Table (Generic column mapping & sorting logic)

Highlights of Components Developed:

• Custom Dropdown with Global Event Listeners: Integrated direct document event bindings inside useEffect with target check validation (ref.current.contains(event.target)) to close dropdown menus when users click outside.
• Accessible Modals using React Portals: Utilized createPortal to mount modal overlays directly to secondary DOM container nodes (document.body), guaranteeing absolute z-index isolation from parent layout bounds.
• Dynamic, Sortable Data Table Engine: Engineered a generic <Table/> engine capable of receiving abstract column configurations and rendering sorted dataset pipelines via custom useSort hooks.

4. Key Projects Built During the Course

To solidify these patterns, I built several end-to-end applications:

1. Unsplash Media Search Engine

• Tech Stack: React, Axios, Tailwind CSS
• Key Feature: Asynchronous media search interface with dynamic input debouncing to prevent API quota throttling during live typing.

2. Tailored UI Component Library

• Tech Stack: React, Tailwind CSS, Custom Hooks, Portals
• Key Feature: Fully accessible design system with custom accordions, modals, panels, buttons, and sortable dynamic tables.

3. Enterprise Photo & User Management Platform

• Tech Stack: React, Redux Toolkit, RTK Query, Json-Server
• Key Feature: Full CRUD application utilizing RTK Query endpoints for real-time user creation, album management, and lazy-loaded image generation with instant tag-based cache invalidation.

5. Course Completion & Certification Metadata

Here are the official verification credentials for this milestone:

• Course Title: Modern React with Redux [2024 Update]
• Instructors: Stephen Grider, Sanjay Azhagan
• Total Duration: 75.5 Hours
• Completion Date: June 13, 2025
• Credential ID: UC-fc37bfa8-8543-4c27-b989-a78beadd595d
• Verification Link: Verify Certificate on Udemy

Reflections & Next Steps

Investing 75+ hours into this course significantly elevated my frontend development proficiency. Moving from basic component structures to architecting complex state flows with Redux Toolkit and RTK Query has prepared me to tackle enterprise-scale web applications.

Next up, I will be combining these advanced React state management techniques with Next.js for server-side rendering and extending these frontend architectures into full-stack and Web3 user interfaces!