DEV Community: Will

Building My First “Vibe Coded” App Without Touching a Line of Code

Will — Sun, 20 Jul 2025 04:33:07 +0000

Just kidding, It’s live and kicking at https://worksnever.dev

What Is This App?

It’s a place for developers and tech folks to anonymously share their confessions, fails, wins, and discoveries — celebrating both our struggles and successes. Because let’s be honest, tech life is a rollercoaster, and sometimes we just need a safe spot to vent or brag.

How Did I Build It Without Code?

I built this app using Lovable — a platform that lets you build software products using only a chat interface. Yep, instead of writing code, you chat with Lovable to shape your product.

Here’s the kicker: Lovable recently became a unicorn, securing a $200M Series A just 8 months after launch. Honestly, now that I’ve used it, I totally get why.

Under the hood, the app is a React + Tailwind web app, deployed seamlessly on Netlify. It’s powered by Supabase for backend services, connected through Lovable’s integration — which I believe uses a Model Context Protocol (MCP) to glue everything together smoothly.

Fun fact: I’ve used Supabase before — manually reading docs, setting up auth, writing queries. This time? One click and it just worked. Surreal.

Why Is This a Big Deal for Me?

I’ve built and shipped apps before — but this is the first one where I never opened a code editor to tweak a thing. No fixes, no UI adjustments, not even a single deployment script.

It’s fascinating how far tooling has come. You can really go from idea to live product without ever typing a line of code.

But… I’m Still Not 100% Sold

I’m pretty sure I’ll eventually have to:
Bump the vulnerable packages and remove unused ones
Double-check the RLS (Row-Level Security) settings
Admit that it’s just another CRUD app that will probably end up like most side projects — quietly sitting in the background..

Wanna Try It Out?

👉 Head over to worksnever.dev, add your own dev confession, or leave some ideas on the feature request page. I’d love to hear what you think!

And if you’ve shipped something or are considering it — hit me up. What’s holding you back?

Final Thoughts

This journey has opened my eyes to a new way of building software. One that feels less like wrestling with code and more like collaborating with a creative partner. I’m excited to see where this goes next.

No Drama, Just Code: Setting up Backstage

Will — Sun, 19 Jan 2025 15:26:31 +0000

Introduction

Backstage is the open-source framework for building developer portals, this blog series aims to reduce the pain of getting started.

In this post, we'll cover how to:

What you need before you start
Set up a Backstage app from scratch.

Prerequisites

Before diving in, ensure you have the following tools installed on your system. Below are macOS-specific instructions, but installation steps for other operating systems can be found on the respective websites.

The full list of prerequisites is available here.

Build Tools

xcode-select --install

NVM (Node Version Manager)

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

Node.js

nvm install lts/iron

Yarn

npm install --global yarn
yarn -v

Ensure you are using Yarn version 4.4.1 or later.

Setting Up Your Backstage App

Follow these simple steps to scaffold and run a Backstage app:

Scaffold a New Backstage App

Run the following command to create a new Backstage app:

npx @backstage/create-app@latest

At the time of writing, the latest version of @backstage/create-app is 0.24.0. To use this exact version, you can run:

Navigate to Your App Directory

cd my-backstage-app

Replace my-backstage-app with the name of your app if you used a different name during creation.

Start the Backstage App

yarn dev

This command will start both the frontend and backend servers:

Frontend: http://localhost:3000
Backend: http://localhost:7007

Open the App in Your Browser

Navigate to http://localhost:3000 to see your Backstage app in action.

Celebrate Your Success!

Congratulations! You've successfully set up a Backstage app. Before moving on, take a moment to familiarize yourself with its folder structure.

Understanding the Folder Structure

The Backstage app you just created uses a monorepo architecture, organizing the codebase into packages for better scalability and maintainability. Here's a quick look at the structure:

my-backstage-app/
├── packages/
│   ├── app/       # Frontend code
│   ├── backend/   # Backend code
│
├── plugins/        # Extendable plugins
├── examples/       # Sample templates
├── app-config.yaml # Main configuration file
├── app-config.local.yaml
├── app-config.production.yaml
├── package.json
├── catalog-info.yaml

Key Highlights

packages/: Contains the frontend (app) and backend (backend) code.
plugins/: Stores plugins to extend Backstage's functionality.
app-config.yaml: Central configuration for the Backstage app.

Understanding this structure will help you customize and extend your app effectively.

Next Steps

Now that your Backstage app is up and running, it's time to explore its configuration options. Check out the next part of the series: Configuring Backstage (Coming Soon).

Additional Resources

Here are some helpful links to deepen your Backstage knowledge:

Backstage 101 GitHub Repository
Read on Linkedin

No Drama, Just Code: An introduction to backstage

Will — Sat, 18 Jan 2025 13:14:56 +0000

Welcome to Backstage in Action, a series of blog posts where we will be pulling back the curtains and dive deep into the world of Backstage.io. Whether you're new to the framework or a seasoned pro, I will (attempt to) guide you through the (sometimes challenging and frustrating) setup, configuration and customization of the Spotify Backstage Framework.

In this post I will be covering what is backstage and why you should consider it. See what other posts I have planned at the end.

What is Backstage

Backstage is an open source framework for building developer portals. Powered by a centralized software catalog, Backstage restores order to your microservices and infrastructure and enables your product teams to ship high-quality code quickly — without compromising autonomy.
Backstage unifies all your infrastructure tooling, services, and documentation to create a streamlined development environment from end to end.

Backstage is also a CNCF Incubation project like many other projects (Kubernetes, Helm, etcd, jaeger, envoy....)

What are the key features

Service Catalog: A place to register and organize microservices, APIs, and other software components. Plugins: Extendable functionality that allows teams to integrate with third-party tools like Kubernetes, CI/CD systems, and monitoring platforms.
Software Templates: Reusable templates for creating new projects, ensuring consistency and best practices across the team.
Scaffolder: A feature for creating and managing application blueprints, streamlining the process of setting up new projects or environments.
Documentation Hub: A centralized location for all project and API documentation, accessible and searchable by developers.

Benefits

For engineering managers, it allows you to maintain standards and best practices across the organization, and can help you manage your whole tech ecosystem, from migrations to test certification.
For end users (developers), it makes it fast and simple to build software components in a standardized way, and it provides a central place to manage all projects and documentation.
For platform engineers, it enables extensibility and scalability by letting you easily integrate new tools and services (via plugins), as well as extending the functionality of existing ones.
For everyone, it’s a single, consistent experience that ties all your infrastructure tooling, resources, standards, owners, contributors, and administrators together in one place.

What's next?

Getting your dev environment setup (Coming Soon)
Configuring your environment (Coming Soon)
Setting up Authentication with Azure (Entra ID) (Coming Soon)
Integrating GitHub (Coming Soon)
Customizing the UI (Coming Soon)
Understanding the catalog, writing YAML and templates(Coming Soon)
Using templates and customizing the scaffolder(Coming Soon)