# harshalranjhani.in

> harshalranjhani.in is my minimal portfolio website, showcasing my work and experience as a Software Developer.

- [About](https://harshalranjhani.in/about.md): A quick intro to me, my tech stack, and how to connect.
- [Experience](https://harshalranjhani.in/experience.md): Highlights from my career and key roles I've taken on.
- [Projects](https://harshalranjhani.in/projects.md): Selected projects that show my skills and creativity.
- [Awards](https://harshalranjhani.in/awards.md): My key awards and honors.
- [Certifications](https://harshalranjhani.in/certifications.md): Certifications and credentials I've earned.

## Blog

- [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.