CINXE.COM
DEV Showcase - DEV Community
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>DEV Showcase - DEV Community</title> <meta name="last-updated" content="2025-04-08 15:21:10 UTC"> <meta name="user-signed-in" content="false"> <meta name="head-cached-at" content="1744125670"> <meta name="environment" content="production"> <link rel="stylesheet" href="https://assets.dev.to/assets/minimal-6f5c5ed9c571b36ab9c316526d7032b5a4c789f3a4c35503492eb03376615fca.css" media="all" id="main-minimal-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/views-1c703342dce6eac414f19ca7fd07bcf83cbe44088659758144e52e7fa1e92dd3.css" media="all" id="main-views-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/crayons-0f2fc85bc159498f8ae6fba58c460e6deba863d02d59dfa994c1954976ddb6cc.css" media="all" id="main-crayons-stylesheet" /> <script src="https://assets.dev.to/assets/base-b8bdff515245fe895f3035d77697afb35d5d7e114bdf68291667479d4b289751.js" defer="defer"></script> <script src="https://assets.dev.to/assets/application-7258612fccf5d56314a6e4ad1898b4f818f474c4bb3485e302428d489a769a17.js" defer="defer"></script> <script src="https://assets.dev.to/assets/baseInitializers-b74902d56433062a87f5f1ce74769baf2a1a698772f46952b0ac72bc95c4abfd.js" defer="defer"></script> <script src="https://assets.dev.to/assets/baseTracking-b6bf73e5ee66633e151e7d5b7c6bbccedfa4c59e3615be97b98c4c0f543ddae7.js" defer="defer"></script> <meta name="search-script" content="https://assets.dev.to/assets/Search-7dcdad3172ab4501a4598fe8b716c7a88146e79fd42256d36fb1b83e27bf77cf.js"> <link rel="canonical" href="https://dev.to/showcase" /> <meta name="description" content="DEV Showcase — DEV Community"> <meta name="keywords" content="software development, engineering, rails, javascript, ruby"> <meta property="og:type" content="article" /> <meta property="og:url" content="https://dev.to/showcase" /> <meta property="og:title" content="DEV Showcase — DEV Community" /> <meta property="og:image" content="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3otvb2z646ytpt1hl2rv.jpg"> <meta property="og:description" content="Showcasing the best products, companies, and open-source projects on DEV" /> <meta property="og:site_name" content="DEV Community" /> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@thepracticaldev"> <meta name="twitter:title" content="DEV Showcase — DEV Community"> <meta name="twitter:description" content="Showcasing the best products, companies, and open-source projects on DEV"> <meta name="twitter:image:src" content="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3otvb2z646ytpt1hl2rv.jpg"> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> <link rel="icon" type="image/x-icon" href="https://media2.dev.to/dynamic/image/width=32,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" /> <link rel="apple-touch-icon" href="https://media2.dev.to/dynamic/image/width=180,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png"> <link rel="apple-touch-icon" sizes="152x152" href="https://media2.dev.to/dynamic/image/width=152,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png"> <link rel="apple-touch-icon" sizes="180x180" href="https://media2.dev.to/dynamic/image/width=180,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png"> <link rel="apple-touch-icon" sizes="167x167" href="https://media2.dev.to/dynamic/image/width=167,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png"> <link href="https://media2.dev.to/dynamic/image/width=192,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" rel="icon" sizes="192x192" /> <link href="https://media2.dev.to/dynamic/image/width=128,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" rel="icon" sizes="128x128" /> <meta name="apple-mobile-web-app-title" content="dev.to"> <meta name="application-name" content="dev.to"> <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"> <meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)"> <link rel="search" href="https://dev.to/open-search.xml" type="application/opensearchdescription+xml" title="DEV Community" /> <meta property="forem:name" content="DEV Community" /> <meta property="forem:logo" content="https://media2.dev.to/dynamic/image/width=512,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" /> <meta property="forem:domain" content="dev.to" /> </head> <body class="sans-serif-article-body default-header" data-user-status="logged-out" data-community-name="DEV Community" data-subscription-icon="https://assets.dev.to/assets/subscription-icon-805dfa7ac7dd660f07ed8d654877270825b07a92a03841aa99a1093bd00431b2.png" data-locale="en" data-honeybadger-key="hbp_nqu4Y66HuEKlD6YRGssZuRQnPOjDm50J8Zkr" data-deployed-at="2025-04-08T14:55:14Z" data-latest-commit-id="5a0700de76701df15587c62080964d2cb5e88158" data-ga-tracking="UA-71991109-1" data-cookie-banner-user-context="logged_out_only" data-cookie-banner-platform-context="off" data-algolia-id="PRSOBFP46H" data-algolia-search-key="9aa7d31610cba78851c9b1f63776a9dd" data-algolia-display="true" data-dynamic-url-component="bmar11" data-ga4-tracking-id="G-TYEM8Y3JN3"> <script> if (navigator.userAgent === 'ForemWebView/1' || window.frameElement) { document.body.classList.add("hidden-shell"); } </script> <link rel="stylesheet" href="https://assets.dev.to/assets/minimal-6f5c5ed9c571b36ab9c316526d7032b5a4c789f3a4c35503492eb03376615fca.css" media="all" id="secondary-minimal-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/views-1c703342dce6eac414f19ca7fd07bcf83cbe44088659758144e52e7fa1e92dd3.css" media="all" id="secondary-views-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/crayons-0f2fc85bc159498f8ae6fba58c460e6deba863d02d59dfa994c1954976ddb6cc.css" media="all" id="secondary-crayons-stylesheet" /> <div id="body-styles"> <style> :root { --accent-brand-lighter-rgb: 80, 99, 301; --accent-brand-rgb: 59, 73, 223; --accent-brand-darker-rgb: 47, 58, 178; } </style> </div> <div id="audiocontent" data-podcast=""> </div> <div class="navigation-progress" id="navigation-progress"></div> <header id="topbar" class="crayons-header topbar print-hidden"> <span id="route-change-target" tabindex="-1"></span> <a href="#main-content" class="skip-content-link">Skip to content</a> <div class="crayons-header__container"> <span class="inline-block m:hidden "> <button class="c-btn c-btn--icon-alone js-hamburger-trigger mx-2"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a5o6hnexowoo0ruevk8zefs8dvagg0yu" class="crayons-icon"><title id="a5o6hnexowoo0ruevk8zefs8dvagg0yu">Navigation menu</title> <path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"></path> </svg> </button> </span> <a href="/" class="site-logo" aria-label="DEV Community Home"> <img class="site-logo__img" src="https://media2.dev.to/dynamic/image/quality=100/https://dev-to-uploads.s3.amazonaws.com/uploads/logos/resized_logo_UQww2soKuUsjaOGNB38o.png" style="aspect-ratio: 10 / 8" alt="DEV Community"> </a> <div class="crayons-header--search js-search-form" id="header-search"> <form accept-charset="UTF-8" method="get" action="/search" role="search"> <div class="crayons-fields crayons-fields--horizontal"> <div class="crayons-field flex-1 relative"> <input id="search-input" class="crayons-header--search-input crayons-textfield js-search-input" type="text" id="nav-search" name="q" placeholder="Search..." autocomplete="off" /> <button type="submit" aria-label="Search" class="c-btn c-btn--icon-alone absolute inset-px right-auto mt-0 py-0"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="alysivji6l8oc2zmwitws25nhbqgnj80" aria-hidden="true" class="crayons-icon"><title id="alysivji6l8oc2zmwitws25nhbqgnj80">Search</title> <path d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0111 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 01-1.969 5.617zm-2.006-.742A6.977 6.977 0 0018 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 004.875-1.975l.15-.15z"></path> </svg> </button> <a class="crayons-header--search-brand-indicator" href="https://www.algolia.com/developers/?utm_source=devto&utm_medium=referral" target="_blank" rel="noopener noreferrer"> Powered by <svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" width="24" height="24" viewBox="0 0 500 500.34" role="img" aria-labelledby="aevafl60tmznrvd5u0ns4p23u5bj63nd" aria-hidden="true" class="crayons-icon"><title id="aevafl60tmznrvd5u0ns4p23u5bj63nd">Search</title> <defs></defs><path class="cls-1" d="M250,0C113.38,0,2,110.16,.03,246.32c-2,138.29,110.19,252.87,248.49,253.67,42.71,.25,83.85-10.2,120.38-30.05,3.56-1.93,4.11-6.83,1.08-9.52l-23.39-20.74c-4.75-4.22-11.52-5.41-17.37-2.92-25.5,10.85-53.21,16.39-81.76,16.04-111.75-1.37-202.04-94.35-200.26-206.1,1.76-110.33,92.06-199.55,202.8-199.55h202.83V407.68l-115.08-102.25c-3.72-3.31-9.43-2.66-12.43,1.31-18.47,24.46-48.56,39.67-81.98,37.36-46.36-3.2-83.92-40.52-87.4-86.86-4.15-55.28,39.65-101.58,94.07-101.58,49.21,0,89.74,37.88,93.97,86.01,.38,4.28,2.31,8.28,5.53,11.13l29.97,26.57c3.4,3.01,8.8,1.17,9.63-3.3,2.16-11.55,2.92-23.6,2.07-35.95-4.83-70.39-61.84-127.01-132.26-131.35-80.73-4.98-148.23,58.18-150.37,137.35-2.09,77.15,61.12,143.66,138.28,145.36,32.21,.71,62.07-9.42,86.2-26.97l150.36,133.29c6.45,5.71,16.62,1.14,16.62-7.48V9.49C500,4.25,495.75,0,490.51,0H250Z"></path> </svg> Algolia </a> </div> </div> </form> </div> <div class="flex items-center h-100 ml-auto"> <div class="flex" id="authentication-top-nav-actions"> <span class="hidden m:block"> <a href="https://dev.to/enter" class="c-link c-link--block mr-2 whitespace-nowrap ml-auto" data-no-instant> Log in </a> </span> <a href="https://dev.to/enter?state=new-user" data-tracking-id="ca_top_nav" data-tracking-source="top_navbar" class="c-cta c-cta--branded whitespace-nowrap mr-2" data-no-instant> Create account </a> </div> </div> </div> </header> <div class="hamburger"> <div class="hamburger__content"> <header class="hamburger__content__header"> <h2 class="fs-l fw-bold flex-1 break-word lh-tight">DEV Community</h2> <button class="c-btn c-btn--icon-alone js-hamburger-trigger shrink-0" aria-label="Close"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a6ffryd1hr0ptk1zgj2lm1kkv8yz29n1" aria-hidden="true" class="crayons-icon c-btn__icon"><title id="a6ffryd1hr0ptk1zgj2lm1kkv8yz29n1">Close</title><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z"></path></svg> </button> </header> <div class="p-2 js-navigation-links-container" id="authentication-hamburger-actions"> </div> </div> <div class="hamburger__overlay js-hamburger-trigger"></div> </div> <div id="active-broadcast" class="broadcast-wrapper"></div> <div id="page-content" class="wrapper stories stories-show pageslug-showcase" data-current-page="stories-index"> <div id="page-content-inner" data-internal-nav="false"> <div id="page-route-change" class="screen-reader-only" aria-live="polite" aria-atomic="true"></div> <script src="https://assets.dev.to/assets/homePage-11cb3cd42b25bc0cebb3d5fe6dee09d50f349acd6838a659d86686c1245669e2.js" defer="defer"></script> <main id="main-content"> <link data-no-instant id="pages-css" href="https://dev.to/page/assets_stylesheets_pages" rel="stylesheet"> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> <style id="transition-reset"> .notransition *, .notransition *:before, .notransition *:after { transition: none !important; animation: none !important; } </style> <div id="custom" class="twp notransition tw-text-base tw-leading-normal tw-text-black dark:tw-text-zinc-50" data-no-instant> <script> // set tw dark theme when DEV dark theme detected if (document.body.classList.contains('dark-theme')) { document.getElementById('custom').classList.add('tw-dark') } function loadCss() { const cssLink = document.getElementById('pages-css'); const customElement = document.getElementById('custom'); // Hide the element initially customElement.style.visibility = 'hidden'; // Check if the stylesheet is already loaded if (cssLink.sheet) { customElement.style.visibility = 'visible'; customElement.classList.remove('notransition'); } else { // Add the load event listener cssLink.addEventListener('load', function () { customElement.style.visibility = 'visible'; customElement.classList.remove('notransition'); }); // Fallback to timeout setTimeout(() => { customElement.style.visibility = 'visible'; customElement.classList.remove('notransition'); }, 1000); } } if (typeof InstantClick !== "undefined") { InstantClick.on('change', () => { loadCss(); }); } else { loadCss(); } </script> <div x-data="{open: false, target: '', success: false}" @keyup.escape="open = false" x-transition:enter="tw-transition tw-ease-out tw-duration-300" x-transition:enter-start="tw-opacity-0" x-transition:enter-end="tw-opacity-100" x-transition:leave="tw-transition tw-ease-in tw-duration-200" x-transition:leave-start="tw-opacity-100" x-transition:leave-end="tw-opacity-0"> <style> #custom { background-color: #fff; } #custom.tw-dark { background-color: #000; } </style> <div class="tw-container xl:tw-max-w-6xl tw-m-auto tw-space-y-6 tw-p-5 tw-pb-12"> <div class="tw-space-y-4"> <section class="tw-space-y-2 tw-mb-12"> <h1 class="tw-text-black dark:tw-text-zinc-50 tw-font-bold tw-text-4xl tw-leading-normal lg:tw-text-5xl lg:tw-leading-normal tw-text-center"> DEV Showcase </h1> <p class="tw-text-black dark:tw-text-zinc-200 tw-text-xl tw-text-center"> Showcasing the best products, companies, and open-source projects on DEV </p> <p class="tw-text-zinc-700 dark:tw-text-zinc-200 tw-text-lg tw-text-center"> Have something you'd like to showcase? <button type="button" class="tw-font-medium tw-text-dolphin hover:tw-text-dolphin-dark tw-ease-in-out tw-duration-300" @click="open = true; target = 'get-in-touch-text-link'">Get in touch.</button></p> <div class="tw-flex tw-items-start tw-gap-2 tw-text-black tw-rounded-md tw-border-2 tw-border-dolphin tw-p-4 tw-font-medium tw-italic tw-mx-12 !tw-mt-6"> <svg xmlns="http://www.w3.org/2000/svg" class="tw-flex-shrink-0 tw-w-8 tw-text-black dark:tw-text-zinc-50" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z"> </path> </svg> <p class="tw-text-black dark:tw-text-zinc-50">DEV Showcase is a new directory of great companies, products and projects that support DEV. We're working with new and existing partners to add more to the Showcase, so come back soon to see more great tools in the near future. </p> </div> </section> <section> <div class="tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-4"> <a class="tw-flex tw-flex-col tw-justify-between tw-items-start tw-border tw-border-zinc-300 dark:tw-border-zinc-700 tw-border-solid tw-rounded-md tw-p-4 hover:tw-border-dolphin tw-duration-300 tw-ease-in-out hover:tw-shadow-sm tw-group" href="https://dev.to/showcase/bosch " aria-label="Find out more about Work #LikeABosch"> <div> <div class="tw-flex tw-flex-col tw-w-full tw-justify-center tw-items-center tw-mb-4 tw-h-40 tw-overflow-hidden tw-rounded-md" style="background-color: #fff"> <img style="padding: 2rem" src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i1o5358yh5z136x4r8kc.png" alt="Work #LikeABosch Logo"> </div> <h3 class="tw-font-semibold tw-text-lg tw-mb-2 tw-text-black dark:tw-text-zinc-50 group-hover:tw-text-dolphin"> Work #LikeABosch</h3> <p class="tw-mb-3 tw-text-black dark:tw-text-zinc-50">At Bosch, we shape the future by inventing high-quality technologies and services that spark enthusiasm and enrich people’s lives.</p> </div> <div class="tw-flex tw-w-full tw-justify-end tw-place-self-end tw-text-zinc-700 group-hover:tw-text-dolphin"> <svg class="tw-w-6" viewBox="0 0 19 17" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M15.171 9.49897L0.498914 9.49891L0.500003 7.5L9.08455 7.49892L15.1703 7.49857L9.80686 2.13517L11.2211 0.720952L18.9992 8.49913L11.2211 16.2773L9.80686 14.8631L15.171 9.49897Z" fill="currentColor"></path> </svg> </div> </a> <a class="tw-flex tw-flex-col tw-justify-between tw-items-start tw-border tw-border-zinc-300 dark:tw-border-zinc-700 tw-border-solid tw-rounded-md tw-p-4 hover:tw-border-dolphin tw-duration-300 tw-ease-in-out hover:tw-shadow-sm tw-group" href="https://dev.to/showcase/brightdata " aria-label="Find out more about Bright Data"> <div> <div class="tw-flex tw-flex-col tw-w-full tw-justify-center tw-items-center tw-mb-4 tw-h-40 tw-overflow-hidden tw-rounded-md" style="background-color: "> <img style="padding: 2rem" src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y8tfckerp2p67loojyie.png" alt="Bright Data Logo"> </div> <h3 class="tw-font-semibold tw-text-lg tw-mb-2 tw-text-black dark:tw-text-zinc-50 group-hover:tw-text-dolphin"> Bright Data</h3> <p class="tw-mb-3 tw-text-black dark:tw-text-zinc-50">Bright Data is a leading web data platform that helps developers collect public web data reliably and at scale.</p> </div> <div class="tw-flex tw-w-full tw-justify-end tw-place-self-end tw-text-zinc-700 group-hover:tw-text-dolphin"> <svg class="tw-w-6" viewBox="0 0 19 17" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M15.171 9.49897L0.498914 9.49891L0.500003 7.5L9.08455 7.49892L15.1703 7.49857L9.80686 2.13517L11.2211 0.720952L18.9992 8.49913L11.2211 16.2773L9.80686 14.8631L15.171 9.49897Z" fill="currentColor"></path> </svg> </div> </a> <a class="tw-flex tw-flex-col tw-justify-between tw-items-start tw-border tw-border-zinc-300 dark:tw-border-zinc-700 tw-border-solid tw-rounded-md tw-p-4 hover:tw-border-dolphin tw-duration-300 tw-ease-in-out hover:tw-shadow-sm tw-group" href="https://dev.to/showcase/pieces " aria-label="Find out more about Pieces for Developers"> <div> <div class="tw-flex tw-flex-col tw-w-full tw-justify-center tw-items-center tw-mb-4 tw-h-40 tw-overflow-hidden tw-rounded-md" style="background-color: #000"> <img style="padding: 4rem" src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4afhm5klobc4cc4s4fd7.png" alt="Pieces for Developers Logo"> </div> <h3 class="tw-font-semibold tw-text-lg tw-mb-2 tw-text-black dark:tw-text-zinc-50 group-hover:tw-text-dolphin"> Pieces for Developers</h3> <p class="tw-mb-3 tw-text-black dark:tw-text-zinc-50">Pieces is your AI-enabled productivity tool designed to supercharge developer efficiency.</p> </div> <div class="tw-flex tw-w-full tw-justify-end tw-place-self-end tw-text-zinc-700 group-hover:tw-text-dolphin"> <svg class="tw-w-6" viewBox="0 0 19 17" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M15.171 9.49897L0.498914 9.49891L0.500003 7.5L9.08455 7.49892L15.1703 7.49857L9.80686 2.13517L11.2211 0.720952L18.9992 8.49913L11.2211 16.2773L9.80686 14.8631L15.171 9.49897Z" fill="currentColor"></path> </svg> </div> </a> <a class="tw-flex tw-flex-col tw-justify-between tw-items-start tw-border tw-border-zinc-300 dark:tw-border-zinc-700 tw-border-solid tw-rounded-md tw-p-4 hover:tw-border-dolphin tw-duration-300 tw-ease-in-out hover:tw-shadow-sm tw-group" href="https://dev.to/showcase/cloudinary " aria-label="Find out more about Cloudinary: The Image and Video API for Developers"> <div> <div class="tw-flex tw-flex-col tw-w-full tw-justify-center tw-items-center tw-mb-4 tw-h-40 tw-overflow-hidden tw-rounded-md" style="background-color: #0e1a27"> <img style="padding: 2rem" src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zvlevl5oyftaclozd3q6.png" alt="Cloudinary: The Image and Video API for Developers Logo"> </div> <h3 class="tw-font-semibold tw-text-lg tw-mb-2 tw-text-black dark:tw-text-zinc-50 group-hover:tw-text-dolphin"> Cloudinary: The Image and Video API for Developers</h3> <p class="tw-mb-3 tw-text-black dark:tw-text-zinc-50">Cloudinary is an API-first, cloud-based solution that helps automate all processes related to managing images and videos for the web.</p> </div> <div class="tw-flex tw-w-full tw-justify-end tw-place-self-end tw-text-zinc-700 group-hover:tw-text-dolphin"> <svg class="tw-w-6" viewBox="0 0 19 17" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M15.171 9.49897L0.498914 9.49891L0.500003 7.5L9.08455 7.49892L15.1703 7.49857L9.80686 2.13517L11.2211 0.720952L18.9992 8.49913L11.2211 16.2773L9.80686 14.8631L15.171 9.49897Z" fill="currentColor"></path> </svg> </div> </a> <a class="tw-flex tw-flex-col tw-justify-between tw-items-start tw-border tw-border-zinc-300 dark:tw-border-zinc-700 tw-border-solid tw-rounded-md tw-p-4 hover:tw-border-dolphin tw-duration-300 tw-ease-in-out hover:tw-shadow-sm tw-group" href="https://dev.to/showcase/stellar " aria-label="Find out more about Stellar Network"> <div> <div class="tw-flex tw-flex-col tw-w-full tw-justify-center tw-items-center tw-mb-4 tw-h-40 tw-overflow-hidden tw-rounded-md" style="background-color: #ffdb01"> <img style="padding: 2rem" src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w6xroz491pniiw3zo0b7.png" alt="Stellar Network Logo"> </div> <h3 class="tw-font-semibold tw-text-lg tw-mb-2 tw-text-black dark:tw-text-zinc-50 group-hover:tw-text-dolphin"> Stellar Network</h3> <p class="tw-mb-3 tw-text-black dark:tw-text-zinc-50">Stellar makes it possible to create, send, and trade digital representations of all forms of money: dollars, pesos, bitcoin, pretty much anything.</p> </div> <div class="tw-flex tw-w-full tw-justify-end tw-place-self-end tw-text-zinc-700 group-hover:tw-text-dolphin"> <svg class="tw-w-6" viewBox="0 0 19 17" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M15.171 9.49897L0.498914 9.49891L0.500003 7.5L9.08455 7.49892L15.1703 7.49857L9.80686 2.13517L11.2211 0.720952L18.9992 8.49913L11.2211 16.2773L9.80686 14.8631L15.171 9.49897Z" fill="currentColor"></path> </svg> </div> </a> </div> </section> </div> </div> <div class="tw-fixed tw-inset-0 tw-bg-zinc-600 tw-bg-opacity-50 tw-flex tw-items-center tw-justify-center tw-p-4 tw-z-[100]" x-show="open" x-cloak> <div class="tw-bg-white dark:tw-bg-zinc-900 tw-p-6 tw-rounded-md tw-shadow-lg tw-max-w-md tw-w-full" @click.outside="open = false" x-show="open" x-cloak x-transition role="dialog" aria-modal="true" aria-labelledby="modal-title"> <div class="tw-flex tw-justify-end tw-w-full"> <button class="tw-text-black dark:tw-text-zinc-50 tw-text-xl tw-rounded tw-leading-0" @click="open = false" type="button" aria-label="Close"> <svg class="dark:tw-hidden tw-w-8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 10.586L16.95 5.636L18.364 7.05L13.414 12L18.364 16.95L16.95 18.364L12 13.414L7.05 18.364L5.636 16.95L10.586 12L5.636 7.05L7.05 5.636L12 10.586Z" fill="black" ></path> </svg> <svg class="tw-hidden dark:tw-block tw-w-8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 10.586L16.95 5.636L18.364 7.05L13.414 12L18.364 16.95L16.95 18.364L12 13.414L7.05 18.364L5.636 16.95L10.586 12L5.636 7.05L7.05 5.636L12 10.586Z" fill="white" ></path> </svg> </button> </div> <div x-show="!success"> <h2 id="modal-title" class="tw-text-black dark:tw-text-zinc-50 tw-text-3xl tw-font-bold tw-mb-2 tw-font-system">Let's Get Started</h2> <p class="tw-text-zinc-600 dark:tw-text-zinc-300 tw-text-lg tw-mb-6 tw-font-system" style="line-height: 1.6;"> We look forward to discussing options to help your organization reach and engage the amazing community here at DEV. </p> <form x-ref="formcarryForm" class="tw-mt-6 tw-font-system" action="https://formcarry.com/s/LdscUh8JH9Q" enctype="multipart/form-data" x-data="contactForm()" @submit.prevent="submitForm"> <div class="tw-mb-4"> <label for="name" class="tw-block tw-text-base tw-font-medium tw-text-zinc-700 dark:tw-text-zinc-300 tw-mb-1"> Name </label> <input type="text" id="name" name="name" class="tw-bg-white dark:tw-bg-zinc-900 tw-p-3 tw-border tw-border-solid tw-border-zinc-300 dark:tw-border-zinc-700 tw-rounded-lg tw-w-full tw-transition-colors focus:tw-border-dolphin dark:focus:tw-border-dolphin focus:tw-ring-1 focus:tw-ring-dolphin dark:focus:tw-ring-dolphin focus:tw-outline-none" aria-label="Name" required> <div class="tw-text-red-500 tw-text-sm tw-mt-1" x-show="errors.name" x-text="errors.name"></div> </div> <div class="tw-mb-4"> <label for="email" class="tw-block tw-text-base tw-font-medium tw-text-zinc-700 dark:tw-text-zinc-300 tw-mb-1"> Work Email </label> <input type="email" id="email" name="email" class="tw-bg-white dark:tw-bg-zinc-900 tw-p-3 tw-border tw-border-solid tw-border-zinc-300 dark:tw-border-zinc-700 tw-rounded-lg tw-w-full tw-transition-colors focus:tw-border-dolphin dark:focus:tw-border-dolphin focus:tw-ring-1 focus:tw-ring-dolphin dark:focus:tw-ring-dolphin focus:tw-outline-none" aria-label="Email" x-model="email" required> <div class="tw-text-red-500 tw-text-sm tw-mt-1" x-show="errors.email" x-text="errors.email"></div> </div> <div class="tw-mb-4"> <label for="jobTitle" class="tw-block tw-text-base tw-font-medium tw-text-zinc-700 dark:tw-text-zinc-300 tw-mb-1"> Job Title </label> <input type="text" id="jobTitle" name="jobTitle" class="tw-bg-white dark:tw-bg-zinc-900 tw-p-3 tw-border tw-border-solid tw-border-zinc-300 dark:tw-border-zinc-700 tw-rounded-lg tw-w-full tw-transition-colors focus:tw-border-dolphin dark:focus:tw-border-dolphin focus:tw-ring-1 focus:tw-ring-dolphin dark:focus:tw-ring-dolphin focus:tw-outline-none" aria-label="Job Title" required> <div class="tw-text-red-500 tw-text-sm tw-mt-1" x-show="errors.jobTitle" x-text="errors.jobTitle"></div> </div> <div class="tw-mb-6"> <label for="company" class="tw-block tw-text-base tw-font-medium tw-text-zinc-700 dark:tw-text-zinc-300 tw-mb-1"> Company </label> <input type="text" id="company" name="company" class="tw-bg-white dark:tw-bg-zinc-900 tw-p-3 tw-border tw-border-solid tw-border-zinc-300 dark:tw-border-zinc-700 tw-rounded-lg tw-w-full tw-transition-colors focus:tw-border-dolphin dark:focus:tw-border-dolphin focus:tw-ring-1 focus:tw-ring-dolphin dark:focus:tw-ring-dolphin focus:tw-outline-none" aria-label="Company" required> <div class="tw-text-red-500 tw-text-sm tw-mt-1" x-show="errors.company" x-text="errors.company"></div> </div> <button type="submit" class="tw-w-full tw-bg-dolphin hover:tw-bg-dolphin-dark tw-text-white tw-font-semibold tw-text-md tw-px-6 tw-py-3 tw-rounded-lg tw-transition-colors tw-duration-200 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-offset-2 focus:tw-ring-dolphin"> Get in Touch </button> </form> </div> <div x-show="success" class="tw-text-center tw-py-8 tw-font-system"> <svg class="tw-w-16 tw-h-16 tw-mx-auto tw-mb-4 tw-text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path> </svg> <p class="tw-text-xl tw-font-bold tw-text-zinc-800 dark:tw-text-zinc-100 tw-mb-2">Thanks for getting in touch!</p> <p class="tw-text-zinc-600 dark:tw-text-zinc-300">We'll reach out to you shortly.</p> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script> function contactForm() { return { email: '', errors: { name: '', email: '', company: '', jobTitle: '' }, isValidForm() { this.errors = { name: this.$refs.formcarryForm.name.validity.valid ? '' : 'Name is required', email: this.$refs.formcarryForm.email.validity.valid ? '' : 'Valid email is required', company: this.$refs.formcarryForm.company.validity.valid ? '' : 'Company is required', jobTitle: this.$refs.formcarryForm.jobTitle.validity.valid ? '' : 'Job title is required' }; return Object.values(this.errors).every(error => error === ''); }, submitForm() { if (!this.isValidForm()) { return; } const form = this.$refs.formcarryForm; const action = form.getAttribute('action'); $.ajax({ type: 'POST', url: action, data: new FormData(form), dataType: 'json', processData: false, contentType: false, success: response => { if (response.status === 'success') { this.success = true; this.open = true; form.reset(); } else { console.error('Form submission error:', response); this.errors.message = response.message || 'An error occurred while submitting the form'; } }, error: (jqXHR, textStatus, errorThrown) => { console.error('AJAX error:', textStatus, errorThrown); this.errors.message = 'Failed to submit form. Please try again later.'; }, }).catch(error => { console.error('Unhandled error:', error); this.errors.message = 'An unexpected error occurred'; }); }, }; } </script> <style> .tw-font-system { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, Cantarell, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } </style> <script> window.addEventListener('unhandledrejection', event => { // Prevent the default error logging event.preventDefault(); // Log the error in a controlled way console.warn('Promise rejection handled:', event.reason); // If the error is from a cancelled transition, ignore it if (event.reason?.isFromCancelledTransition) { return; } // Handle other types of errors appropriately // You could show a user-friendly message or take other actions }); </script> </div> </main> <div class="js-billboard-container pb-4 crayons-layout__comments-billboard" data-async-url="/bmar11/page_fixed_bottom?page_id=526"></div> <script src="https://assets.dev.to/assets/billboard-818c196f17931002334ea0a9f5a2abea9e2afb2d59259a9b9102ffb07206df72.js" defer="defer"></script> <div id="runtime-banner-container"></div> </div> </div> <footer id="footer" class="crayons-footer print-hidden"> <div id="footer-container" class="crayons-footer__container"> <style> .long-bb-body { max-height: calc(100vh - 200px); overflow: hidden; } .long-bb-bottom { height: 180px; background: linear-gradient(to top, var(--card-bg), transparent); margin-top: -180px; position:relative; z-index: 5; } </style> <div style="" data-display-unit data-id="146443" data-category-click="click" data-category-impression="impression" data-context-type="home" data-special="nothing" data-article-id="" data-type-of="in_house"> <p style="font-weight: bold;margin-bottom: 10px"> Thank you to our Diamond Sponsor <a href="https://neon.tech/?bb=146443">Neon</a> for supporting our community. </p> </div> <p class="fs-s crayons-footer__description"> <a class="c-link c-link--branded fw-medium" aria-label="DEV Community Home" href="/">DEV Community</a> — A constructive and inclusive social network for software developers. With you every step of your journey. </p> <ul class="footer__nav-links flex gap-2 justify-center flex-wrap fs-s p-0" style="" /> <li class="footer__nav-link flex items-center"> <a href="/"> Home </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/++"> DEV++ </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/readinglist"> Reading List </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/pod"> Podcasts </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/videos"> Videos </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/tags"> Tags </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/help"> DEV Help </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="https://shop.forem.com/"> Forem Shop </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/advertise"> Advertise on DEV </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/challenges"> DEV Challenges </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/showcase"> DEV Showcase </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/about"> About </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/contact"> Contact </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/free-postgres-database-tier"> Free Postgres Database </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/software-comparisons"> Software comparisons </a> <span class="dot ml-2"></span> </li> </ul> <ul class="footer__nav-links flex gap-2 justify-center flex-wrap fs-s p-0" style="" /> <li class="footer__nav-link flex items-center"> <a href="/code-of-conduct"> Code of Conduct </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/privacy"> Privacy Policy </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/terms"> Terms of use </a> <span class="dot ml-2"></span> </li> </ul> <div class="fs-s"> <p>Built on <a class="c-link c-link--branded" target="_blank" rel="noopener" href="https://www.forem.com">Forem</a> — the <a target="_blank" rel="noopener" class="c-link c-link--branded" href="https://dev.to/t/opensource">open source</a> software that powers <a target="_blank" rel="noopener" class="c-link c-link--branded" href="https://dev.to">DEV</a> and other inclusive communities.</p> <p>Made with love and <a target="_blank" rel="noopener" class="c-link c-link--branded" href="https://dev.to/t/rails">Ruby on Rails</a>. DEV Community <span title="copyright">©</span> 2016 - 2025.</p> </div> </div> </footer> <div id="snack-zone"></div> <div id="global-signup-modal" class="authentication-modal hidden"> <div class="authentication-modal__container"> <figure class="authentication-modal__image-container"> <img class="authentication-modal__image" src="https://media2.dev.to/dynamic/image/width=190,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" alt="DEV Community" loading="lazy" /> </figure> <div class="authentication-modal__content"> <p class="authentication-modal__description"> We're a place where coders share, stay up-to-date and grow their careers. </p> </div> <div class="authentication-modal__actions"> <a href="/enter" class="crayons-btn" aria-label="Log in" data-no-instant> Log in </a> <a href="/enter?state=new-user" class="crayons-btn crayons-btn--ghost-brand js-global-signup-modal__create-account" aria-label="Create new account" data-no-instant> Create account </a> </div> </div> </div> <script src="https://assets.dev.to/assets/signupModalShortcuts-0b25469b985100a01e94cbd7fccaf7f0a4d776e129aac65c766aa32cb28ab29a.js" defer="defer"></script> <div id="cookie-consent"></div> <div id="i18n-translations" data-translations="{"en":{"core":{"add_comment":"Add comment","beta":"beta","comment":"Comment","copy_link":"Copy link","edit_profile":"Edit profile","follow":"Follow","follow_back":"Follow back","following":"Following","like":"Like","loading":"loading...","reaction":"Reaction","report_abuse":"Report abuse","search":"Search","success_settings":"Successfully updated settings.","counted_organization":{"one":"%{count} organization","other":"%{count} organizations"},"counted_user":{"one":"%{count} person","other":"%{count} people"},"not_following":"You're not following anyone","following_everyone":"You're following %{details} (everyone)","you_are_following":"You're following","and":"and"}}}"></div> <div id="reaction-category-resources" class="hidden" aria-hidden="true"> <img data-name="Like" data-slug="like" data-position="1" src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> <img data-name="Unicorn" data-slug="unicorn" data-position="2" src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> <img data-name="Exploding Head" data-slug="exploding_head" data-position="3" src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> <img data-name="Raised Hands" data-slug="raised_hands" data-position="4" src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> <img data-name="Fire" data-slug="fire" data-position="5" src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </div> <script> var userSignedIn = false; if (document.readyState === 'complete' || document.readyState === 'interactive') { initAuth(); } else { document.addEventListener('DOMContentLoaded', initAuth); } function initAuth() { var paramToken = new URLSearchParams(window.location.search).get('jwt'); if (paramToken && !userSignedIn) { authenticateUser(paramToken); } else { var iframe = document.createElement('iframe'); iframe.style.display = 'none'; iframe.src = 'https://forem.com/auth_pass/iframe'; document.body.appendChild(iframe); window.addEventListener('message', function(event) { if (event.origin !== 'https://forem.com' && event.origin !== window.location.origin) { return; } var data = event.data; if (data.authenticated && !userSignedIn) { authenticateUser(data.token); } else if(data.authenticated && window.ReactNativeWebView && window.ReactNativeWebView.postMessage) { window.ReactNativeWebView.postMessage(JSON.stringify({ action: 'login', token: data.token, })); } }); } function authenticateUser(token) { fetch('/auth_pass/token_login', { method: 'POST', credentials: 'include', headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': getMetaContent('csrf-token'), }, body: JSON.stringify({ token: token }), }) .then(function(response) { return response.json(); }) .then(function(data) { if (data.success) { if (document.head.querySelector('meta[name="user-signed-in"][content="false"]')) { // Reload the page to update the user's state location.reload(); } } }) .catch(function(error) { console.error('Error during authentication:', error); }); } function getMetaContent(name) { var element = document.querySelector('meta[name="' + name + '"]'); return element ? element.getAttribute('content') : ''; } } </script> </body> </html>