Stories by SurajOnDev

How to Get Better at Coding

Improve your coding skills with these seven essential tips for developers, from consistent practice and reading documentation to building projects and learning.

Implementing JWT Authentication in a React and Express App

Learn to build a full-stack authentication system with a React frontend and an Express.js backend using JSON Web Tokens (JWT) for secure user sessions.

3 Best Animation Libraries for React

Discover the best animation libraries for React, including Framer Motion and React Spring, to easily create beautiful and fluid animations in your projects.

The Ultimate Guide to Technical Writing for Developers

A complete guide for developers on technical writing, covering why you should start, where to publish, how to find topics, and ways to monetize your content.

5 GitHub Repositories to Learn and Master React

Discover 5 essential GitHub repositories to learn and master React, featuring awesome lists, component libraries, interview questions, and a hooks cheatsheet.

5 GitHub Repositories for an Instant Knowledge Boost

Boost your developer skills with these 5 essential GitHub repositories, covering free coding curriculum, curated awesome lists, and JavaScript algorithms.

What is Embeddings? Generating Embedding using Supabase

Learn what word embeddings are and how to generate and store them using Supabase Edge Functions and a React app in this step-by-step NLP tutorial.

5 Best Practices to Improve Your React Code Quality

Improve your React code quality with these five best practices, including props destructuring, performance hooks, custom hooks, and error boundaries.

5 CSS & JavaScript Animation Libraries for Web Developers

Discover 5 powerful CSS and JavaScript animation libraries like Animate.css and Anime.js to add beautiful, cross-browser animations to your web projects.

5 Websites for Beautiful UI Components

Discover 5 essential websites for UI components, including free icons, illustrations, color palettes, fonts, and unique empty state designs for your projects.

How to Make Your First Open Source Contribution: A Step-by-Step Guide

A beginner's guide to open-source contribution, covering how to find projects, create issues, fork, clone, and submit your first pull request on GitHub.

7 Essential Tools for Technical Writers

Boost your technical writing with these essential tools for drafting, organization, grammar checking, design, and creating beautiful code snippets.

5 Modern Databases for Your Next Web Project

Discover the best databases for your next project, from NoSQL options like MongoDB to modern serverless SQL platforms like PlanetScale, Supabase, and Neon.

5 Websites for Color Inspiration for Your Next Project

Discover 5 essential websites for color inspiration, helping you find palettes, generate tints and shades, check contrast, and use AI for your designs.

4 Lesser-Known Developer Tools to Boost Your Workflow

Discover 4 lesser-known developer tools to boost your workflow, including a code visualizer, CSS grid generator, VS Code extensions, and a modern terminal.

5 Best Tools for Real-Time Code Collaboration

Discover the best tools for pair programming and real-time code collaboration, including Live Share, CodeSandbox, GitPod, and more for any IDE.

5 Best Online IDEs for Developers

Explore the best online IDEs for developers, including Replit, CodePen, and GitPod, to code in 50+ languages without any setup.

5 Best Free Notion Templates for Developers

Streamline your workflow with these top 5 free Notion templates for developers, covering bug tracking, design systems, web dev resources, and more.

5 Fun Public APIs to Use in Your Next Project

Discover 5 fun and useful public APIs for your next project, covering data on football, currency exchange, Pokémon, text-to-speech, and movies.

Building Your First Chrome Extension with HTML, CSS, and JS

Learn how to build your first Google Chrome extension from scratch using HTML, CSS, and JavaScript with this step-by-step tutorial on creating a calculator.

7 Best Practices for Securing Your GitHub Account

Learn essential security best practices for your GitHub account, including enabling 2FA, updating dependencies, reviewing PRs, and managing secrets.

How to Build a Login Page with Supabase Auth UI and Next.js

Learn how to quickly build a secure login and registration page in your Next.js app using Supabase Authentication and the pre-built Auth UI component.

7 Essential Developer Tools to Boost Your Productivity

Discover 7 essential developer tools to boost productivity, covering code search, documentation, backend services, AI coding assistants, and API testing.

Zero to Hero in Technical Writing: Making Consistent Income

Learn why developers should try technical writing and get tips on how to find compelling topics for your blog posts to build an audience and income.

5 Useful Developer Tools to Boost Your Workflow

Enhance your developer workflow with these 5 tools for productivity, command-line help, cron job management, time tracking, and free web dev education.

Understanding the CSS Position Property: A Visual Guide

Learn the CSS position property and its values—static, absolute, relative, fixed, and sticky—to control the layout of elements on your webpage.

8 Popular React UI Component Libraries

Discover the top React UI component libraries like Shadcn, Chakra UI, and Material UI to build beautiful and functional user interfaces more efficiently.

How to Build a Markdown Blog with Next.js, Supabase, and Chakra UI

Learn how to build a Markdown-rendered blog from scratch using Next.js, Supabase for the database and storage, and Chakra UI for styling.

5 Popular Websites to Practice Your Coding Skills

Sharpen your coding skills with these 5 popular websites for programming challenges, including Coderbyte, HackerRank, and Leetcode for interview prep.

How to Self-Host Umami Analytics with Supabase and Vercel

Learn how to install and self-host Umami, a privacy-focused analytics tool, by setting up a Supabase database and deploying the app to Vercel.

6 Essential Tools to Enhance Your Code Quality

Enhance your code quality with these essential developer tools for code search, linting, formatting, spell checking, bundle analysis, and git hooks.

6 Common Microservices Challenges and How to Solve Them

Explore common obstacles in microservices architecture and learn solutions for challenges like system integration, data management, security, and deployment.

Key Principles of AI Governance for Ethical and Responsible AI

Explore the key principles of AI governance for ethical and responsible development, including transparency, fairness, data privacy, and accountability.

7 Programming Books Every Developer Must Read

Explore 7 essential programming books that teach timeless principles of software development, including clean code, algorithms, and project management.

5 Essential Tools for Code Refactoring in 2026

Discover 5 essential code refactoring tools to improve code quality, manage technical debt, and enhance security with IDE extensions and web apps.

5 Time-Saving Tools Every Developer Should Use

Discover 5 time-saving tools for developers, including a code search engine, an AI assistant, free animations, a VS Code REST client, and a CSS inspector.

4 Best Platforms for Free Web App Deployment

Discover the top free platforms for deploying web applications, including Vercel, Netlify, Render, and GitHub Pages for both frontend and backend.

6 Essential GitHub Repositories to Learn Web3

Explore six essential GitHub repositories to kickstart your Web3 journey with free resources on blockchain, Solidity, DeFi, and developer roadmaps.

How to Find Open Source Projects to Contribute To

Find open-source projects and issues to contribute to with this guide on using GitHub search and dedicated platforms like Good First Issue and Code Triage.

6 Sorting Algorithms Every Programmer Should Know

Learn six essential sorting algorithms every programmer should know, including insertion, selection, heap, merge, quick, and counting sort, with examples.

An Introduction to FaaS with Supabase Edge Functions

Learn the fundamentals of Function as a Service (FaaS) and how to implement serverless functions using Supabase Edge Functions with this guide.

How to Build a Post Scheduler with React and Supabase Cron Jobs

Learn to build a post scheduler for dev.to using React and Supabase, leveraging its database, Edge Functions, and Cron Jobs for automated posting.

How to Create Skeleton Loading Animations in React

Learn how to create a modern skeleton loading animation in your React app using the react-loading-skeleton library with this step-by-step tutorial.

Awesome VS Code Extensions for Navigating Large Codebases

Boost your coding efficiency with these 5 must-have VS Code extensions for developers, covering code search, AI completion, Git integration, and more.

10+ Must-Subscribe Newsletters for Developers

Discover over 10 of the best newsletters for developers, covering JavaScript, Python, software leadership, and the latest tech news to keep you updated.

5 Best Websites for UI/UX Design Inspiration

Discover 5 essential websites for UI/UX design inspiration, including Dribbble, Figma Community, and Awwwards, to help you create engaging web designs.

5 Essential React Practices I Learned on the Job

Learn five essential React practices for building scalable and maintainable applications, covering code structure, API calls, state management, and testing.

How to Implement Loaders in React with Chakra UI

Learn how to implement various loading components like progress bars, spinners, and skeletons in your React app using the popular Chakra UI library.

10 Free Gumroad Ebooks Every Web Developer Should Read

Discover 10 free Gumroad ebooks for web developers covering essential tools, UI/UX design, roadmaps, cheatsheets, and coding guides to boost your skills.

Fixing Page Scroll Issues in Scrollable Shadcn/ui Popovers

Learn how to fix page scrolling when using a scrollable Popover in Shadcn/ui by stopping event bubbling with a simple fix.

5 Must-Know GitHub Repositories for Every Web Developer

Curated lists for learning, advanced JavaScript questions, design resources, beginner roadmaps from Microsoft, and a massive collection of free public APIs.

How to Build a Custom Input with Dropdown Component in Shadcn/ui

Learn how to build a reusable Input with Dropdown component using shadcn/ui primitives. This tutorial covers combining Input, Popover, and Command.

4 Useful Websites with Public APIs for Your Next Project

Discover 4 helpful websites that not only solve common problems but also offer public APIs for developers.

How to Create and Sell Notion Templates: A Developer's Guide

A developer's guide to selling digital products. Learn to find a niche, build valuable templates, market, sell, and maintain them with our practical tips.

Understanding Microservices Architecture Basics

Dive into the world of Microservices Architecture, the modern approach to building scalable and agile software.

5 Essential Tools for Web Developers

Discover another set of 5 essential tools every web developer should know—boost productivity, improve code quality, and streamline your development workflow.

7 Essential React Libraries for Every Project

Boost your React development workflow with these 7 essential libraries that simplify UI design, state management, routing, and boost overall productivity.

A Beginner's Guide to GitHub Actions for CI/CD

A beginner's guide to CI/CD with GitHub Actions. Learn to write YAML workflows, set up triggers, debug jobs, and automate tasks in your repository.

Top 5 Tools for Building AI-Powered React Applications

As AI continues to boom, React developers need the right tools to build intelligent applications. This guide covers the top 5 essential tools.

6 Awesome Productivity Tools for Developers

Boost your productivity with these six essential tools designed to streamline your workflow, enhance focus, and make development more efficient.

Boost Your Open Source Contributions: 5 Must-Have Tools

Discover 5 essential tools to debug issues, search large codebases, and streamline your workflow. This guide features Documatic, CodeTriage, GitPod, and more.

How to Build Your Own ChatGPT with Langchain, Supabase, and Node.js

Learn to build an AI app with our tutorial on using Langchain, Supabase for PDF embeddings, and a Node.js server to connect everything seamlessly.

5 Websites to Host Your Website For Free

After coding a website, you need hosting to make it public. This article lists and reviews five popular platforms where you can host your website for free.

How to Make Money with Technical Writing: A Comprehensive Guide

Learn to earn as a developer beyond a full-time job. Explore monetizing articles, selling digital products, affiliate marketing, paid collaborations, and more.

5 Awesome Tools and Resources for Web Developers

Discover a curated list of tools and websites designed to help web developers improve their productivity and workflow.

How to Build a Reading Progress Bar in React

Learn how to build a responsive reading progress bar for a blog website from scratch using only React, CSS, and JavaScript.

How to Build a Documentation Site with Docz

This tutorial covers setup, configuration, creating pages with MDX, and customizing your project, making it easy to document any tool or library.

5 Essential React Tools I Learned At My Job

Discover 7 essential React libraries that can transform your workflow, boost efficiency, and streamline development in a professional environment.

How does Elasticsearch works?

This article breaks down what it is, its key benefits like speed and scalability, and how it works through clusters, nodes, and shards.

Top 5 Tools to Understand Any Codebase Faster

This article explores several powerful tools that can help you visualize code, retrieve necessary information, and ultimately understand any codebase faster.

Debugging Techniques Every Developer Should Know

Solve errors more efficiently by mastering essential debugging techniques. This guide helps any developer find and fix bugs faster, regardless of language.

Top Websites to Practice Your Coding Skills in 2025

This article lists top websites where you can practice your coding skills by solving problems or playing coding games.

50+ Awesome tools for Web Developers

Master essential debugging techniques for any language or framework. Learn to efficiently identify and resolve errors to write better code and save time.

Building a Kanban Board with Drag and Drop in React

Learn how to build a drag-and-drop Kanban board, similar to those in JIRA or Trello, using Next.js, TailwindCSS, and the @dnd-kit library.

Effective Techniques for Code Review in Software Engineering

Boost code quality and collaboration with practical code review techniques for senior developers and OSS maintainers. Learn to improve developer experience.

What are the best platforms to write technical articles?

Explore top platforms for publishing technical articles—Dev.to, Hashnode, and personal blogs. Learn how to boost your reach and grow as a technical writer.

Improve Code Quality with These Tips and Best Practices

Level up your coding skills with our guide to writing clean, maintainable, and high-performance code using principles like KISS, DRY, and modular design.

Awesome Readme Examples for Writing better Readmes

Seamlessly connect GitHub with VS Code. Our step-by-step guide covers setup, integration, and essential Git commands to streamline your development workflow.

React Performance Optimization Techniques for Every Developer

Boost your React app's speed. Master performance optimization with hands-on examples covering code splitting, lazy loading, useMemo, debouncing, and more.

Searching Algorithms Every Programmer Should Know

Enhance your coding and problem-solving skills by mastering four essential search algorithms: Linear Search, Binary Search, DFS, and BFS. A must-know for every programmer.

How to Create an Awesome README File for Your Project

Write clear, engaging READMEs for your coding projects. Learn best practices, key components, and essential tools to make your documentation stand out.

Connect Your Github To VS Code

Learn how to seamlessly connect GitHub with VS Code in this step-by-step guide. Covers setup, integration, and essential Git commands to streamline your workflow.

Building Pagination in React with React Paginate

Learn how to build efficient and user-friendly pagination in React using React Paginate for better data navigation and performance.

Awesome SQL Code Review Tools for Developers

Discover the best tools to review, refactor, and analyze your SQL code for better performance, security, and maintainability.

🚀 20+ Java Open Source Projects to Contribute To

A curated list of over 20 Java-based open source projects for all levels, perfect for learning and contributing to the Java ecosystem.

How to Build a Custom Video Player in React

Build a custom React video player from scratch. This step-by-step guide covers essential controls like play/pause, time display, and an interactive timeline.

Awesome GitHub Repositories for Web Developer

Explore top GitHub repositories for web developers. Find tools, resources, and projects to boost your skills in frontend, backend, and full-stack dev.

Top 7 Things That Kill Developer Productivity

Discover the biggest obstacles to developer productivity and learn strategies to overcome them for better efficiency and creativity.

40+ Useful Resources for Mastering Web🎁

Unlock 40+ top resources to master web development! Learn HTML, CSS, JavaScript, frameworks, and more with these expert-recommended guides & tools.

GitHub Repos Essential for Every React Developer

Explore top React GitHub repositories to master React, from beginner to advanced levels.

Comparing The Top React Frameworks

Compare the top React frameworks to find the best one for your project. Explore features, performance, and use cases to make the right choice!

Top Developer Tools to Boost Productivity & Efficiency

Discover the best developer tools for coding, debugging, collaboration, and productivity. Boost efficiency with these must-have software & resources!

Building an Infinite Scroll Component in React

Learn how to implement an optimized infinite scrolling component in React with TMDB API, Axios, and debounce for smooth performance.

A Guide to Coding Standards to Improve Code Quality

Improve your code quality with essential coding standards, best practices, and tips for writing clean, readable, and maintainable code.

Free Awesome Notion Templates for Developers

Discover free Notion templates to enhance productivity and knowledge for developers, students, and lifelong learners.

5 Code Refactoring Techniques to Improve Your Code

Learn essential code refactoring techniques to improve code quality, readability, and performance in your development projects.

How to Build a React Music Player from Scratch

Learn how to build a fully functional music player using React. This beginner-friendly guide covers everything from audio controls to UI design!

The 4 Best ReactJS UI Frameworks You Should Know

Discover top ReactJS UI frameworks that accelerate development, ensure consistent design, and enhance user experience in your next web project.

Create Your First VR Scene Using A-Frame in Web

Learn how to create immersive VR experiences with A-Frame. This beginner's guide covers the basics to help you build your first WebVR project easily

GitHub Repos Essential for Every React Developer

Discover essential GitHub repositories for React developers to learn, improve, and master React. Perfect for beginners to advanced developers