# Ajith Deevannagari > Senior Frontend Developer in Hyderabad, Telangana, India. Senior Frontend Engineer with 5+ years building web applications in React, Next.js and TypeScript. I architect component libraries used across products, ship multi-tenant AI platforms and embeddable widgets, and cut load times by 30% through profiling, not guesswork. Site: https://www.deeajith.in Email: ajith.d19@gmail.com X: https://x.com/dee_ajith LinkedIn: https://linkedin.com/in/deeajith GitHub: https://github.com/deeajith Last updated: 2026-11-07 ## Frequently asked questions ### Who is Ajith Deevannagari? Ajith Deevannagari is a Senior Frontend Developer based in Hyderabad, India, with 5+ years of experience in React, Next.js and TypeScript. He leads frontend architecture at 4Monks Consulting LLP and builds AI products, embeddable widgets and developer tools. ### What does Ajith Deevannagari build? He builds three products: fouc.app (fouc.hackersdaddy.com), a Chrome extension that measures, inspects and live-edits any web page; Resume Studio (resumestudio.hackersdaddy.com), an AI resume builder on TanStack Start and React 19; and Sayo (sayo.projects.coblip.com), a multi-tenant RAG chatbot with an embeddable chat widget, built solo as the only developer at 4Monks Consulting. He has also shipped e-commerce storefronts in Next.js and Magento. ### What is fouc.app? fouc.app is a Chrome Manifest V3 extension by Ajith Deevannagari for design QA. It measures and inspects elements, edits CSS live, checks colour contrast, audits privacy and DPDPA readiness, and exposes the page to coding agents over MCP. It is coming soon to the Chrome Web Store. ### What is Resume Studio? Resume Studio is an AI resume builder with a drag-and-drop editor, PDF export and paid plans (Day Pass and Pro). It uses TanStack Start, React 19, Better Auth, Razorpay and an AI writing assistant, and is designed to deploy as a single container. ### What is Sayo? Sayo (sayo.projects.coblip.com) is a multi-tenant RAG chatbot that lets a business put an AI assistant on its own website. Each tenant has its own knowledge base, answers come from retrieval-augmented generation, and the chat is delivered as an embeddable widget in Shadow DOM with origin-restricted API keys. Ajith built it solo as the only developer at 4Monks Consulting, covering architecture, frontend, backend APIs and deployment. ### How does Ajith Deevannagari use AI in his development process? He works AI-first: he writes a clear spec and plan, lets AI agents draft code and tests in the repository, then reviews every diff and verifies it with Playwright, Lighthouse and evaluation sets before shipping through CI/CD. He also builds AI products themselves, including retrieval-augmented generation (RAG) systems. ### What technologies does Ajith Deevannagari work with? React, Next.js (App Router), TanStack Start, TypeScript, Vue.js, Tailwind CSS, Redux, GraphQL, REST, Node.js, FastAPI, PostgreSQL, Redis, Playwright, Cypress, Jest and Docker. ### What results has he delivered? He improved page load by 30% and response time by 40% through profiling with Chrome DevTools and Lighthouse, and grew organic traffic by 25% through SEO work. He won the Frontend Innovator Award (2024) and The Steady Hand Award for frontend excellence (August 2026). ### Where is Ajith Deevannagari based and how can I contact him? He is based in Hyderabad, Telangana, India. Email ajith.d19@gmail.com, or message @dee_ajith on X (x.com/dee_ajith) or on LinkedIn (linkedin.com/in/deeajith). ## Experience ### Senior Frontend Developer, 4Monks Consulting LLP (May 2024 – Present, Bengaluru (Remote)) - Lead frontend architecture for enterprise web apps in React, Next.js (App Router) and TypeScript, with component libraries adopted across multiple products. - Delivered Origin Fresh (Next.js SSR e-commerce), Lexus India, Ather Energy and Mankind Pharma on REST and GraphQL APIs. - Cut load times by 30% and grew traffic by 25% through SEO and scalable features. - Own UI end to end: state (Redux, Context), SCSS theming, integration with Python/FastAPI and PostgreSQL services, XSS prevention, JWT auth and WCAG. ### Frontend Engineer, Allure Commerce (Sep 2022 – May 2024, Goa (Remote)) - Built Progressive Web Apps in React on a Magento backend; improved page load by 30% and response time by 40% by profiling in Chrome DevTools and Lighthouse. - Kept multi-brand storefronts consistent with SCSS mixins and component theming, and WCAG compliant. ### Product Developer, QA Touch (by DCKAP) (Jul 2022 – Sep 2022, Chennai (Remote)) - Built and improved the UI architecture of a test-management SaaS, test first, lifting workflow efficiency by 25%. ### Frontend Developer, DCKAP (Nov 2020 – Jul 2022, Chennai (Remote)) - Built Magento eCommerce frontends and interactive product customization modules in JavaScript; managed static sites on AWS S3. ## Skills - Frontend: React 19, Next.js (App Router), TanStack Start, Vue.js, TypeScript, Tailwind CSS, Redux, SCSS, WCAG accessibility - APIs & Data: REST, GraphQL (Apollo), WebSockets, PostgreSQL, Redis, AWS S3 - Backend: Node.js, Express, FastAPI, Django, Microservices - Quality: Playwright, Cypress, Jest, React Testing Library, Lighthouse, Chrome DevTools - Tooling: Git, Docker, CI/CD, Webpack, Vite, Linux ## Awards - The Steady Hand Award (FE Excellence) (Aug 2026): For consistent delivery across Lexus India, EdgeVerve, Mankind Pharma, Portl and Ather Energy, and for starting internal product work including a RAG-AI bot prototype. - Frontend Innovator Award (2024): For a UI development workflow that delivered latency-free components without external libraries, shown on the originfresh.in storefront. ## Education - B.Tech, Geethanjali College of Engineering & Technology (2020) - Diploma, Anurag College of Engineering (2017) ## Projects - fouc.app [soon]: Chrome extension that measures, inspects and live-edits any web page: design QA, privacy audit and an MCP bridge for coding agents. Stack: Chrome MV3, Developer tools, MCP. https://www.deeajith.in/work/fouc-app-web-inspector/ - Resume Studio [building]: AI resume builder with a drag-and-drop editor, PDF export, and Razorpay-backed plans. TanStack Start, React 19, single-container deploy. Stack: TanStack Start, React 19, AI. https://www.deeajith.in/work/resume-studio-ai-resume-builder/ - Sayo [live]: Multi-tenant RAG chatbot for any website: per-tenant knowledge base, an embeddable chat widget and retrieval evals. Built solo as the only developer at work. Stack: Next.js 16, FastAPI, RAG. https://www.deeajith.in/work/sayo-multi-tenant-rag-ai-chatbot/ - Origin Fresh [live]: Next.js SSR e-commerce storefront for fresh produce, built with a latency-free component workflow. Stack: Next.js, E-commerce, SSR. https://develop-origin.vercel.app/ - RigidHitch [live]: Magento storefront for towing products, tuned for performance and a complex catalog. Stack: Magento, Frontend. https://www.rigidhitch.com/ - HabitHairX [live]: Premium Magento shopping experience for the hair industry. Stack: Magento, Frontend. https://habithairx.com/ - ZenLU [live]: Minimal Next.js web app focused on performance. Stack: Next.js, Frontend. https://zenlu.vercel.app/ - YogaAcharya [live]: Yoga learning PWA built in React. Stack: React, PWA. https://yoga.deeajith.in - Hackers Daddy [live]: Cybersecurity blog and learning hub for ethical hackers. Stack: Frontend, LMS. http://www.hackersdaddy.com/ - i3DE [live]: Interactive 3D environment for immersive online experiences. Stack: 3D, Three.js. http://deeajith.github.io/miniInteractive/ ## Case studies ### fouc.app: a Chrome extension to measure, inspect and live-edit any web page URL: https://www.deeajith.in/work/fouc-app-web-inspector/ Role: Designer and sole developer. Stack: Chrome MV3, Vanilla JS, Node.js, Hono, SQLite, MCP. Status: Coming soon to the Chrome Web Store. ## The problem Design QA is a loop of small checks: is this 16px or 15px, does this grey pass AA, which tracker fired before consent, does it break at 390px wide. DevTools answers each one, but never in the shape a designer or a reviewer thinks in. And once you find the fix, you still have to carry it back into the codebase by hand. ## What fouc.app is fouc.app is one dock you can place on any edge of any page. It is built from scratch for Chrome Manifest V3 with no framework in the page, so it never fights the site it sits on. - **Inspect and measure.** Hover for size, type, colour and contrast. Hold ⌥ to measure the distance between elements. Layout overlays show flex direction, grid tracks and the constraint lines of absolutely positioned elements. - **Edit like a design tool.** A Design tab with auto-layout, fill, stroke and type controls, plus a live box model you can drag to scrub. Every change is tracked, undoable and exportable as a CSS diff. - **Colour.** A loupe picker, HEX/RGB/HSL/OKLCH, and a contrast checker that suggests the nearest passing colour for AA or AAA. - **Privacy and compliance.** Network requests grouped by tracker category, trackers that fired before the first interaction, cookies, consent platform detection, banner Reject-button parity, and a DPDPA readiness scan. These are heuristic checks, not legal advice. - **Test.** Record a flow and export Playwright, Cypress or Puppeteer. ## The agent bridge The part I like most: a small local server (Node, Hono) exposes the live page to coding agents over **MCP**. An agent can call `get_selection`, `get_styles`, `apply_css` or `get_changes`, so the loop becomes *tweak in the browser, queue for the agent, the agent ports the CSS diff into the repo*. API keys stay on the local server and never enter the browser, and it answers only `chrome-extension://` origins. ## A design language of its own Because fouc.app sits on top of someone else's page it needs a voice that cannot be confused with the page. I drew it as a node lattice: hairlines, square nodes where lines meet, ruled cells and leader lines that join every callout to its subject. Numbers are tabular monospace and every number is copyable. ## Engineering decisions - **Isolation first.** All UI lives in its own root so host-page CSS cannot leak in and fouc.app's cannot leak out. - **Local by default.** Nothing leaves the machine unless you connect a service; there is a public privacy policy and a store listing written to match. - **Optional collaboration.** A SQLite-backed server adds live cursors anchored to elements, comment threads and "send to agent" hotspots. ## Status fouc.app is built and will be released on the Chrome Web Store soon. Follow [@dee_ajith on X](https://x.com/dee_ajith) for the launch. --- ### Resume Studio: building an AI resume builder on TanStack Start URL: https://www.deeajith.in/work/resume-studio-ai-resume-builder/ Role: Product, design and full-stack development. Stack: TanStack Start, React 19, Vite, Nitro, SQLite, Drizzle ORM, Better Auth, Razorpay, OpenRouter. Status: In development. ## The goal A resume builder people can actually finish: write with help from an AI assistant, arrange sections by drag and drop, see the real PDF, and pay only when they need to (a Day Pass or a Pro monthly plan). ## Stack and why | Concern | Choice | Reason | |---|---|---| | App | TanStack Start (React 19, Vite, Nitro) | Type-safe file routing, server functions, one deployable | | Data | SQLite + Drizzle ORM | Resumes are small documents; one file, auto-migrated on boot | | Auth | Better Auth | Email plus optional Google OAuth, short-lived tokens, session rotation | | AI | TanStack AI via OpenRouter | The writing assistant, swappable models | | PDF | @react-pdf/renderer | The editor and the export share one layout engine | | Payments | Razorpay | Day Pass and subscription, with server-side webhook handling | | Email | Resend / SMTP | Verification and password reset | ## Decisions worth writing down **The server is the source of truth.** Resumes and their version history live in SQLite; the browser only keeps caches (thumbnails in IndexedDB) and preferences. Version history is a Pro feature, enforced on the server, not just hidden in the UI. **Graceful degradation.** The app runs with no keys at all. If an API key is missing, that feature turns itself off: AI, email, Google sign-in and checkout. That makes local setup trivial and avoids half-broken production states. **One container on purpose.** SQLite is single-writer and the rate limiter is in memory, so the app is designed as a single replica. That is a deliberate trade for simplicity and cost, documented rather than hidden. **Privacy-aware analytics.** GTM and UTM capture only run after the cookie banner is accepted. Purchases are also sent server-side to GA4, once per payment. **SEO as a feature.** Public guide pages are generated from a typed config, with sitemap, robots and JSON-LD built in, so the product can earn its own search traffic. ## Plan limits Free, Day Pass and Pro limits (daily AI writes, number of resumes) are environment-driven, so pricing experiments need no code change. ## What I learned Keeping the editor, preview and export on one rendering model removes a whole class of "it looked different in the PDF" bugs. And designing degraded modes first makes everything else easier to test. --- ### Sayo: a multi-tenant RAG AI chatbot for any website, built solo URL: https://www.deeajith.in/work/sayo-multi-tenant-rag-ai-chatbot/ Role: Solo developer at 4Monks Consulting: architecture, frontend, backend APIs, deployment and support. Stack: Next.js 16, React 19, TypeScript, Postgres + pgvector, Redis, Vite, Shadow DOM, MCP. Status: Live at sayo.projects.coblip.com. ## The product Sayo is a SaaS chatbot that lets a business put an AI assistant on its own website. It is live at [sayo.projects.coblip.com](https://sayo.projects.coblip.com/). The assistant answers from that business's knowledge (crawled pages, PDFs, documents, product feeds), shows rich answers such as comparisons and calculators instead of only text, and hands qualified leads to the team. I built it solo as the only developer at my workplace, 4Monks Consulting, and owned it end to end: architecture, UI, APIs, deployment and production support. ## Three hard problems ### 1. Tenant isolation Every table carries an organisation id and every query filters by it. Isolation is a rule enforced in one data layer, not a habit developers must remember per endpoint. Roles split site owners from the platform operator. ### 2. Shipping UI into someone else's site The chat widget is a separate Vite build loaded by a single script tag and mounted in **Shadow DOM**, so the host site's CSS cannot break it and it cannot break the host. It talks to a public API with **origin-restricted API keys**, so a leaked key is useless on another domain. Embedding needs no full-page reload and no framework on the host. ### 3. Frontends that teams ship independently Each tenant surface is a loosely coupled package shared via npm that can be versioned, tested and deployed on its own, a micro-frontend pattern that removed a lot of cross-team coordination. ## The answer pipeline Ingestion runs as background jobs (one job per page or file): fetch, clean, chunk, embed, store in Postgres with pgvector. A visitor message becomes a retrieval query, the best chunks are ranked, and the model replies with a typed block (text, comparison, finance calculator, booking) that the widget renders. Caches in Redis keep common paths fast, and a worker process handles everything slow or scheduled so chat latency stays low. ## Measuring quality Retrieval quality is benchmarked with Ragas-style evaluation tooling, treated like an automated test suite: a fixed question set, scored for retrieval and answer quality, run before changes ship. Chat changes get the same rigour as code changes. ## Security API key origin restrictions, XSS prevention (answers are rendered as structured blocks, not raw HTML), JWT auth with session rotation, and SSRF guards on the crawler. ## Takeaway Treating the widget as a product in its own right, with its own build, isolation and versioning, is what made the platform embeddable on any site. ## Articles - [Coolify: The Open-Source Cloud Alternative for Self-Hosting](https://www.deeajith.in/posts/coolify-self-hosting-paas-alternative/): An in-depth look at Coolify, an open-source platform-as-a-service that makes self-hosting easy and cost-effective, offering a powerful alternative to Heroku, Netlify, and Vercel. - [From Dorm Room to Brand: Crafting the Taste of Gruham Logo with AI](https://www.deeajith.in/posts/crafting-taste-of-gruham-logo-ai-branding-hostel-startup/): A deep dive into how I used AI prompting, reference images, and hostel-room hustle to create a professional brand identity for a cloud kitchen. - [Engineering IkRo: A Deep Dive into Centralized Account Management Systems](https://www.deeajith.in/posts/ikro-technical-case-study-architecture-flow/): A technical deep dive into the IkRo web application, exploring system architecture, use-case modeling, and the data flows that drive enterprise account security. - [Generate Dynamic Open Graph Images with Astro, Satori & Vercel](https://www.deeajith.in/posts/generate-dynamic-open-graph-images-with-astro-satori-vercel/): Learn how to create dynamic, SEO-friendly OG images for social media using Astro, Satori, and Vercel. - [Understanding Inertia.js 2.0: Building Modern Monolithic Applications with Laravel and React/Vue](https://www.deeajith.in/posts/understanding-inertia-js-2-0-building-modern-monolithic-applications-with-laravel-and-react-vue/): Explore the capabilities and benefits of Inertia.js 2.0 in building modern web applications with Laravel and React/Vue, including server-side rendering, performance enhancements, and security features. - [Debugging and Fixing Dynamic Background Image Rendering in Vue.js](https://www.deeajith.in/posts/debugging-and-fixing-dynamic-background-image-rendering-in-vue-js/): Discover how to handle dynamic background image rendering issues in Vue.js applications, from common causes to effective solutions. - [Crafting Develop Origin: A Journey with Next.js and Tailwind CSS](https://www.deeajith.in/posts/crafting-develop-origin-a-journey-with-nextjs-and-tailwind-css/): Explore the creation of Develop Origin, a web project built with Next.js and Tailwind CSS, focusing on performance, responsiveness, and user experience. - [Boosting User Experience with Optimistic UI](https://www.deeajith.in/posts/boosting-user-experience-with-optimistic-ui/): In today's fast-paced digital world, user experience (UX) is paramount. Slow loading times and unresponsive interfaces can quickly frustrate users and drive them away. One powerful technique to enhance UX is Optimistic UI. - [Singleton Pattern: When and How to Use It in Frontend Applications](https://www.deeajith.in/posts/singleton-pattern-when-and-how-to-use-it-in-frontend-applications/): Learn about the Singleton pattern and its applications in frontend development, including its benefits and potential drawbacks. - [The Factory Pattern in Modern Frontend Development](https://www.deeajith.in/posts/the-factory-pattern-in-modern-frontend-development/): Explore the Factory pattern for creating objects without specifying their exact classes in modern frontend development. - [Understanding Code Splitting in Next.js: A Comprehensive Guide](https://www.deeajith.in/posts/understanding-code-splitting-in-nextjs/): Delve into the world of code splitting in Next.js, a crucial optimization technique for enhancing application performance. - [Observer Pattern: Building Reactive UIs in JavaScript](https://www.deeajith.in/posts/observer-pattern-building-reactive-uis-in-javascript/): Explore the Observer pattern for creating reactive UIs in JavaScript, a fundamental concept in modern frontend development. - [Webgl Bogie! - An Interactive 3D Expo with Three.js](https://www.deeajith.in/posts/webgl-bogie-threejs/): A deep dive into the world of interactive 3D expos with Three.js.