The latest articles on DEV Community by Muhammad Abdullah (@peter_parker_f8027abee0ce). https://dev.to/peter_parker_f8027abee0ce https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4023964%2F3abf1bfc-948c-4def-b47e-c9cf07a5f192.png https://dev.to/peter_parker_f8027abee0ce en Muhammad Abdullah Fri, 10 Jul 2026 11:13:03 +0000 https://dev.to/peter_parker_f8027abee0ce/just-published-my-production-ready-dependency-free-omni-channel-storefront-template-built-p0j https://dev.to/peter_parker_f8027abee0ce/just-published-my-production-ready-dependency-free-omni-channel-storefront-template-built-p0j <div class="ltag__link--embedded"> <div class="crayons-story "> <a href="https://dev.to/peter_parker_f8027abee0ce/built-a-dual-theme-omni-channel-e-commerce-storefront-using-vanilla-js-tailwind-css-9-view-4fna" class="crayons-story__hidden-navigation-link">Built a Dual-Theme Omni-Channel E-Commerce Storefront using Vanilla JS &amp; Tailwind CSS</a> <div class="crayons-story__body crayons-story__body-full_post"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/peter_parker_f8027abee0ce" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4023964%2F3abf1bfc-948c-4def-b47e-c9cf07a5f192.png" alt="peter_parker_f8027abee0ce profile" class="crayons-avatar__image"> </a> </div> <div> <div> <a href="/peter_parker_f8027abee0ce" class="crayons-story__secondary fw-medium m:hidden"> Muhammad Abdullah </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> Muhammad Abdullah <div id="story-author-preview-content-4112989" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/peter_parker_f8027abee0ce" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4023964%2F3abf1bfc-948c-4def-b47e-c9cf07a5f192.png" class="crayons-avatar__image" alt=""> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Muhammad Abdullah</span> </a> </div> <div class="print-hidden"> Follow </div> <div class="author-preview-metadata-container"></div> </div> </div> </div> </div> <a href="https://dev.to/peter_parker_f8027abee0ce/built-a-dual-theme-omni-channel-e-commerce-storefront-using-vanilla-js-tailwind-css-9-view-4fna" class="crayons-story__tertiary fs-xs"><time>Jul 10</time><span class="time-ago-indicator-initial-placeholder"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title crayons-story__title-full_post"> <a href="https://dev.to/peter_parker_f8027abee0ce/built-a-dual-theme-omni-channel-e-commerce-storefront-using-vanilla-js-tailwind-css-9-view-4fna" id="article-link-4112989"> Built a Dual-Theme Omni-Channel E-Commerce Storefront using Vanilla JS &amp; Tailwind CSS </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/tailwindcss"><span class="crayons-tag__prefix">#</span>tailwindcss</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/opensource"><span class="crayons-tag__prefix">#</span>opensource</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/html"><span class="crayons-tag__prefix">#</span>html</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/peter_parker_f8027abee0ce/built-a-dual-theme-omni-channel-e-commerce-storefront-using-vanilla-js-tailwind-css-9-view-4fna#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"> 2<span class="hidden s:inline">&nbsp;comments</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <span class="bm-initial crayons-icon c-btn__icon"> </span> <span class="bm-success crayons-icon c-btn__icon"> </span> </div> </div> </div> </div> </div> </div> Muhammad Abdullah Fri, 10 Jul 2026 11:02:57 +0000 https://dev.to/peter_parker_f8027abee0ce/built-a-dual-theme-omni-channel-e-commerce-storefront-using-vanilla-js-tailwind-css-9-view-4fna https://dev.to/peter_parker_f8027abee0ce/built-a-dual-theme-omni-channel-e-commerce-storefront-using-vanilla-js-tailwind-css-9-view-4fna <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fqrohv52y0pwrvgjmui7w.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fqrohv52y0pwrvgjmui7w.png" alt=" " width="800" height="601"></a><br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fpn28x2qup843y86s9fun.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fpn28x2qup843y86s9fun.png" alt=" " width="800" height="601"></a><br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fz3rywt74vj4gfm70wra6.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fz3rywt74vj4gfm70wra6.png" alt=" " width="800" height="601"></a><br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fqunzrk9xwh5extgwotf6.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fqunzrk9xwh5extgwotf6.png" alt=" " width="800" height="1682"></a>Hey everyone,</p> <p>I recently built a highly modular, production-ready Omni-Channel E-Commerce Template using pure Vanilla JavaScript and Tailwind CSS (No heavy frameworks like React or Vue).</p> <p>Key Features:</p> <p>Dual Theme: Smooth Day/Night mode toggle.</p> <p>9+ Essential View States: Responsive product grids, single view, cart, and checkout flow.</p> <p>Interactive UI:custom filtering, and live form validation.</p> javascript tailwindcss opensource html