Canopy
Canopy

Mapping fall colours across Canada.

Topic

Product Design

Tags

  • Open Data
  • Maps
  • AI

Built with

Canopy

Okay so imagine this. It's fall. I'm planning a trip to Algonquin with my friends and family to go see the leaves. Simple, right? Wrong.

I open one tab for the park's colour report. Another for a trail map. Another for the weather. And then I just... guess. Like, is this drive going to end at a glowing red hillside, or at a parking lot full of people staring at brown sticks?

And while I'm clicking around all these official parks websites, I notice something. There is SO much open data just sitting there. Colour reports. Trail info. What every park offers. All public. All free. And nobody is putting it together.

Like, why isn't this just ONE thing?

So I built the one thing. It's called Canopy. It's a live map of fall colours across Canada, plus the parks, trails, waterfalls and lookouts worth the drive in Ontario. I made it for my own trip. Then it got wildly out of hand. We'll get to that.

Quick note on who's talking. I'm a designer who studied computer software in college and has sat through more sprint plannings than I can count. I dream. I get curious. I explore a concept and I direct the vision. I drive. Claude is the car. So Claude wrote the code, and I did the thinking, the deciding and a LOT of "wait, what does that mean?"

I also wanted to run this like a real, professional software project. A proper modern setup. React, GitHub and Claude. And free, unless a real cost showed up that was actually worth paying for.

The plan (lol)

The plan was tiny. A map with coloured dots. Ontario Parks publishes a report for about 64 parks that says how much has turned and how much has already dropped. Read that once a day, colour each park from "mostly green" to "past peak", done. Ship it. Go outside.

Me: I'll keep this small. Also me, a few days later:

What I added

The thought that started it

Live leaf sightings from iNaturalist

"But what's happening between the parks?"

A page for every park

"'It's orange here' isn't a plan."

What you can do at each park

"Okay but can I canoe there?"

Trails with an elevation chart

"How bad is this hill, really?"

Waterfalls and lookouts along each trail

"Where do I stop for the photo?"

A trip planner

"Now let me string a whole day together."

2,427 public fishing spots

Nobody asked. The data was just sitting there. I have no self-control.

This is how my brain works, by the way. I start solving one thing, I notice the thing next to it, and suddenly I'm three features away from where I started. It's a problem. It's also kind of the fun part.

I do organise the chaos though. Routine, structure, systems. I'm almost addicted to that stuff. Like, even my favourite video games are about looting, hoarding and organising my inventory. (Extraction shooters, and a zombie survival game I've been playing on and off for years. Don't judge.)

So Canopy got the same treatment. A roadmap. A running list of every change. A board full of labelled issues. Naming things and making them follow rules is literally how I work.

My favourite detour was the covers. Imagine every park, trail and waterfall opening with its own tiny illustrated island, shaped like the real place, with little low-poly trees in today's actual colours. A park uses its real boundary. A waterfall gets a cliff and a pool. Did anyone need this? No. Would I do it again? Immediately.

Things I broke

Okay, honesty time. I make mistakes all the time, so here's the highlight reel.

The islands. There are 62 of them. They took four rounds of feedback. In one round the waterfalls were visibly broken, and I had only looked at a handful before going "looks great!" Lesson learned. Put all of them on one sheet and actually look at all of them.

The page that ate itself. I shipped a "Data sources" page at an address the live site was already using for its data files. It worked perfectly on my laptop. On the real site? Collision. And I only found out after it was live.

The orange. I changed the main colour from red to orange, built half the interface around it, and THEN checked accessibility. White text on my new orange button fails contrast. Colour first, contrast check second. I'm a designer. I know. I KNOW. It's on the list.

The speedrun. First commit on September 30. Version 1.0 on October 3. By the end of October 4 I was on 1.4. That's five versions in two days. So those version numbers basically count how many times I sat down, not how many things got tested. Here's that Sunday.

Sunday, October 4

Count

Releases published

3 (v1.2, v1.3, v1.4)

Pull requests merged

7

Lines changed

About 1,400 added, 680 removed

Issues closed

6

Productive? Yes. Responsible? Ehh.

How it actually works

Here's the part that blew my mind a little. Canopy has no backend. No server. Nothing quietly eating my money.

Imagine a robot with an alarm clock. It wakes up on a schedule, copies the latest numbers into a plain file, republishes the site, and goes back to sleep. That's it. That's my whole "backend". And anything that has to be truly live (like the weather), the app just asks for directly while you're using it.

What you see

How fresh it is

Fall colour reports

Daily, in season

Park activities and facilities

Weekly

Park boundaries and fishing spots

Monthly

Leaf sightings and photos

Live, last 14 days

Weather

Live, seven-day forecast

And for the people who scrolled straight down here looking for the stack (I see you).

Part

What I used

The app

React and TypeScript, built with Vite

Styling

Tailwind CSS

The map

Mapbox

Hosting

GitHub Pages

Backend

The robot

So where is Canopy really? Honestly, it's a polished front end on thin data. 64 of Ontario's 347 provincial parks have a page. Trails cover one corridor of one park. The "when should I go?" forecast, which was supposed to be the MAIN thing, hasn't even started. And "Canopy" is still a working title.

It's a strong demo and a great personal tool. It's not yet useful to a stranger in British Columbia, and I want it to be.

Next up is the boring stuff. A page for every park. Some automated tests so I stop breaking things by hand. And five to ten real people trying it on their own phones before I add a single new feature. Do I know how to build the forecasting yet? Nope. I'll figure it out as I go. That's how everything above got built anyway.

Keep reading

Data & APIs
FPL Dashboard

My Fantasy Premier League dashboard.

Oct 1, 2026
Data & APIs
FPL Dashboard

My Fantasy Premier League dashboard.

Oct 1, 2026
Tools & Plugins
Page Comments, a skill for Claude Code

A comment mode for hover states.

Oct 6, 2026
Tools & Plugins
Page Comments, a skill for Claude Code

A comment mode for hover states.

Oct 6, 2026

© 2026 · Maarib Shah

© 2026 · Maarib Shah

© 2026 · Maarib Shah