Gubbala Sai Satish

Title: Senior React & UI Architect

Location: Hyderabad, India

Email: mail@satishg.in

Phone: +91 81794 98995

Summary

Mid-level Frontend Developer with 3 years of experience specializing in React, Next.js, and complex UI architecture. Proven track record of taking product ownership, translating ambiguous requirements into scalable features, and driving architectural decisions. Passionate about Developer Experience (DX), frontend performance optimization, and bridging the gap between design and engineering through proactive POCs.

Professional Experience

React Web Developer at Deloitte USI (July 2023 - Present)

Architected two enterprise micro-frontend applications from scratch to streamline Network Operations (NetworkOps).
Optimized rendering and developed custom caching logic, reducing redundant API calls by 60% and improving core web vitals.
Developed voluntary Proof of Concepts (POCs) for difficult requests and automated multi-app startup workflows, saving 2+ hours/week in setup time.
Built comprehensive QA data-generation tools, enabling improved scenario coverage and application reliability.
Mentored junior developers, driving code reviews and enforcing modern React patterns across the team.

Education

B. Tech from National Institute of Technology, Warangal (2019 - 2023)

Grade Details: CGPA: 7.9

Featured Projects & Architectural Deep-Dives

Poke-Mode (Pokémon Mobile Optimised Dex Entry)

Tagline: Physics-based swipe deck UI for rapid, offline-first cross-game collection queries.

GitHub: https://github.com/09satishgs/project-mode

Live Demo: https://projects.satishg.in/pokemode

Tech Stack: React, TypeScript, Dexie.js, IndexedDB, Vite, Vanilla CSS

Why This Project Exists: For players managing collections across multiple games (Switch games, Pokémon GO, Pokémon HOME), progress tracking is fragmented. Poke-Mode consolidates all of your Pokédexes into a single local database to identify cross-game collection gaps instantly.

Key Features:

Rapid Swiping Interface: Tinder-style swipe gestures and double-click configurations to categorize entries in milliseconds.
Offline-First Caching: Zero network dependencies; Dexie.js transactional updates persist the Pokedex state locally.
Visual Query Builder: Allows users to visually combine session criteria using logic blocks (AND, OR, NOT).
Two-Player Trade Intersection: Intersects one player's 'Can Trade' list with another's 'Want This' list using JSON exports.

Architecture Details:

Separated View-Hook Architecture: Isolates game gesture math and Dexie query engine from rendering logic.
Dexie-backed transactional updates: Batch inserts and indexes 1000+ entries seamlessly to avoid main-thread lockups.
Glassmorphic action buttons that morph dynamically depending on gesture configuration.

Trade-offs & Constraints:

Client-Heavy Processing: Bypasses backend server costs by running all query joins on the client side, requiring modern JS rendering.
Local Storage Limitations: Clearing browser caches can wipe local collections unless users manually export JSON backups.

PoGo-Bonfire (Advanced PWA Directory)

Tagline: Offline-first Pokémon GO friend directory featuring worker-based search and sheet-to-CSV fallback.

GitHub: https://github.com/09satishgs/project-bonfire

Live Demo: https://projects.satishg.in/pogobonfire

Tech Stack: Next.js, TypeScript, Web Workers, IndexedDB, Google Sheets API, Redis

Why This Project Exists: Pokémon GO players add friends from Reddit but have no way to coordinate remote raids or gift timing. PoGo-Bonfire provides a fast, cost-effective directory where users register contact handles without accounts, and search others instantly.

Key Features:

Worker-Powered Text Filtering: Executes complex text searches inside a Web Worker, freeing the main UI thread.
Resilient Read Fallback: Features a 2-second read circuit breaker that automatically routes requests to a jsDelivr CDN-backed CSV file if the Google Sheets API is slow.
Lazy Batching Queue: Buffers user registrations in Redis before bulk-inserting them into Google Sheets to prevent API quota exhaustion.
Local Wishlist Notifications: Matches Trainer Names automatically against the directory during background synchronization.

Architecture Details:

Dual-source database: Google Sheets serves as the free primary persistence, while Upstash Redis manages the atomic batching queue.
Service Worker caching: Caches static assets and metadata for instant, offline-first application boots.

Trade-offs & Constraints:

Delayed Writes: Registration updates appear in the directory in batches every 5-10 minutes instead of real-time to protect API limits.
Google Sheets Limits: Hard caps on sheet cells constrain scale, bypassed by client-side compression filters.

Kana-Kochi (Interactive Learning Platform)

Tagline: Japanese Kana mastery tool featuring interactive drawing stroke tracking and zero-cost Telegram media CMS.

GitHub: https://github.com/09satishgs/kana-kochi

Live Demo: https://projects.satishg.in/kanakochi

Tech Stack: Next.js, React 19, MongoDB, Telegram Bot API, Tailwind CSS, Canvas API

Why This Project Exists: Learning Japanese characters requires a combination of visual, audio, and physical practice. Kana-Kochi moves beyond static flashcards to guide users through stroke order and gamified time-pressure reinforcement.

Key Features:

Stroke Mastery Canvas: An interactive HTML5 Canvas matching mouse, touchpad, and stylus gestures to follow stroke-order guides.
Zero-Cost Media Backend: Leverages the Telegram Client API to host and stream media clips, bypassing storage fees.
Three-Stage Learning Path: Divides scripts into Learn (visual/audio), Practice (muscle memory drawing), and Play (word challenges).
Analytics & Achievements Tracker: Records time spent and streaks locally to foster consistent learning habits.

Architecture Details:

Next.js App Router (React 19 Server Components) for fast initial load.
SpeechSynthesisUtterance engine integration to generate dynamic audio pronunciations without downloading audio files.

Trade-offs & Constraints:

Telegram Storage Reliability: Using Telegram channels for cloud assets is cost-free but introduces third-party dependency.
No multi-device sync: User progress is stored in local storage for simplicity, meaning streaks are isolated to the specific browser.