One plain-English prompt in Claude, a single HTML file and a free Tiiny Host link replaced a project management subscription that wanted around a tenner per person, per month.
If you've ever looked at your project management bill and wondered why you're paying per seat for what is, underneath it all, a list of tasks you drag between columns, this walkthrough is for you. In the video, the whole thing is built from scratch in a few minutes: an Asana-style app with a List view, a drag-and-drop Board, a Calendar and a Gantt-style Timeline, generated by Claude from one sentence, then put live on Tiiny Host so it has a real link you can open on your phone or send to a business partner.
There's no code to write, no subscription to renew and no monthly bill. Here's exactly how it was done, including the prompt word for word, the one bug that came back and how it was fixed, and the optional extra step that turns the app into something that actually saves data for a team.
Why "HTML only" is the phrase that matters
The entire build hinges on one prompt typed into Claude:
"Please create an HTML-only app in the style of Asana that I can use to manage projects and track specific campaigns and tasks. Make it support drag and drop and work just like Asana."
The important bit is "HTML only". That instruction tells Claude to keep everything, the layout, the styling and all the interactive behaviour, inside a single file. There's no build step, no framework to install, no folder of dependencies and nothing to configure. One file means you can open it in a browser straight away, download it in one click and upload it anywhere in one drag. As the video puts it, the whole reason for choosing HTML only is to make the app easy to run and easy to create.
Before hitting enter, the video also picks the strongest model option available so the result is as polished as possible. That's a good habit for any "vibe coding" session: when you're asking an AI to produce a complete working application rather than a snippet, give it the most capable model you have access to and let it take its time.
What Claude handed back, and the one thing wrong with it
Claude took a little while and then returned a complete HTML file. Clicking through it, the first impression is strong, but not flawless, and the video is honest about that. On the home page, the "My Tasks" section had overlapping text, so it looked cluttered and a bit messy. The Projects section, by contrast, had a clean design. So the problem was clearly isolated to the home page rather than anything structural.
Everything else worked. In the My Tasks area, tasks could be ticked off as complete. Clicking a task opened a detail view that looked just like the one in Asana. Moving over to the Board view, drag and drop worked exactly as asked, with cards moving smoothly between columns. According to the video description, the finished app also includes a List view, a Calendar that updates due dates as you drag items around, and a Gantt-style Timeline where you can stretch a bar to move a deadline, plus task details with assignees, subtasks and comments.
The lesson here is that a first pass from an AI will usually get you most of the way, and your job is to test it like a user would: click into things, drag things, tick things off. The fix is only ever one message away.
The thirty-second fix: describe the problem, get the solution
Rather than typing out a detailed bug report, the video uses a voice note to send feedback to Claude. The message was roughly: "Everything works great. The only issue is on the app's home page, where there's a lot of overlapping text in the My Tasks section and the text in the Projects area generally looks untidy. If we can clean up the home page, we're all set."
That's the whole fix. No CSS, no inspecting elements, no hunting for the offending line. Describe what's wrong in plain English, say where it is, and let Claude do the work. When the updated file came back, the home page was clean and tidy, drag and drop still worked, tasks could still be checked off, and the app was exactly what was wanted.
A practical tip from this step: tell the AI what's working as well as what isn't. Opening with "everything works great, the only issue is…" keeps Claude focused on the one area that needs attention instead of rewriting parts that were already fine.
Getting the app live on Tiiny Host
At this point the app exists only inside Claude, which means nobody else can use it. You can't share it with your team or send it to a client. The next step is to download the file, which is called index.html, and head to Tiiny Host.
The video describes Tiiny Host as being a bit like Google Drive but with more features, and far easier to understand than platforms such as Netlify or Cloudflare. The process is genuinely simple:
Upload the file. Drag index.html onto the page. One useful detail: many other hosts insist that your file is named index.html before they'll serve it. Tiiny Host doesn't have that restriction, so whatever Claude names the file, it will just work.
Name the project. In the video it's called "Project Tracker". This becomes part of your link.
Add a password (optional). Because this is an internal tool, the video adds password protection so strangers can't stumble across the board, using "test123" as a demo password. For a team task tracker, this is a sensible default.
Consider email collection. Tiiny Host also lets you add an email capture step. The video notes this is a great option if you're building a demo app and want to grow a mailing list at the same time.
Hit publish. The site goes live in seconds, literally while the presenter is still talking.
Click the link, enter the password, and the Asana-style app is officially open for business. Anyone with the link can get in, add tasks, move cards and update progress.
How the shared version works, and what it saves you
It's worth being clear about what you get at this stage. Everyone who opens the link is working in the same shared workspace, effectively one account for the whole team. The video points out that this alone saves a lot in subscription costs, because you're no longer paying per person for a general-purpose project tracker. For a small team or a single project, a shared board like this is often all you need.
If you want to assign tasks to specific people and notify them, the video notes that's an easy feature to add with another prompt. And if you want to go further, with your own database and a proper login system, there's a recommended route for that too.
Optional: making the app save data with Supabase
For a tool that remembers your tasks properly and supports user accounts, the video recommends Supabase. It gives you a database, authentication, APIs, serverless functions and file storage under one account. The steps shown are:
- Sign in to Supabase and open your organisation (the video uses a demo organisation), then create a new project or resume an existing one.
- Copy the project URL. Paste it into Claude and label it as the project URL.
- Get the anon key. In Supabase, go to Project Settings, then API Keys, and copy the top anon key. Paste that into Claude as well.
- Send a prompt along the lines of: "I want to make the app able to save data. Below are the Supabase details to set that up."
- Run the SQL Claude gives you. Claude will ask you to add a block of SQL code. Open the SQL editor in Supabase, paste it in, hit run and make sure you see the success message.
- Re-upload the updated file. Download the new version of the HTML file from Claude and upload it to Tiiny Host using the update section of your existing project. Open the link again and your app now persists its data.
The video stresses that all of this can be done in minutes, and it's the same pattern as before: hand Claude the relevant details, let it generate what's needed, and move the output to where it belongs.
Practical tips for your own build
A few things from the video that are worth carrying into any project like this:
- Be specific about the reference. Saying "in the style of Asana" and "work just like Asana" gave Claude a clear target for layout, task details and board behaviour.
- Name the interactions you care about. Drag and drop was explicitly requested, and it worked first time. If you want a calendar or timeline, say so.
- Test before you ship. Click into tasks, tick them off, drag cards, check every page. Catching the untidy home page before publishing meant the shared link was clean from day one.
- Lock it down. A password on Tiiny Host takes seconds and keeps an internal tool internal.
- Iterate in place. Updates go through Tiiny Host's update section, so your link stays the same while the app improves.
The takeaway
For the cost of one well-worded prompt and a few minutes of testing, the video ends with a fully working Asana-style project manager: list, board, calendar and timeline views, task details with assignees, subtasks and comments, drag and drop that behaves the way you'd expect, and a real, password-protected link anyone on the team can open.
The HTML-only approach is what makes the whole thing so portable, and Tiiny Host is what turns a file on your computer into something you can actually share. If you need persistence and logins, Supabase slots in with a couple more prompts.
Whether you've never written a line of code or you're simply tired of paying per seat for a task board you could own outright, this is a clear demonstration of how "I wish this existed" becomes something you use every day.
Top comments (0)