DEV Community: steven

I’m 17, practicing "Vibe Coding" with Vanilla JS, and built a pricing component for backend devs.

steven — Thu, 04 Jun 2026 00:47:14 +0000

Hi,

I’m a backend-first developer. Every time I build a micro-SaaS with Go or Node, I run into the same wall: the logic is solid, but the frontend looks terrible. I used to spend days configuring React or fighting shadcn dependencies just to get a simple pricing section working.

So, I decided to do some "Vibe Coding." No frameworks. No heavy node_modules to break next year. Just clean Semantic HTML5, Tailwind CSS via CDN, and pure Vanilla JS.

I built a premium Dark Tech billing component. It has a smooth toggle switch (Monthly/Yearly) and interactive loading states for the buttons.

It takes less than 5 minutes to drop into any Go, Python, or PHP stack.

Here is the entire JavaScript logic for the switcher. It’s simple, light, and dependency-free:

const billingToggle = document.getElementById('billing-toggle');
const monthlyPrices = document.querySelectorAll('.price-monthly');
const yearlyPrices = document.querySelectorAll('.price-yearly');

billingToggle.addEventListener('change', () => {
    const isYearly = billingToggle.checked;
    monthlyPrices.forEach(p => p.classList.toggle('hidden', isYearly));
    yearlyPrices.forEach(p => p.classList.toggle('hidden', !isYearly));
});

I put it on Lemon Squeezy under the MIT license, so you can do whatever you want with the code.

My store is currently in Test Mode waiting for final review, but I want to get some real feedback from other indie hackers.

Link: Grab the code here

Let me know what you think about the code structure. Be brutal!

I built a clean, fully responsive 3-page DevOps & Cloud Dashboard UI Kit using only Vanilla JS. Here is what I learned.

steven — Sat, 30 May 2026 01:56:39 +0000

Hi everyone! 👋

As front-end devs and system administrators, we all spend hours staring at complex, dark terminal interfaces. A few weeks ago, I challenged myself to build a premium, highly cohesive DevOps and Cloud control center dashboard bundle from scratch.

I didn't want to rely on heavy frameworks or bloated dependencies. Instead, I wanted absolute speed, lightness, and pure performance.

The result is OmniCloud UI—a production-ready 3-page frontend layout bundle built entirely with semantic HTML5, pure Vanilla JS (ES6+), and Tailwind CSS.

👉 Live Preview & Download OmniCloud UI Here

📂 What is inside the bundle?

I wanted this to be a comprehensive package for developers rather than just a single template page:

📊 Global Dashboard Overview (index.html): The central core command center. Features active virtual machine cluster tables, system welcome layouts, and dynamic server telemetry simulations (CPU, RAM, Bandwidth) that fluctuate live using pure Vanilla JS.
</> Interactive API Sandbox (api.html): A custom layout mimicking robust endpoint testing environments. Includes dynamic HTTP method selectors, mock request path input bars, and clean, beautifully structured request/response JSON code syntax panels.
📈 System Operational Status (status.html): A beautiful dedicated uptime monitoring view. Features global efficiency tracking banners and individual service matrices mapped with glowing 30-day horizontal uptime status bars.

⚡ Technical Highlights & Architecture

Strict File Separation: No inline style blocks or internal script clutters. Every file is modularly separated for clean, lightning-fast developer customization.
100% Brand-Safe: Designed specifically for commercial distribution with completely fictional, generic infrastructure nomenclature.
Commercial MIT License Included: Total freedom to modify, integrate, or deploy this kit in personal and paid client projects without any licensing worries.

I would absolutely love to hear your feedback on the code structure, the pulsing glassmorphic animations, or the mobile viewport scalability! Let me know what you think in the comments.

I built a premium AI Dashboard UI Template with clean file separation. Offering it 100% FREE!

steven — Thu, 28 May 2026 22:36:36 +0000

Hey fellow devs! 👋

I've been experimenting a lot with Vibe Coding lately, trying to see how far we can push AI code generation when guided by strict architectural rules.

Today, I’m releasing my second template: AI Dashboard Pro.

Unlike standard messy, single-file AI outputs, this layout is completely production-ready. I explicitly forced the generation into a clean Separation of Concerns layout (semantic HTML5, isolated CSS animation layer, and functional modular JS).

⚡ What makes this template special?

Dynamic Glowing Interactions: Neon gradients that smoothly track the cursor position across elements.
Live Telemetry Simulation: Real-time visual data fluctuations built purely with vanilla JS performance loops (no heavy un-licensed external libraries).
Client-Side Live Filtering: Instant live text searching inside rows and logs.

📦 Project Structure Included:

index.html (Semantic Layout)
css/style.css (Tailwind Configured Aesthetics)
js/dashboard.js (Core Telemetry & Filter Logic)

It's 100% responsive, built with Tailwind CSS via CDN, and fully licensed under the MIT open-source guidelines (completely safe for commercial projects).

I’m giving this away for FREE to the community to help you speed up your next SaaS MVP build, or just to play around with the code structure.

👇 Grab the source code here:
[ https://steven-codes.lemonsqueezy.com/checkout/buy/5d1ecb2e-22b1-45f1-9412-e158366f2603 ]

Would love to hear your feedback on the code organization in the comments below! If you found it helpful, a heart/unicorn reaction would mean the world to me. 🚀