I Vibe-Coded My Dream App, And Only Lost My Mind Twice --- You can use AI to make a dashboard to monitor your life -- and glimpse our DIY software future

 

 

“People everywhere are spinning up dashboards to "monitor the situation." Which situation, you ask? Any they can think of.

 

They're sharing these real-time info websites to track geopolitical conflicts, prediction markets and natural disasters -- sometimes all of the above. The dashboards look like sci-fi-style command centers, with self-updating maps, charts and news feeds.

 

Why is everyone suddenly stuffing their screens with dizzying amounts of data? Enter "vibe coding," the art of talking an app into existence via artificial intelligence.

 

I can already feel the eye rolls, but I promise this is reality, not hype. And you can do it, too.

 

In creating my own dashboard, I learned a little about coding and a lot about this brave new world where non-coders can build whatever software they want. Plus, I now have a way to monitor my own situation!

 

Like any other pursuit worth doing, vibe coding isn't without some frustration. But getting started is easy and the upside is high. Here's how -- and why -- you should give it a try.

 

STEP ONE

 

Brainstorm your design

 

The hardest part: dreaming up your product. Remember, you don't have to think big, since it's just for you.

 

Dashboards are popular because they're simple. One can run as a website or an app that lives only inside your computer's browser. The whole thing appears on a single page and draws from sources you already check regularly. Perhaps a calendar, stocks or something more specific, like the ideal sunset-photo time?

 

You also don't need design skills -- the AI helps with that, too.

 

I suggest true beginners use a website called Lovable, which is designed as a vibe-coding tool for apps and websites. Replit is fairly easy, too, but it lets more experienced users multitask.

 

Start with a prompt asking for a dummy version. Here's mine:

 

Design a personal dashboard mock-up with placeholder data. It should look calm, refined and elegant, with a soft neutral palette, large typography, no clutter. Here are the elements: a calendar card, a task of the day card, 4-5 tech headlines, health stats, weather in San Francisco and bus departure times.

 

The AI might fill the page with features you didn't think of -- for better (a dark-mode button) or worse (a cheesy quote of the day). I went through several rounds of editing to get the mock-up just right.

 

You literally tell it what changes to make using plain English.

 

Lock down your design first, since it's harder to overhaul when AI starts connecting the data feeds.

 

You can do a fair amount before paying any fees. Once you burn through the free credits, though, you're faced with a choice: Pay the $25 monthly fee for a lot of upfront credits or wait a day for another free handful.

 

Pro tip: To save on credits on Lovable or Replit, plan your design with ChatGPT first, then upload the mock-up image as a reference. (You can upload other reference images, too.)

 

STEP TWO

 

Find the data

 

The AI can determine which data is actually gettable. A sample prompt:

 

I want to access this dashboard from the web, and don't have any coding skills. Assess the feasibility of my data wishlist. Also, are there any additional data sources I should consider?

 

The AI will likely propose grabbing data through what's called an API -- "application programming interface." I'll spare you the technical details, but it's essentially what serves the raw information that ends up on your dashboard.

 

I learned that some APIs aren't for personal use, such as my energy provider's live usage feed. Others are costly.

 

Most of my wishlist was free, such as my Oura ring stats, San Francisco fog info and my local bus arrivals. But you might need to manually connect an API to your dashboard.

 

The AI told me how to retrieve what's called a "key," which is a long string of numbers and letters to unlock the data. The AI can't do this by itself because users often need to create a developer account. Once I had the code, I could paste it into a text box displayed by Lovable.

 

Another pro tip: Save your API keys in a password manager. Most services only display the code once, before it disappears forever. (They're reusable and if you lose one, you can regenerate another.)

 

Google Calendar provides a "secret address" in settings so you can avoid any API fiddling.

 

STEP THREE

 

Build the board

 

Finally, it's time to plug data into your dashboard. I found it easiest to proceed one at a time, with a prompt like this:

 

Add a public transit card that shows the next SFMTA bus arrivals for a specific stop. Display the route name, direction and minutes until arrival. Make it minimal, and easy to scan.

 

I will admit, at times I wanted to hurl my laptop into the Pacific. Resolving some issues took a lot of polite, and desperate, pleading with a machine. Again, all in plain English. But it worked.

 

Once my SF commute dashboard was up and running, I was hooked -- and on to my next, more complicated idea: a news briefing that ranked tech stories on my beat. This time, I used Replit.

 

Making the various buttons functional was more complex. At one point, the mobile view looked great, then completely broke.

 

I blazed through Replit's free credits, upgraded my account to a monthly plan and hit that paid limit, too. The grand total: $45. And I'll have to pay $25 a month for Replit to keep hosting it.

 

But it's the news aggregator of my dreams.

 

BONUS CHALLENGE

 

Using Claude Code

 

I couldn't finish my experiment without trying Claude Code. It's a more complex, open-ended AI coding tool, and it's only for subscribers paying $20 or higher a month. Claude Code makes it easier to create a fully private web app that only runs on your computer, though to do that, I had to brave the dreaded Terminal -- a command-prompt screen [1].

 

And if you use Anthropic's impressive new Claude Design research preview (aka beta) to create your mock-up, you can send the visual directly to Claude Code to start building.

 

Anthropic's $20-a-month Pro plan was sufficient, though a few times, I needed to wait a couple of hours for my usage limits to reset.

 

After finishing my desktop-running dashboard, Claude suggested services that offered free hosting. So I followed its intimidating instructions, involving uploading files to GitHub and connecting that to Cloudflare Pages [2]. Eventually, my app was alive on the web. My husband, a professional software engineer, was impressed.

 

This past Friday, I opened my SF dashboard on my phone and left the house in time for the next bus. I felt the same visceral satisfaction as finishing a Home Depot DIY project that actually looks nice and works.

 

There are ups and downs for sure. Along your vibe-coding journey, you might still want to throw your laptop into the ocean -- but at least your dashboard will tell you how high the tide is.” [3]

 

1. A Command Prompt window is a text-based interface in Windows, typically showing a C:\Users\Name> prompt with a blinking cursor. It enables advanced users to execute commands, automate tasks, and troubleshoot system issues. Users can open it by searching 'cmd' in the Start menu, pressing Windows+R and typing 'cmd', or using Windows+X.

Key Features and Usage

Access: Search "cmd" in the Start menu or press Windows Key + X to select it from the menu.

Interface: A black window allowing text input to perform administrative tasks.

Commands: Used for system management, such as listing files (dir), changing folders (cd), and running diagnostics.

File Explorer Shortcut: Type cmd into the address bar of any folder in File Explorer to instantly open the prompt at that location.

Troubleshooting: Essential for running utilities like ping to check network connections.

Closing: Type exit or click the 'X' to close the window.

Note: In Windows 11, the command prompt may run within the Windows Terminal application.

 

2. Cloudflare Pages is a Jamstack platform designed for frontend developers to build, collaborate, and deploy websites to Cloudflare’s global edge network. It is widely used for hosting static sites (like blogs or documentation) and full-stack applications through integration with Cloudflare Workers.

Core Features

•           Git Integration: Automatically builds and deploys your site every time you push code to GitHub or GitLab.

•           Preview Deployments: Generates unique preview URLs for every commit and pull request, allowing you to test changes before they go live in production.

•           Full-Stack Capabilities: Uses Pages Functions to run server-side code (via Workers), enabling dynamic features like form handling or authentication.

•           Performance & Security: Sites are served directly from Cloudflare’s edge, often achieving faster speeds than competing platforms, with built-in SSL and unlimited bandwidth.

Pricing & Limits

Cloudflare offers a generous Free plan alongside paid tiers for professional and business use:

Feature                      Free Plan

Pro Plan         Business Plan

Concurrent Builds                1 at a time      5 at a time      20 at a time

Builds per Month                  500     5,000  20,000

Bandwidth                 Unlimited       Unlimited       Unlimited

Custom Domains                 100 per project         250 per project         500 per project

Supported Frameworks

Pages includes presets for most modern web frameworks and static site generators (SSGs):

•           Frontend: React, Vue, Angular, Svelte.

•           SSGs: Astro, Next.js, Hugo, Gatsby, Jekyll, Eleventy, and Zola.

•           Others: You can also deploy plain HTML/CSS sites via Direct Upload or simple Git repositories.

 

 

3. I Vibe-Coded My Dream App, And Only Lost My Mind Twice --- You can use AI to make a dashboard to monitor your life -- and glimpse our DIY software future. Nguyen, Nicole.  Wall Street Journal, Eastern edition; New York, N.Y.. 07 May 2026: A11.