Devyansh Yadav
RENDERING_ENGINE: OKLCH
Basically, I'm a builder.
Code is just a medium. I focus on "cracking" problems and crafting the perfect UI/UX.
As a Product & Design Engineer, I blend deep architecture with precision design.
I build with AI to move 10x faster, shifting focus from syntax to perfecting the experience.
India
Projects
T4.Chat
A powerful, feature-rich clone of t3.chat with advanced AI capabilities
Huminex
AI recruitment platform with natural interview speech
ChaiGenie
RAG-powered Chrome extension to chat with docs
Play NFT
Saas NFT Landing Page
Cursor2.0
A terminal-based AI agent for creating, updating, and executing coding projects
Persona AI
Hitesh and Piyush Sir Persona AI
TableNex
A React table library
Super Grok
Chrome Extension to Twitter Grok AI
Mesh Gradient Generator
Premium mesh gradients with unique grain effects
DevGPT
Innovative ChatGPT Scraping Solutions
Dev ImgKit
Cloud-based image processing platform
Xtract
AI-driven Chrome extension
Whatscom
WhatsApp Conversational Commerce Platform
Devvarena
A Fronted Editor for Beginners
Dev Gemini
Gemini clone that beats actual gemini
Developer Think
Collaborative Advanced Blogging Platform
Dev Components
A collection of highly reusable components
Img to Code
A tool to convert UI to code
G Drive
An advanced backend for Google Drive
Blog Dashboard
A dashboard for advanced blogging platform
Work Experience
AutoDoc
SOURCE: NATIVEEngineered a smart document generation platform for SAP ABAP code documentation using a BYOT (Bring Your Own Template) approach, integrated seamlessly into the SDLC for automation and standardization.
Architected advanced XML processing for flexible, template-driven document creation
Integrated and optimized Core AI SDK for code analysis and automated documentation
Designed dynamic system prompt management tailored to project requirements
Built structured database architecture with optimized Supabase queries for scalability
Developed a user-friendly interface with real-time simulation and feedback
Social Hardware
SOURCE: NATIVEDeveloped both the blog frontend, contributing to a platform with seamless blog content management.
Built content management dashboard for updating blog posts
Integrated SEO features and meta tag management for improved search visibility
Rushdr
Contributed to a complex dashboard frontend for doctor appointment management, delivering efficient data presentation and doctor/patient/admin functionalities.
Developed core dashboard modules using React JS with responsive layouts
Integrated Payment gateway for online payments
Built doctor and patient interfaces for streamlined operations
Optimized frontend performance with effective state and component management
Designed and implemented a highly complex onboarding flow improving user adoption
Collaborated with backend developers to ensure smooth API integration and data flow
Whatscom
Next JS Developer
Whatscom.io
SOURCE: NATIVEBuilt a full-featured, responsive corporate website from scratch, highlighting company services and brand with strong performance and UX across all devices.
Engineered frontend architecture in Next.js using SSR for SEO and fast load times
Applied Tailwind CSS for responsive design across mobile, tablet, and desktop
Created interactive Inhouse UI components and subtle animations for engaging UX
Optimized performance through code splitting, image handling, and lazy loading
Tech_Stack_Inventory
Intelligence_Feed
LOGS: ACTIVE
Creating a Modal Using Only a Checkbox and Tailwind CSS
Discover how to build a lightweight, accessible modal without JavaScript. Learn to leverage Tailwind CSS and a clever checkbox technique for a smooth user experience in web development.
Using useFormStatus and useFormState a in Next.js 14 with Server Actions
Using useFormStatus and useFormState a in Next.js 14 with Server Actions
Magical Resources for Frontend Developers
Discover indispensable resources for modern frontend development. Ideal for developers looking to enhance their creative toolkit and streamline their workflow.
Level Up Your Forms: Crafting Animated Inputs with Pure Tailwind CSS
Discover how to create eye-catching, animated input fields using nothing but Tailwind CSS!
Fixing React/Next.js Build Error: "Document is not defined"
Document is not defined" error in your React or Next.js project? This guide explains why it happens during deployment but not locally, and offers five practical solutions.
How to create a colorized spotlight effect on image?
Learn how to create a circular spotlight effect that reveals color in specific parts of an image while keeping the rest like grayscale, using only Tailwind CSS. This technique uses clever positioning and box-shadow to achieve a stunning visual effect without JavaScript or complex libraries.
Understanding Parallel and Intercepting Routes in Next.js
Unlock the power of Next.js advanced routing! Learn how to create Pinterest-style modal views and complex dashboard layouts using parallel and intercepting routes. Discover how major platforms implement seamless navigation patterns with just a few lines of code. Perfect for developers looking to level up their Next.js applications with professional-grade routing techniques.
Fixing the ERESOLVE Dependency Error in Next.js 15 Vercel Deployments
Learn how to quickly resolve the frustrating ERESOLVE dependency error when deploying Next.js 15 applications to Vercel using a simple settings modification. This straightforward guide provides a practical solution for developers facing build failures due to package conflicts.
A Deep Dive into Chrome Extension Architecture: Understanding the Core Files
In this guide, we'll explore the fundamental building blocks that make up every Chrome extension. From manifest.json (the heart) to background.js (the brain), learn how these core files work together to create powerful browser extensions. Perfect for developers starting their journey into Chrome extension development! 🚀
Building a Chrome Extension with React, Vite, and Tailwind using CRXJS
Building a Chrome Extension with React, Vite, and Tailwind CSS - Learn how to create modern browser extensions using React framework with hot reloading. Step-by-step guide covering setup, configuration, folder structure, and Shadow DOM integration. Perfect for web developers familiar with HTML, CSS, and JavaScript.
On Fly Image Transformation Pipeline Using Amazon CloudFront and AWS Lambda
Discover an efficient AWS architecture for on-demand image transformation using CloudFront, AWS Lambda, and S3. This system optimizes storage and delivery with caching, ensuring low latency and high performance. Users can request specific transformations, minimizing costs and processing time, all within a scalable, serverless environment.
Decoding AI Jargons with Chai
Ever wondered how AI seems to magically generate text, images, or even videos? In Decoding AI Jargons with Chai, we unravel the science behind the magic of artificial intelligence, sipping through complex concepts with the warmth of chai. From the evolution of Large Language Models (LLMs) to the groundbreaking "Attention Is All You Need" paper by Google