# Harshal Ranjhani > Harshal Ranjhani is a software development engineer building AI agents and AI systems that scale. This portfolio covers experience, projects, writing, and how to get in touch. Every page listed here is plain Markdown. The homepage, `/blog` and every blog post also return Markdown when requested with `Accept: text/markdown`. ## About Hey, I'm Harshal, a software engineer based in Pune. These days I spend most of my time on **AI agents** and the **systems that let them scale**: agents that take real actions, and the infrastructure that keeps them fast, observable, and affordable once real users show up. Before joining Unravel, I was a Software Engineer at rtCamp, and I've worked across the stack at startups like S20.ai, Hypersift.ai, Soundverse.ai, and Jiibs. At S20.ai, I built **Copilot Feeds**, an end-to-end camera copilot that analyzes RTSP streams with VLMs and raises real-time alerts. At Soundverse.ai, I helped ship audio processing tools to **over 20,000 users**. Outside of work, I tinker with my homelab and self-hosted services, and contribute to open source. It's the best way I know to learn how systems behave under the hood. My side projects usually land somewhere between AI and infrastructure, like genie, an AI-powered CLI written in Go, and K8s Preview, which spins up ephemeral Kubernetes environments in seconds. I'm a Computer Science graduate from Vellore Institute of Technology, specializing in IoT. I've written about React, Next.js, and AI tooling for Codeparrot.ai and as a freelancer, led project teams at IET-VIT, and won hackathons like YANTRA Hack-Track. Let's connect and build something meaningful together! ### Focus - **AI agents**: Agents that do real work: planning steps, calling tools and APIs, and handing off to a human when it matters. - **AI systems that scale**: Everything around the model: retrieval, streaming, rate limits, and fallbacks, so quality, latency, and cost hold up as usage grows. - **Infrastructure**: Kubernetes, networking, and self-hosted services. AI systems are only as reliable as what they run on, so I like owning that layer too. ### Personal Information - First Name: Harshal - Last Name: Ranjhani - Birth date: 2004-01-10 - Location: Pune, India - Email: mail@harshalranjhani.in - Website: https://www.harshalranjhani.in ### Social Links - [LinkedIn](https://hrsl.in/linkedin) - [GitHub](https://hrsl.in/gh) - [Mail](mailto:mail@harshalranjhani.in) - [X](https://hrsl.in/x) ### Tech Stack - [Python](https://www.python.org/) - [TypeScript](https://www.typescriptlang.org/) - [Golang](https://go.dev/) - [Claude](https://www.anthropic.com/claude) - [ChatGPT](https://chatgpt.com/) - [Gemini](https://gemini.google.com/) - [Docker](https://www.docker.com/) - [Kubernetes](https://kubernetes.io/) - [Linux](https://www.kernel.org/) - [Proxmox VE](https://www.proxmox.com/) - [Tailscale](https://tailscale.com/) - [Traefik](https://traefik.io/) - [Caddy](https://caddyserver.com/) - [Cloudflare](https://www.cloudflare.com/) - [AWS](https://aws.amazon.com/) - [Google Cloud](https://cloud.google.com/) - [Redis](https://redis.io/) - [Node.js](https://nodejs.org/) - [Next.js](https://nextjs.org/) - [React](https://react.dev/) - [Tailwind CSS](https://tailwindcss.com/) - [shadcn/ui](https://ui.shadcn.com/) - [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) - [MongoDB](https://www.mongodb.com/) - [MySQL](https://www.mysql.com/) - [Git](https://git-scm.com/) - [PHP](https://www.php.net/) - [WordPress](https://wordpress.org/) ## Experience ### Software Development Engineer | Unravel Duration: 10.2026 - present Skills: AI Agents, LLMs, Evals, Observability, System Design, Scalability - Building AI agents and production AI systems, taking them from a first useful workflow to software that holds up at scale. - Working across evaluation, tracing, and the infrastructure that keeps quality, latency, and cost in check as usage grows. ### Software Engineer | rtCamp Duration: 02.2026 - 09.2026 Skills: N/A ### Associate Software Engineer | rtCamp Duration: 07.2025 - 02.2026 Skills: N/A ### Software Engineering Intern | S20.ai Duration: 09.2024 - 07.2025 Skills: VLMs, Gemini, Computer Vision, React Native, Next.js - Built Copilot Feeds, an end-to-end camera copilot that watches RTSP streams with VLMs like Gemini and raises real-time alerts. - Made data downloads in the Copilot.Camera React Native app faster with pagination and a local SQLite store. - Built a calendar for the studio platform in Next.js that stays in sync with Google Calendar. ### Backend Developer | Hypersift.ai Duration: 12.2024 - 03.2025 Skills: AWS, CDN, Video Conversion, face-api.js, Backend Development - Built the backend on AWS and put a CDN in front of it to cut load times. - Built the video conversion pipelines that process and deliver media across the platform. - Used face-api.js to flag cheating during interviews. ### Technical Writer | Codeparrot.ai Duration: 03.2024 - 04.2025 Skills: Technical Writing, SEO, React.js, Next.js, Git - Wrote technical posts on React.js, Next.js, and Git. - Planned the content around SEO to grow organic traffic. ### Backend Intern | Jiibs Duration: May 2024 - Jun 2024 Skills: Next.js, MongoDB, Backend Development, System Architecture, Agile - Built and tuned backend features in Next.js and MongoDB for performance and data integrity. - Worked on the backend architecture and data model as part of an agile team. ### Full Stack Engineer | Soundverse.ai Duration: Jun 2023 - January 2024 Skills: Next.js, MongoDB, Google Cloud Platform, FFmpeg, Audio Processing - Built Soundverse.ai's studio and SaaS platforms with Next.js, React.js, and MongoDB. - Designed the audio processing pipeline on Google Cloud and FFmpeg that powers online editing. - Integrated Google Cloud Platform to improve performance and scalability. - Built a user-generated library for custom audio configurations. ### Freelance Technical Blog Writer | Freelance Duration: 03.2024 - 04.2025 Skills: React.js, Next.js, Git, Technical Writing, SEO, Content Strategy, AI, Collaboration Tools - Authored insightful and technical blogs on React.js, Next.js, and Git, advancing community knowledge and adoption of modern web development practices. - Developed and implemented content strategies focused on SEO optimization, substantially increasing organic traffic and user engagement on the platform. - Wrote blogs on various AI and collaboration tools, enhancing user understanding and adoption of these technologies. ### Crew Member | Volunteer Work Duration: Nov 2023 Skills: Event Management, Teamwork, Community Service, Sports Management, Volunteer Leadership - Volunteered as a crew member for Sports For All (SFA) - Contributed to organizing and managing sports events - Supported community sports initiatives and activities ### Student Volunteer | Volunteer Work Duration: Jan 2023 - Feb 2023 Skills: Event Coordination, Arts and Culture, Student Engagement, Teamwork, Communication - Volunteered for Riviera, VIT University's cultural festival - Assisted in Arts and Culture activities and events - Supported event coordination and student engagement activities - Contributed to the successful execution of cultural programs ### Core Committee Member | Volunteer Work Duration: Mar 2022 - Mar 2024 Skills: Leadership, Child Welfare, Community Outreach, Program Management, Social Impact, Team Coordination - Served as a core committee member for Juvenile Care at VIT - Focused on children welfare and development programs - Organized and participated in community outreach programs - Led initiatives for child education and care activities - Coordinated with team members for successful program implementation ### Vellore Institute of Technology | Education Duration: 2021 - 2025 Skills: Computer Science, Project Leadership, Hackathons, Problem Solving, Teamwork - Bachelor's Degree in Computer Science - CGPA: 9.24/10.00 - Led projects at IET-VIT - Won the YANTRA Hack-Track - Recognized as Best Freshers at WomenTechies'22 ### DAV Public School, Aundh | Education Duration: 2007 - 2021 Skills: Leadership, Communication, Teamwork, Problem Solving, Critical Thinking - High School Education - XII CBSE: 94.6% - X CBSE: 92.8% - Member of the Prefect Council ## Projects ### Industrial IoT Process Analytics Platform Project URL: undefined Skills: MQTT, MySQL, NocoDB, Metabase, Caddy, Cloudflare, IoT, Self Hosting Built the software and analytics layer for an on-premise industrial IoT platform, ingesting machine telemetry over MQTT for up to 50 machines across two plants. Used MySQL with customized NocoDB and Metabase dashboards for process monitoring, and managed the self-hosted infrastructure end-to-end with Caddy, Cloudflare, service networking, and automated backups for reliable on-premise operation. ### genie Project URL: https://hrsl.in/genie Skills: Go, Cobra, OpenAI, Gemini, CLI, AI genie is an AI-powered CLI written in Go. It helps with everyday terminal work, like file management and system information, and explains what's going on along the way. It can also generate images and music and scrape websites, using OpenAI or Gemini models. ### K8s Preview Project URL: https://hrsl.in/k8s-preview Skills: Self Hosting, Kubernetes, Docker, Server Management, DevOps, Traefik, Networking K8s Preview lets users spin up instant, ephemeral preview environments with a single click. Users pick from a catalog of pre-approved Docker images, and the platform dynamically creates a Kubernetes Pod, Service, and Ingress serving the app on a unique subdomain within seconds. Previews auto-expire after 10 minutes, keeping the cluster clean. Built on a two-VPS architecture with k3s, Traefik, and a Tailscale VPN tunnel for secure communication. ### bruh.help Project URL: https://github.com/harshalranjhani/bruh.help Skills: AI, LLMs, Websockets, Openrouter API, Networking An arena where AI models competed on real coding questions. Each round pulled a question from Stack Overflow, two AI contestants submitted fixes, five AI judges voted on a winner, and viewers then had 30 seconds to pick their own favorite. Rounds ran continuously over WebSockets, on models like Llama 3.1 8B, Gemma 2 9B, Llama 3.3 70B, Mistral Nemo, DeepSeek V3, Qwen3 8B and Phi-4. No longer maintained. ### EmGen Project URL: https://hrsl.in/emgen Skills: Next.js, face-api.js, TensorFlow.js, Google Cloud Platform, AI, Machine Learning, Music Generation EmGen is a web application that uses face-api.js and Tensorflow.js to generate music based on the user's emotion. You can provide additional context about your mood and the application will generate music accordingly. The application uses Google Cloud Platform for hosting and storage and the MusicGen model by Facebook for generating music. ### Athena Project URL: https://yugpune.org Skills: Next.js, TypeScript, Google Solutions Challenge, AI Chatbot, Social Impact, NGO Platform Developed Athena, for Yug Foundation, Pune under the Google Solutions Challenge. Athena is a platform that connects NGOs with its users, allowing them to gain insights into the NGO's work and donate to the cause. It also provides a chatbot which is trained to answer user queries based on health, education, and more. ### moodLog Project URL: https://hrsl.in/moodlog Skills: React Native, TypeScript, Wokwi, DHT22 Sensor, Node.js, WebSockets, OpenAI, Gemini, IoT Track your mood in real-time with data from wearable IoT devices. Get personalized AI powered suggestions based on your mood patterns. Developed this for my Wearable computing class. ### Xssorcist Project URL: https://hrsl.in/xssorcist Skills: React.js, JavaScript, Node.js, Express.js, Cheerio, Security, Web Scraping A very simple website vulnerability scanner made with Cheerio.js and Node.js. It scans a website for XSS vulnerabilities and reports them back to the user. A pdf report is also generated. Developed this for my Information Security class. ### Nerd Nest Project URL: https://hrsl.in/nerd-nest Skills: Next.js, TypeScript, Supabase, Shadcn UI, OpenAI, GPT Nerd Nest is a one-stop platform for students preparing for placements. It features a customized GPT chatbot to address placement-related queries and allows students to track their LeetCode problems, projects, and more. Students can also add their own questions with a LeetCode-like interface for easy progress tracking. ### PingMe Project URL: https://hrsl.in/pingme Skills: React Native, CronJobs, Node.js, WhatsApp API, Email API, Scheduling Missed a meeting scheduled in the next sprint? PingMe is here to help! PingMe is a simple and easy-to-use reminder service which allows you to set reminders for your meetings, deadlines, and more. It sends you an email and a WhatsApp message! This is because most people check their emails and WhatsApp messages more frequently and it is more likely that they will see the reminder. ## Certifications - [Mastering System Design: From Basics to Cracking Interviews](https://www.udemy.com/certificate/UC-2d87897c-ce1e-4493-be81-f6802ad29201/) - [Fundamentals of Network Engineering](https://www.udemy.com/certificate/UC-4c7c508a-49b4-4935-9a81-89e6c9d181d3/) - [AWS Academy Graduate - AWS Academy Cloud Foundations](https://www.credly.com/badges/a76b3a04-04c7-465e-ac32-d3b58730225c/linked_in_profile) - [Become a WordPress Developer: Unlocking Power with Code](https://www.udemy.com/certificate/UC-4ce2e903-3739-4724-b575-a127336d88c0/) - [Java with DSA](https://assets.harshalranjhani.in/documents/certificates/apna-college.pdf) - [The Complete SQL Bootcamp](https://www.udemy.com/certificate/UC-4e393fe3-3eb1-450c-945e-eae2293b450b/) - [React - The Complete Guide](https://www.udemy.com/certificate/UC-7bd586b6-24e2-489f-a90b-fbe5a1727618/) - [The Web Developer Bootcamp](https://www.udemy.com/certificate/UC-f5b299f4-9dc9-4010-9517-6609257032f/) - [Complete Python Bootcamp Zero to Hero](https://www.udemy.com/certificate/UC-2d808870-c171-4204-8cce-bd83235f5c39/) - [C++ Beginner to Advance](https://www.udemy.com/certificate/UC-7013ac3f-3df4-4eac-a4f2-eb727b0ca6d3/) ## Awards ## Blog > Posts by Harshal Ranjhani, newest first. Each link is the Markdown version of the post; drop the `.md` suffix for the HTML page. - [turning an old wi-fi-only laptop into a proxmox server](https://harshalranjhani.in/blog/turning-an-old-wifi-only-laptop-into-a-proxmox-server.md): Proxmox VE 9.2 on a laptop with no ethernet port. The installer needs a real NIC, the host joins wi-fi with wpa_supplicant, and guests live on a NAT bridge. - [how i keep my ai api keys from leaking](https://harshalranjhani.in/blog/how-i-keep-my-ai-api-keys-from-leaking.md): The places an OpenAI, Anthropic, or Gemini key leaks from a Next.js app, the server route that holds the only copy, and the order to follow when one gets out. - [bun check is the typecheck command worth adding](https://harshalranjhani.in/blog/bun-check-is-the-typecheck-command-worth-adding.md): Bun 1.4.3 ships bun check, a TypeScript 7 type checker inside the runtime. What it replaces, what it leaves alone, and how to run it before tests and CI. - [Skip Port Forwarding: SSH Into Your Home Server With Tailscale](https://harshalranjhani.in/blog/ssh-home-server-with-tailscale.md): Connect to a home server over SSH using its private Tailscale address, without forwarding port 22 on your router. - [I Built My Own Private Docker Registry with Zot and Backblaze B2](https://harshalranjhani.in/blog/self-host-private-docker-registry-zot-backblaze.md): A practical guide to self-hosted Docker image hosting using Zot, Docker Compose, Backblaze B2, private access, RBAC, retention, audit logs, and GitHub Actions. - [Making Dynamic MDX Blogs Work with OpenNext on Cloudflare Workers](https://harshalranjhani.in/blog/making-dynamic-mdx-blogs-work-with-opennext-cloudflare-workers.md): A simple way to fix MDX blog pages that work locally but render empty on Cloudflare Workers with OpenNext. - [i put a proxy between me and google](https://harshalranjhani.in/blog/i-put-a-proxy-between-me-and-google.md): Discover how 4get, a self-hosted proxy search engine, can enhance your search experience by providing a cleaner, ad-free interface while maintaining privacy. Learn how to set it up and make it your default search engine. - [Facehash: A Simple React Avatar Generator for User Profiles](https://harshalranjhani.in/blog/facehash-for-react-avatar-generator.md): Learn what Facehash is, why it is useful, and how to set it up in React or Next.js to generate unique avatar faces from names, emails, and user IDs. - [How to Set Up Your Own DNS Server with Tailscale for Free](https://harshalranjhani.in/blog/setup-dns-server-tailscale-adguard.md): A complete guide to setting up AdGuard Home as your own DNS server, secured with Tailscale VPN for private, ad-blocking DNS across all your devices. - [Taillens: A Tailwind Extension for Real-Time CSS Editing](https://harshalranjhani.in/blog/taillens-a-tailwind-extension-for-real-time-css-editing.md): A practical look at the taillens extension, a browser tool that lets you inspect, edit, and preview Tailwind CSS classes in real time. Here's what it does and when it might fit your workflow. - [Installing rtPull](https://harshalranjhani.in/blog/installing-rt-pull.md): A quick setup guide for rtPull, a macOS app to view GitHub discussions and pull requests - [moodlog: building a mood tracker with iot simulation](https://harshalranjhani.in/blog/moodlog-building-a-mood-tracker-with-iot-simulation.md): Created a mood tracking app that gets data from a fake smart ring and tries to guess how you're feeling. Spoiler: predicting emotions from temperature data is pretty tricky, but the real-time WebSocket part was cool. - [Lovable AI: Build Apps Without Coding - A Simple Guide](https://harshalranjhani.in/blog/lovable-ai-build-apps-without-coding-a-simple-guide.md): Discover how Lovable AI makes app building incredibly easy! This simple step-by-step guide helps you create real apps without writing any code at all. - [Next.js vs Nest.js: Understanding the Difference](https://harshalranjhani.in/blog/nextjs-vs-nestjs-understanding-the-difference.md): A comprehensive comparison of Next.js vs Nest.js frameworks, their use cases, and when to choose one over the other. - [Beyond If-Else: JavaScript's Ternary Operator Explained](https://harshalranjhani.in/blog/beyond-if-else-javascripts-ternary-operator-explained.md): Dive deep into the world of JavaScript's ternary operator - the three-part conditional expression that streamlines your code while preserving its intent. - [NestJS: The Modern Node.js Framework](https://harshalranjhani.in/blog/nestjs-the-modern-nodejs-framework.md): Explore how NestJS combines TypeScript, dependency injection, and a three-tier architecture to solve Node.js's organization challenges. - [Tamagui: Building Cross-Platform Apps Made Simple](https://harshalranjhani.in/blog/tamagui-building-cross-platform-apps-made-simple.md): Learn how Tamagui bridges the gap between React and React Native with a unified styling approach and performance optimizations. - [Cursor AI: Future Software Engineer?](https://harshalranjhani.in/blog/cursor-ai-future-software-engineer.md): Discover how Cursor is revolutionizing development workflows with Al-powered pair programming that understands your entire codebase. - [Exploring Zed: The Lightning-Fast Code Editor Built in Rust](https://harshalranjhani.in/blog/exploring-zed-the-lightning-fast-code-editor-built-in-rust.md): Zed: A Lightning-Fast Code Editor Built in Rust with Powerful Collaboration, Performance & Multibuffer Editing for Seamless Coding - [Qodo AI: Code with an Agentic AI](https://harshalranjhani.in/blog/qodo-ai-code-with-an-agentic-ai.md): A Developer's Guide to Supercharging Your Workflow with QodoAI's Testing, Review, and Generation Tools - [A developers guide to v0.dev](https://harshalranjhani.in/blog/a-guide-to-using-v0-dev.md): Discover how Vercel's v0.dev is revolutionizing the way developers create user interfaces, from rapid prototyping to production-ready code - [A guide to using Windsurf.ai](https://harshalranjhani.in/blog/a-guide-to-using-windsurf-ai.md): Discover how Windsurf.ai transforms coding workflows with AI-powered features, enhancing productivity and collaboration for developers everywhere. - [FlutterFlow: Pros and Cons of using the framework](https://harshalranjhani.in/blog/flutterflow-pros-and-cons-of-using-the-framework.md): Looking to build a mobile app? Find out how FlutterFlow works, what it does well, what it doesn't do well, and if it's the right tool for your next app project. - [Typescript Omit vs Pick: When to use What](https://harshalranjhani.in/blog/typescript-omit-vs-pick-when-to-use-what.md): Learn how to use TypeScript Omit and Pick to remove or add properties you don't need and make your code simpler and easier to read. - [How to Enable JavaScript on iPhone](https://harshalranjhani.in/blog/how-to-enable-javascript-on-iphone.md): Learn how to enable JavaScript on iPhone to ensure smooth web browsing and effective debugging. Follow our step-by-step guide to activate JavaScript in Safari. - [UploadThing: A Modern File Upload Solution for Next.js Applications](https://harshalranjhani.in/blog/uploadthing-a-modern-file-upload-solution-for-nextjs-applications.md): Build secure and type-safe file uploads in your Next.js applications with UploadThing. Modern file handling with built-in CDN delivery and seamless integration. - [ReferenceError: window is not defined - A Developer's Guide](https://harshalranjhani.in/blog/referenceerror-window-is-not-defined-a-developers-guide.md): Learn how to troubleshoot and fix the 'window is not defined' error in your React applications with step-by-step solutions - [Build Your Developer Portfolio: Exciting Web Development Projects You Can Start Today](https://harshalranjhani.in/blog/build-your-developer-portfolio-exciting-web-development-projects-you-can-start-today.md): From beginner to advanced: A curated collection of web development projects to transform your portfolio and showcase your skills. - [Cursor vs Copilot: A Comparison](https://harshalranjhani.in/blog/cursor-vs-copilot-a-comparison.md): Cursor vs Copilot: Which AI coding assistant should you choose? A detailed guide comparing features, pricing, and capabilities. - [DaisyUI: CSS Components for Tailwind](https://harshalranjhani.in/blog/daisyui-css-components-for-tailwind.md): DaisyUI provides ready-to-use components for Tailwind CSS while maintaining the utility-first approach - [How to Center a Div in CSS - Simple Methods That Work](https://harshalranjhani.in/blog/how-to-center-a-div-in-css-simple-methods-that-work.md): A comprehensive guide to center a div using CSS: Learn multiple approaches including Flexbox, Grid, and positioning techniques. - [Best Design-to-Code AI Tools for Developers](https://harshalranjhani.in/blog/best-design-to-code-ai-tools-for-developers.md): Discover the top AI tools that transform design concepts into functional code, streamlining your development process and boosting productivity. - [AVIF File Format: The Evolution in Web Image Compression](https://harshalranjhani.in/blog/avif-file-format-the-evolution-in-web-image-compression.md): Learn how the AVIF file format reimagines web performance through file size reductions and enhanced quality making it an excellent choice for developers. - [Understanding useState in TypeScript React](https://harshalranjhani.in/blog/understanding-usestate-in-typescript-react.md): Master useState in TypeScript React with this guide covering type inference, generics, and state management patterns. - [Why Developers Love the Shadcn Sidebar Component](https://harshalranjhani.in/blog/why-developers-love-the-shadcn-sidebar-component.md): Discover why developers love the Shadcn Sidebar- a customizable, composable React component enhancing navigation with theming and persistent state. - [Setting Up a Node.js, TypeScript, and Express Project](https://harshalranjhani.in/blog/setting-up-a-nodejs-typescript-and-express-project.md): Set up a Node.js, TypeScript, and Express project with this interactive guide. Learn installation, configuration, and running your server efficiently. - [Fixing “Cannot Use Import Statement Outside a Module” Error](https://harshalranjhani.in/blog/fixing-cannot-use-import-statement-outside-a-module-error-in-javascript.md): Learn how to resolve the “Cannot use import statement outside a module” error in JavaScript by configuring ES modules and troubleshooting common issues. - [Figma to React with CodeParrot AI: Build Dashboard in minutes](https://harshalranjhani.in/blog/figma-to-react-in-minutes-using-codeparrot.md): Streamline your design-to-code workflow with CodeParrot: Convert Figma to React effortlessly, boost productivity, and create pixel-perfect components in minutes - [React useQuery : A Complete Guide](https://harshalranjhani.in/blog/react-usequery-a-complete-guide.md): Learn how to simplify data fetching in React with React useQuery. Enhance your app performance and handle server-side data more efficiently with these examples. - [Astro.js Getting started with a static site generator](https://harshalranjhani.in/blog/astrojs-getting-started-with-astrojs-static-site-generator.md): Get started with Astro.js, a modern static site generator that combines speed, flexibility, and ease of use for building high-performance websites. - [Best React UI Library: 5 Popular Choices](https://harshalranjhani.in/blog/best-react-ui-library-5-popular-choices.md): Discover the best React UI library with this comparison of five popular options, detailing features, pros, and cons. - [Next.js Middleware: Simple Guide to Control Requests](https://harshalranjhani.in/blog/nextjs-middleware-simple-guide-to-control-requests.md): Learn how to use Next.js middleware for controlling requests, securing your app, and improving performance with practical examples in this simple guide. - [Top Online React Compiler Comparisons for Developers](https://harshalranjhani.in/blog/top-online-react-compiler-comparisions-for-developers.md): Find the best online React compiler. Compare CodeSandbox, CodePen, StackBlitz, Replit, and JSFiddle to improve your React development workflow. - [Recharts: The Ultimate React Charting Library](https://harshalranjhani.in/blog/recharts-the-ultimate-react-charting-library.md): Discover how Recharts, a flexible and powerful charting library built on React components, can elevate your data visualization game. - [Using Zod with TypeScript: A Guide for Frontend Developers](https://harshalranjhani.in/blog/using-zod-with-typescript-a-guide-for-frontend-developers.md): Master data validation and schema declaration with Zod TypeScript. Simplify your frontend development workflow and enhance type safety effortlessly. - [Expo vs. React Native: Pros, Cons, and Key Differences](https://harshalranjhani.in/blog/expo-vs-react-native.md): Diving into Expo vs React Native: Choosing the Best Path for Efficient and Effective Mobile App Development. - [React 19: A Comprehensive Guide](https://harshalranjhani.in/blog/react-19-a-comprehensive-guide.md): Explore React 19 in our comprehensive guide, covering new features, best practices, and advanced techniques for building dynamic web applications. - [NextJs Server Actions: Why and How](https://harshalranjhani.in/blog/nextjs-server-actions-why-and-how.md): Learn how to set up, create, and use NextJs server actions for improved performance, SEO, and secure data fetching. - [React SEO Guide: Mastering SEO Strategies](https://harshalranjhani.in/blog/react-seo-guide-mastering-seo-strategies.md): Learn to optimize your React apps for search engines with this guide. Master SEO strategies, handle dynamic content, generate sitemaps, and improve performance. - [Tailwind Catalyst: Getting Started with Tailwind's React Toolkit](https://harshalranjhani.in/blog/tailwind-catalyst-getting-started.md): Get started with Tailwind Catalyst, the powerful toolkit for integrating Tailwind CSS with React. Discover its components, setup, and pricing to enhance your web development. - [Best Tailwind Extensions](https://harshalranjhani.in/blog/best-tailwind-extensions.md): Maximize your productivity with these Tailwind extensions that enhance your workflow and make web development a breeze. - [Mastering Tailwind CSS: A Guide to Padding, Margin, and Borders](https://harshalranjhani.in/blog/setting-tailwind-padding-margin-border.md): A Comprehensive Guide to Setting Tailwind Padding, Margin, and Border in Your Web Development Projects. - [How to Easily Add Translations to Your React Apps with i18next](https://harshalranjhani.in/blog/adding-translations-to-react-apps.md): Learn how to add translations to your React apps using i18next and enjoy a seamless multilingual experience. - [Introduction to Git Hooks](https://harshalranjhani.in/blog/introduction-to-git-hooks.md): Enhance Your Workflow with Automation and Customization Techniques for Improved Code Quality and Efficiency with Git Hooks. - [Using environment variables in React and Vite](https://harshalranjhani.in/blog/using-environment-variables-in-react-and-vite.md): Learn how to use environment variables in React and Vite to manage secrets and configuration settings in your applications. - [Learn Redux Toolkit for State Management in React](https://harshalranjhani.in/blog/learn-redux-toolkit-for-state-management-in-react.md): Learn the basics of Redux Toolkit and how to use it for state management in React applications. - [Building a Masonry Layout in React with Infinite Scroll](https://harshalranjhani.in/blog/building-a-masonry-layout-in-react-with-infinite-scroll.md): Learn how to build a masonry layout in React using react-responsive-masonry and improve the user experience of your web applications. - [Create your portfolio with GitHub Pages](https://harshalranjhani.in/blog/creating-your-portfolio-with-github-pages.md): Learn how to create a portfolio website using GitHub Pages from creating to deploying along with a custom domain. - [CLI Tools every Developer should know](https://harshalranjhani.in/blog/cli-tools-every-developer-should-know.md): Explore some essential CLI tools to enhance your development experience and productivity as a developer. - [Navigation in React Native](https://harshalranjhani.in/blog/navigation-in-react-native.md): Essential Guide to Implementing Stack, Tab, and Drawer Navigation in React Native - [The Arc browser: A Chrome replacement?](https://harshalranjhani.in/blog/arc-browser-chrome-replacement.md): Arc isn't flawless, and getting used to it takes some time. However, it is packed with innovative suggestions for how we ought to use the internet, and the majority of them are sound. - [Deploying React Apps to Github Pages with Github Actions](https://harshalranjhani.in/blog/deploying-react-apps-to-github-pages-with-github-actions.md): Learn to deploy React applications seamlessly using GitHub Actions to automate your workflow and push to GitHub Pages efficiently. - [10 Best React Native Developer Tools in 2024](https://harshalranjhani.in/blog/10-best-react-native-developer-tools.md): Transform Your Mobile Apps: Top Tools for React Native Developers in 2024 - [Setting Up Stripe Payments in React](https://harshalranjhani.in/blog/setting-up-stripe-payments-in-react.md): A Comprehensive Guide to Integrating Stripe Payments in Your React App for Beginners - [Top 10 Developer Communities You Should Explore](https://harshalranjhani.in/blog/developer-communities-you-should-explore.md): Explore the best developer communities to enhance your skills, network with other developers, and stay up-to-date with the latest trends in technology. - [Implementing Infinite scroll in React apps](https://harshalranjhani.in/blog/infinite-scroll-in-react.md): Step-by-step guide on integrating the 'react-infinite-scroll-component' in your React application. - [React Native’s Flexbox: A Visual Guide](https://harshalranjhani.in/blog/flexbox-in-react-native.md): Streamline your app development with the flexibility of Flexbox in React Native. Start designing better layouts today! - [Git Merge vs. Rebase: Key Differences](https://harshalranjhani.in/blog/git-merge-vs-rebase.md): Discover the core differences and use cases between Git Merge and Git Rebase to optimize your version control. - [Git commands you need to know!](https://harshalranjhani.in/blog/git-commands-you-need-to-know.md): Git commands you need to start using today to boost your coding efficiency. - [Exploring Mojo CSS: A Developer’s Guide](https://harshalranjhani.in/blog/exploring-mojo-css.md): Learn why Mojo CSS is the key to building mobile-friendly, responsive websites that look fantastic on all platforms. - [Static site generation using Astro.js](https://harshalranjhani.in/blog/static-site-generation-using-astro.md): A Beginners Guide to Static Site Generation with Astro.js - [Svelte for Beginners: Easy Guide](https://harshalranjhani.in/blog/svelte-for-beginners.md): Introduction to Svelte for beginners: Simple steps to get started. - [Exploring Three.js for 3D Web Development](https://harshalranjhani.in/blog/exploring-three-js.md): Unlocking the potential of web-based 3D graphics through Three.js. - [Next.js Large file uploads using Edge Store](https://harshalranjhani.in/blog/nextjs-edgestore-uploads.md): Uncover the simplicity and efficiency of managing file uploads in Next.js projects using Edge Store - [Shadcn: Customizable and Open Source UI](https://harshalranjhani.in/blog/shadcn-ui.md): Explore how to elevate your web projects with Shadcn's flexible, open-source components and install it in your React projects. - [React Native and Flutter: A Developer's Dilemma](https://harshalranjhani.in/blog/react-native-and-flutter.md): Explore the strengths and weaknesses of each framework to make an informed decision for your development toolkit. - [React to Vercel: Deployment Made Easy.](https://harshalranjhani.in/blog/react-to-vercel.md): Learn how to deploy your React applications to Vercel seamlessly, from setup to live site, with this easy-to-follow guide - [Framer Motion: Animate React Easily](https://harshalranjhani.in/blog/framer-motion.md): A beginner-friendly guide to adding smooth animations to your React app effortlessly.