Inspiration

Most students don’t earn a salary. Money comes in lumps from parents, stipends or small gigs, and it has to last until the next one, which nobody can predict exactly. Every budgeting app I looked at shows a balance and a pie chart, but that isn’t the question we ask ourselves. The real question is: “Can I afford this and still make it to the next allowance?”

I asked five course mates what they do when money runs low. One of them said, They borrow online. That sentence is what Runway is built around.

What it does

Runway replaces your balance with one calm number: days of runway, meaning how many days your money will last at the pace you’re spending.

Home: a big runway number, a horizon bar showing when your money runs out versus when you expect more, and a safe daily spend. What if?: type in something you want to buy, such as ₦4,500 for shoes, and the runway changes live (“You’d lose 2 days”) before you spend anything. Quick add: log food, transport or data in two taps. Calm status: green, amber and soft red, always paired with an icon and plain words so it never relies on colour alone.

It’s built for students first, but it works for anyone with irregular income, like freelancers, traders and gig workers.

How we built it

Runway is a frontend-first web app built with HTML, CSS and vanilla JavaScript, with no framework. The core is one small calculation function that works out average daily spend, runway and safe daily spend, and a single render() function that updates the screen after every change. Data is saved in the browser with localStorage, so it works offline and loads fast on weak connections. We designed mobile-first for 360px screens and deployed it on Vercel. [If you ad

Challenges we ran into Designing for calm, not fear. Money apps tend to alarm people, so i spent time on colour, wording and tone. Edge cases in the maths, like dividing by zero when no expenses are logged yet, and negative balances. Keeping the What if? bar instant while not changing the real data until the user commits. contemplating how i would host it for free then add backend later Accomplishments that i am proud of One number that answers the real question, with no spreadsheets or categories to maintain. The live What if? bar, which shows the consequence before the purchase. An accessible design: large type, high contrast, 44px tap targets, and meaning carried by icons and words as well as colour. It works offline and stays light on data. What i learned Good design starts with a single question the user actually asks, not with features. Listening to five people for ten minutes changed our design more than any assumption i made. Accessibility and calm wording are design decisions made early, not polish added at the end. What’s next for Runway Accounts and sync (Django and a hosted database) so data follows you across devices. Installable app with a manifest and service worker, so it opens from the home screen. Gentle nudges, like “Cutting ₦300 a day gets you to Friday”, and a reminder when a top-up is due. Irregular income patterns, so Runway learns when your money usually arrives. Local-language support, starting with french.

Built With

Share this project:

Updates

Submission history