TLWR (The Long and Winding Road): Visualize User's Routing Paths

Visit Website

Description

TLWR: The Long and Winding Road

the_long_winding_road

Demo Video

Watch the video

Problem We tried to Solve

During service experience, users sometimes encounter the long and winding road to achieve their goal.

As a service developer and provider, we need to know how the users suffer from the complex route connections and how to enhance the routing connections.

What we provide

TLWR (The Long and Winding Road) provides a collection tool of routing behavior of users and a visualization dynamic transition of routing paths for Flutter based services.

We hope that service owners can achieve useful insight of users behavior and what has to be modified for the enhancement of the service.

Here's a link to the working site https://tlwr.kkiri.app. Have a look around, we made the frontend as intuitive as possible to make it supa-easy for new users, and also prepared a demo account with pre-recorded routing behaviors.

The Team

Demo

Here's quick demo of TLWR : (not yet)

How it works

Supabase has been great hand for finishing this project in such a short period of time. Here's how we used it's features to efficiently deploy our service

  1. When a user first signs in, TLWR sends a magic link using Supabase authentication service.
  2. We provides TLWR routing observer. This observer sends log of users' page routing behaviors to our API server (feat. Supabase database).
  3. The page nodes and routing edges are stored in Supabase database to visualize page network.

The frontend web site visualizes the page network of a running flutter service based on how users often and long visited and routed to the other page.

How to user TLWR observer

final _logger = TLWRLogger.initialize(id: PROJECT_ID);
final _observer = TLWRObserver.initialize(tlwrLogger: _logger);
void main() {
  runApp(MaterialApp(
    home: Container(),
    navigatorObservers: [_observer],
  ));
}

Supabase Features

  • Supabase Auth
  • Supabase Database

Related Projects

# madewithsupabase

Collection of projects made with Supabase

I made this to showcase the ⚡ Power of Supabase.
If your app/project is using Supabase and want to show off to the world,
Feel free to submit your project ya!

Join us! Submit a Project 🚀