LibreNote AI
The open-source, self-hosted alternative to NotebookLM. Upload your sources, chat with grounded citations, and generate studio artifacts — flashcards, quizzes, mind maps, audio overviews, and more — fully on your machine or server.
Devyansh Yadav
AI Product & Design Engineer
Building AI-Native Products • Full-Stack (Next.js) • UX-First Engineering
About Me
Basically, I'm a builder.
Code is just a medium. I focus on "cracking" problems and crafting the perfect UI/UX.
As an AI 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.
Projects
Sonner Labs
Sonner Labs is a professional-grade playground and configurator for Sonner, the opinionated toast component for React. It allows developers to visually design, preview, and export perfectly tailored notification systems in seconds.
Work Experience
Nexr Cloud Built from scratch
Led the end-to-end design and development of a multi-tenant, AI-native Enterprise Cloud platform, ensuring robust data isolation and secure management for enterprise-grade services.
- Developed proprietary AI-native microservices, focusing on intelligent automation, advanced analytics, and MCP (Model Context Protocol) integrations using AI SDKs to power core platform features.
Social Hardware Built from scratch
Developed 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 Built from scratch
Built 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
Core Stack
AI Engineering
UI & Design
Cloud & Backend
Blogs
Fixing Bad Retrieval: Best Query Transformation Techniques in RAG
If your AI is providing mediocre answers, your retrieval strategy needs an upgrade. See how the best query transformation techniques bridge the semantic gap between users and vector DBs.
What is RAG? How Vector Databases Make LLMs Smarter
LLMs are powerful, but they can't process massive amounts of raw, private data at once. Learn how Retrieval-Augmented Generation (RAG) uses vector databases, embeddings, and ANN algorithms to give AI the exact context it needs in milliseconds.
How Agents Actually Remember Things: The 4 Pillars of AI Memory
Discover how AI agents mirror human cognition to handle complex, continuous tasks. This deep dive breaks down the CoALA framework, explaining how Working, Semantic, Procedural, and Episodic memory modules work together to prevent hallucinations and power durable, long-running AI assistants.
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
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.
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.
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! 🚀
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.
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.
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.
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.
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!
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.
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