DEV Community

Dauntra
Dauntra

Posted on

I built an interactive Flutter Web demo so people could try my fitness app before launch

I've been building a fitness app called DAUNTRA.

One problem I kept running into before launch was simple:

People could see screenshots of the app, but they couldn't actually use it.

I didn't want to wait until the App Store release to find out whether people understood the product, so I built a separate interactive Flutter Web demo.

What is DAUNTRA?

DAUNTRA combines:

  • workout tracking
  • nutrition tracking
  • progress analytics
  • Lab Insights, which tries to help users understand patterns in their training and nutrition data

The goal isn't just to collect more fitness data.

It's to help make that data easier to understand.

The demo

The web demo uses fictional athlete data, so you can explore the app without creating an account or entering personal information.

You can actually navigate through:

  • Workouts
  • Nutrition
  • Progress
  • Lab Insights
  • Profile

The demo is built separately from the production app and doesn't connect to real user data.

Tech

The main product is built with Flutter.

For the demo I used:

  • Flutter Web
  • CanvasKit
  • a dedicated main_demo.dart
  • fake/precomputed demo data
  • Cloudflare Pages
  • PostHog for anonymous product analytics

One of the more interesting problems was making something originally designed as a mobile app still feel natural when shown inside a desktop browser.

Try it

Interactive demo:

https://demo.dauntra.com

Main site:

https://dauntra.com

I'm still pre-launch, so criticism is much more useful to me than compliments.

I'd especially like feedback on:

  1. Is the product understandable without me explaining it?
  2. Does Lab Insights seem useful or unnecessary?
  3. Is the web demo comfortable to use?
  4. What would you change before releasing the actual app?

Feel free to be critical — that's exactly what I'm looking for.

Top comments (1)

Collapse
 
devshakib profile image
K M Shahriar Hossain

On question 3, from the loading side: a first visit to demo.dauntra.com downloads about 3–4 MB before anything paints (canvaskit.wasm is 2.1 MB in Chrome and 2.8 MB elsewhere, main.dart.js 1.1 MB, all brotli), and the <body> holds nothing but scripts. On a slow connection that's a blank white page for several seconds, and a lot of people leave a blank page. A plain HTML loading screen in <body>, removed on the flutter-first-frame event, costs almost nothing and makes the wait look like loading.

Two smaller things. There are no og: tags in the head, so the demo link shows no preview card when it's pasted into X, Slack or WhatsApp, and sharing is most of what a demo is for. And good call self-hosting the fallback fonts with fontFallbackBaseUrl: most CanvasKit apps quietly pull Noto from gstatic the first time they hit a glyph they don't bundle.