I recently had to add a map to a React app and was not sure what to reach for. After some research I landed on Mapbox GL JS, and it turned out to be both easier and more capable than I expected.

The map above is the finished piece. Below we build it in order: create the component, configure the camera and padding, pick a lighting theme, then drop in a marker. Play with it first: zoom, ctrl + drag for pitch and rotation, or shift + drag to scale.

Getting Started

You need a Mapbox account and an access token. Sign up at Mapbox Account and grab the token from the account home page. The free tier includes 50,000 map loads a month, which is plenty for most side projects.

Install the library, then set the token. In Next.js that means a NEXT_PUBLIC_ env var so it is available in the browser:

JavaScript'use client'

import { useRef, useEffect } from 'react'
import mapboxgl from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css'
import { useTheme } from 'next-themes'

mapboxgl.accessToken = process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN

Creating the Map Component

Two refs keep things stable across renders: one for the DOM container, and one for the Mapbox instance so we do not recreate it on every update. Props like lng, lat, zoom, and pitch point the camera. Full options live in the Map API reference.

Initialize once inside useEffect. If map.current already exists, bail early.

JavaScriptexport default function Map({ lng, lat, zoom = 2.5, pitch = 25 }) {
  const mapContainer = useRef(null)
  const map = useRef(null)

  useEffect(() => {
    if (map.current) return
    map.current = new mapboxgl.Map({
      container: mapContainer.current,
      style: 'mapbox://styles/mapbox/standard',
      center: [lng, lat],
      zoom,
      pitch,
    })
    // ...
  }, [])

  return <div ref={mapContainer} className="map-container h-full w-full" />
}

Configuring the Map

Once the style loads, set the basemap lighting and a little left padding. Padding makes room for a location badge and keeps the pin from sitting under the overlay on wide layouts.

For the cover demo, the camera points at The Met on the edge of Central Park:

JavaScriptuseEffect(() => {
  if (map.current) return
  map.current = new mapboxgl.Map({
    container: mapContainer.current,
    style: 'mapbox://styles/mapbox/standard',
    center: [-73.963244, 40.779437], // The Met, NYC
    zoom: 15.5,
    pitch: 45,
  })

  map.current.on('style.load', () => {
    map.current.setConfigProperty('basemap', 'lightPreset', mapTheme)
    map.current.setPadding({ left: 150 })
    // ...
  })
}, [])

The badge itself is just absolute-positioned JSX on top of the map. You do not need to register it with Mapbox:

JavaScript<div className="relative" style={{ height: 400 }}>
  <Map lng={-73.963244} lat={40.779437} zoom={15.5} pitch={45} />
  <MapLocationBadge place="New York, NY" />
</div>

Applying Themes

Mapbox Standard ships four light presets: day, night, dusk, and dawn. That lightPreset call above is where you pick one.

I sync the map with the rest of the site using next-themes, so it follows light and dark mode automatically. You can also hardcode dusk when you want a specific mood, like the Met cover at the top of this post. If the theme can change while the map is mounted, update lightPreset again whenever resolvedTheme changes.

JavaScriptconst { resolvedTheme } = useTheme()
const mapTheme = resolvedTheme === 'dark' ? 'night' : 'day'

Adding a Marker

Finally, add a marker for the point of interest. It can be any HTML element. A small span with a CSS class is enough, and you can style it however you like.

JavaScriptmap.current.on('style.load', () => {
  map.current.setConfigProperty('basemap', 'lightPreset', mapTheme)
  map.current.setPadding({ left: 150 })

  const el = document.createElement('span')
  el.className = 'map-marker'
  new mapboxgl.Marker({ element: el, anchor: 'center' })
    .setLngLat([-73.963244, 40.779437])
    .addTo(map.current)
})

CSS.map-marker {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--accent);
  border: 3px solid rgba(255, 255, 255, 0.95);
}

Do not set transform on the marker element. Mapbox uses it for positioning, and a custom transform will throw the pin off the building.

Conclusion

Remember ref={mapContainer} on the div Mapbox should render into. Putting it all together:

JavaScript'use client'

import { useEffect, useRef } from 'react'
import mapboxgl from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css'
import { useTheme } from 'next-themes'

mapboxgl.accessToken = process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN

export default function Map({
  lng = -73.963244,
  lat = 40.779437,
  zoom = 15.5,
  pitch = 45,
}) {
  const mapContainer = useRef(null)
  const map = useRef(null)

  const { resolvedTheme } = useTheme()
  const mapTheme = resolvedTheme === 'dark' ? 'night' : 'day'

  useEffect(() => {
    if (map.current || !mapContainer.current) return

    map.current = new mapboxgl.Map({
      container: mapContainer.current,
      style: 'mapbox://styles/mapbox/standard',
      center: [lng, lat],
      zoom,
      pitch,
      config: {
        basemap: {
          lightPreset: mapTheme,
        },
      },
    })

    map.current.on('style.load', () => {
      map.current.setConfigProperty('basemap', 'lightPreset', mapTheme)
      map.current.setPadding({ left: 150 })

      const el = document.createElement('span')
      el.className = 'map-marker'
      new mapboxgl.Marker({ element: el, anchor: 'center' })
        .setLngLat([lng, lat])
        .addTo(map.current)
    })

    return () => {
      map.current?.remove()
      map.current = null
    }
  }, [])

  return (
    <div
      className="relative overflow-hidden rounded-3xl border border-border bg-muted"
      style={{ height: 400 }}
    >
      <div ref={mapContainer} className="map-container h-full w-full" />
    </div>
  )
}

Want the cover-style flyover? After style.load, ease the camera in:

JavaScriptmap.current.easeTo({
  zoom: 15.5,
  pitch: 45,
  bearing: -28,
  duration: 3200,
})

Start a little wider and flatter, then ease into those values. No extra animation library required. From there you have an interactive Standard map you can theme, annotate, and drop pins on.

I'm a software engineer by day and a part-time creator in the evenings. I spend a lot of hours at this desk coding, editing, and learning, so I put together a setup that stays productive for both.

The desk

The centerpiece is the Ergonofis Sway Desk. It has a slick control interface, an anti-collision system, and the kind of build quality that makes standing all day feel natural. They also sent their solid wood monitor riser / desk shelf, which keeps the display at eye level and adds a bit of structure to the surface.

• Ergonofis Sway Desk: standing desk with intuitive preset heights
• Ergonofis Desk Shelf: solid wood shelf for posture and organization
• Ergonofis Cable Management: keeps the underside tidy

Monitors and lighting

A good monitor is non-negotiable for my work. I use the LG 34WN780 for its ergonomic stand and wide canvas, plus a BenQ ScreenBar Halo for consistent, glare-free light.

• LG 34WN780 Monitor
• BenQ ScreenBar Halo

Computer setup

My daily driver is a 16-inch MacBook Pro. An Anker USB-C hub cuts down cable clutter, and a Nomad MagSafe dock keeps the phone out of the way.

• 16-inch MacBook Pro
• Anker USB-C Hub
• Nomad MagSafe Dock

Audio

I mostly work in headphones because monitor speakers aren't enough for editing or focus sessions.

• AirPods Max
• Apple AirPods Pro
• Sonos Beam Soundbar

Peripherals

I'm a mechanical keyboard person. The Mode Envoy with Alexotos linear switches and a GMK Dracula set is still my favorite daily typer. For pointing, I switch between a Logitech MX Master III and an Apple Magic Trackpad.

• Orbitkey Desk Mat
• Mode Envoy Keyboard
• Alexotos Linear Switches
• GMK Dracula Keycap Set
• Logitech MX Master III
• Magic Trackpad

Chair and ergonomics

Long sessions need a chair that stays out of the way. The Herman Miller Aeron covers that with full adjustability and solid lumbar support.

• Herman Miller Aeron Chair

Miscellaneous

• Ikea Skådis Pegboard
• Govee RGB Floor Lamp
• Fellow Products Coffee Grinder
• Electric Kettle
• Larq Water Bottle

Closing

That's the workspace as of this write-up. It keeps evolving — if you have suggestions for what to improve around the edges of the desk, I'm always open to them.

That led to a Gatsby.js starter inspired by Medium’s earlier design. Clean typography, a focused post layout, and enough structure underneath to run a full site: posts, a contact page, gear links, search, and dark mode.

Features

Out of the box it includes:

• 📲 PWA support so it can be installed on Android and iOS
• 🔎 Algolia search across post attributes
• 📧 A Getform.io contact form that is simple to wire up
• 📝 MDX-based blog posts
• 🌗 A theme toggle for light and dark mode
• 💻 SEO-friendly meta descriptions

The stack is Gatsby, React, MUI, MDX, and Vercel.

Writing in MDX

Publishing is meant to stay out of your way. Day to day you write markdown (or MDX) in content/posts/ and the site picks it up. You do not need to touch HTML or CSS for a normal post, though you still can if you want to change the design or drop in custom React components.

Light and dark mode

There is a toggle in the header for switching themes. Your choice is stored in local storage so it sticks between visits, or you can leave it following the system preference.

Image 1 of 2

Try the demo

You can see the live site at gatsby-medium.vercel.app. If you want a Medium-like reading experience on Gatsby without starting from a blank theme, this should get you most of the way there.

When I started this side project there weren't many dashboards or sites to track data for the Coronavirus pandemic, other than the very popular web app created by Johns Hopkins University. My idea was to create an open-source version that encouraged collaboration to derive some creative design and functional ideas. And that's precisely what this project became.

The best way to prevent and slow down transmission is to be well-informed. — World Health Organization

We have contributors from all over the world (Spain, Poland, India, and various places in the USA) who came together to create something useful and meaningful. The dashboard ended up receiving over 200k visitors, but the most rewarding part was collaborating with people across the world. It brought key stats, cumulative and daily growth charts, country-level tables, and a fully interactive Mapbox map into one responsive overview of the pandemic.

Data Sources

A large portion of the data comes from one of the original data repositories tracking COVID-19 cases, Johns Hopkins University CSSE2019-ncov data repository. Additional data was collected from Our World in Data GitHub data repository. Lastly, to fill in some requirements we retrieved data for daily cases from New York Times COVID GitHub data repository.

For this project, it was crucial to have accurate, trustworthy datasets. That is why those sources were carefully chosen. The goal was to represent the pandemic as accurately as possible. Getting that wrong at scale would have real consequences.

Technology stack

This project began with Python-based Jupyter Notebooks, and the use of Plotly, "the leading front-end for ML and data science models in Python, R, and Julia." But I needed a way for this to be accessible to the public, so I moved it onto the Django web framework. Django encourages rapid development and clean, pragmatic design. To bootstrap the initial dashboard grid we used Appseed and Bootstrap 4 for custom UI where we needed it.

Front-end design

Overall the general approach of the application is to display a grid of different cards. The cards represent different forms of data organized in their respective way, and the user can interact with the data in several ways. We have a map card that uses COVID case data stacked on top of GPS coordinates. In another card, we have a plot that shows the overall trajectory of confirmed cases using time-series data with dates.

I designed the dashboard with a mobile-first approach, ensuring the layout worked across viewports. Plotly and Mapbox already handle multi-touch interactions, so most of the work was making the overall grid adaptable. Bootstrap 4 made that responsive structure much easier.

How it works

The following is a snippet of how we're using Python to scrape the data from different sources and return that data to the front-end to create data visualizations with Plotly. Using AJAX requests allows us to load the data asynchronously, which is a great way to improve the user experience by significantly reducing the initial page load time.

Note that the example code is incomplete for concision.

1. Web scraping with Pandas

Here we defined a simple function that reads from a specific URL that contains a CSV of raw data, we convert it to a Pandas data frame and return it.

Pythonimport pandas as pd

def confirmed_report():
  # Returns time series version of total cases confirmed globally
  df = pd.read_csv('https://raw...CSSEGISandData/...csv')
  return df

2. Data cleaning & formatting

Now we define the function realtime_growth which cleans and manipulates the data frame returned from the above function. We need to do this because the data is not in the format we want, and we need to clean it up.

Pythondef realtime_growth():
  df1 = confirmed_report()[confirmed_report().columns[4:]].sum()
  df2 = deaths_report()[deaths_report().columns[4:]].sum()

  growth_df = pd.DataFrame([])
  growth_df['Confirmed'], growth_df['Deaths'] = df1, df2
  growth_df.index = growth_df.index.rename('Date')

  yesterday = pd.Timestamp('now').date() - pd.Timedelta(days=1)

  return growth_df

3. Sending AJAX request

Using AJAX in JavaScript to send an asynchronous request to the Python backend. If successful then we create the data visualization (in this case, a scatter plot with visible line traces) using plotly.js.

JavaScriptfunction load_realtime_growth_chart() {
  var xhttp = new XMLHttpRequest()
  xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
      /* plotly.js code here*/
    }
  }
  xhttp.open('GET', 'realtime_growth')
  xhttp.send()
}

4. Plotly to visualize the data

We then create the D3.js-based line and scatter plots in JavaScript using Plotly. This creates an interactive, scientific data visualization easily on the Web browser. This one will probably be the most complex-looking part of the code because it takes a lot of tweaking to get the plot to your desired look and feel. But trust me it's simpler than it looks.

Visit plot.ly for docs and examples.

JavaScriptvar plot_data = [confirmed_trace, deaths_trace]
var plot_layout = {
  yaxis: { automargin: true, type: 'log', gridcolor: '#32325d' },
  xaxis: { automargin: true, showgrid: false },
  showlegend: false,
  hovermode: 'closest',
  updatemenus: [
    {
      visible: true,
      type: 'dropdown',
      buttons: [
        {
          method: 'relayout',
          label: 'Logarithmic',
          args: [{ 'yaxis.type': 'log' }],
        },
        {
          method: 'relayout',
          label: 'Linear',
          args: [{ 'yaxis.type': 'linear' }],
        },
      ],
      x: 0.05,
      xanchor: 'auto',
      bgcolor: '#6236FF',
      bordercolor: 'rgba(0,0,0,0)',
    },
  ],
}

Wrapping things up

The result is a set of real-time visualizations that work across devices and respond to both mouse and touch. Nothing fancy, just Python, Django, and Plotly running on the web, where anyone can open a link and explore the data.

Did it meet the original goal? Yes, and then some. The dashboard drew over 200k visits, which still feels surreal. What I remember most is that people actually used it — and hopefully walked away with a clearer picture of what was happening during the pandemic.

If you're a developer and want to dig into the code, check out the getting started docs in the GitHub repository.

Also, take dream apartment with a grain of salt. Six hundred square feet is still six hundred square feet. What makes it feel like one is the view: I never imagined looking straight at the Empire State Building from home. More than that, location is everything right now. Walk downstairs and the city is already happening: good food, creativity, people from all walks of life. I couldn't be happier.

Anyway, here's the video. Hope you enjoy it :)

To provide some background, I'm a software engineer by day and part-time creator in the evenings. I spend a lot of hours at this desk coding, editing, and learning, so I put together a setup that works for both.

youtube.com

Software Engineer's Productive and Minimal Desk Setup (2023)

A deep dive into the tech gadgets and home office products that make up this workspace.

The Desk

First things first: the desk. It's the centerpiece of the setup. I got to test the Ergonofis Sway Desk, which was gifted to me. It's a game-changer, with a slick control interface and aesthetics that match the functionality. They also built in an anti-collision system.

The Ergonofis team also sent their solid wood monitor riser / desk shelf. Having your monitor at eye level is better for posture, and the shelf is a clean way to get there while adding some style.

• Ergonofis Sway Desk: A versatile standing desk with intuitive preset heights
• Ergonofis Desk Shelf: Solid wood shelf to elevate the display
• Ergonofis Cable Management: Keeps the underside tidy

Image 1 of 4

Monitors and Lighting

A high-quality monitor matters for my work, and I chose the LG 34WN780. Its ergonomic stand gives full control over screen positioning. I also added the BenQ ScreenBar Halo, a USB-powered lamp that gives consistent, glare-free light across the desk.

• LG 34WN780 Monitor: Strong monitor with ergonomic versatility
• BenQ ScreenBar Halo: USB-powered lamp for consistent desk illumination

Computer Setup

My primary machine is the 16-inch MacBook Pro. To streamline connections and cut cable clutter, I use an Anker USB-C hub. For audio, I reach for AirPods Max when I want to focus without distractions.

• 16-inch MacBook Pro: Reliable laptop for day-to-day work
• Anker USB-C Hub: Simplifies connections for a cleaner desk
• Nomad MagSafe Dock: Premium dock for MagSafe-compatible devices

Audio

I prefer headphones over the monitor speakers. AirPods Max are the main pair for quality and focus.

• AirPods Max: Primary headphones for deep work
• Apple AirPods Pro: Compact earbuds for lighter tasks
• Sonos Beam Soundbar: Wall-mounted soundbar when I want the room to feel like a mini theater

Peripherals

I'm a mechanical keyboard enthusiast, and my favorite at the time was the Envoy by Mode Designs. Paired with the GMK Dracula keycap set and a Tomorrow-themed set, it added a personal touch. For pointing, I used the Logitech MX Master III for the extra buttons and ergonomics.

• Orbitkey Desk Mat: Desk mat with built-in storage
• Mode Envoy Keyboard: Favorite keyboard of that year
• Alexotos Linear Switches: Smooth linear switches; I get a lot of compliments on the sound
• GMK Dracula Keycap Set: Custom keycaps with a personal look
• Logitech MX Master III: Productive, ergonomic mouse
• Magic Trackpad: Gesture-friendly alternative to a traditional mouse

Chair and Ergonomics

For long sessions, I chose the Herman Miller Aeron. Fully adjustable, with lumbar support that keeps posture comfortable through the day.

• Herman Miller Aeron Chair: Ergonomic chair built for long hours

Miscellaneous Items

A few extras that round out the workspace:

• Ikea Pegboard: Keeps essentials within reach
• Govee RGB Floor Lamp: Ambient lighting for the room
• Fellow Products Coffee Grinder: For a better cup at the desk
• Electric Kettle: Quick brewing
• Larq Water Bottle: Self-cleaning bottle for all-day hydration

Conclusion

That was the 2023 workspace. I've since moved and updated parts of the setup (see the later NYC desk tour), but this one still captures where I was that year: minimal, functional, and tuned for long coding and creating sessions.

If you want the written gear list, it’s on my uses page.

I get a lot of questions about the templates, so this post breaks down the ones that actually matter day to day. There’s also a video walkthrough if you’d rather see the workspace in motion.

youtube.com

My Complete Notion Setup (2024) — Templates & Systems

A tour of my Notion workspace, including templates for content creation, development work, and personal productivity systems.

Full-stack developer roadmap

This roadmap gives a general overview of full-stack development without pretending to be a complete tutorial. It’s organized into chapters and modules — Fundamentals, Frontend, Backend, Databases — with curated resources so you can move at your own pace.

Content Manager OS

This is home base for content creation: projects, tasks, partners, and earnings. I’ve used it since the first video on the channel. Good content starts with clear writing and planning, and this template keeps research, production, and partnerships in one place.

It’s flexible enough for YouTube, writing, or other formats. Building the system once saved me from reinventing it every time a new project started.

App development notes

This is my personal worklog for standups, sprint planning, postmortems, and weekly notes. Team task tracking lives elsewhere — this space is for preserving context and making past decisions easier to find. Notion’s AI summary and Q&A features are especially useful here.

Personal finance

A simple budget and recurring-expense tracker with table calculations, categories, and tags. I don’t use it as heavily anymore — Notion isn’t ideal for granular money tracking when income and spend aren’t perfectly consistent — but it’s still a solid lightweight option.

Reading list

Built around the Notion Web Clipper. It’s not perfect, but it’s fast: turn any page into something readable and open it on any device later.

Snippets

A home for email templates and other text I reuse often. I’d like to add a quick fill-in-variables → copy-to-clipboard flow eventually.

LeetCode template

Interview practice without pure memorization: define the problem, capture the thought process, sketch on a whiteboard block, add code, and note complexity. It keeps practice problems organized in one place.

These templates have been the backbone of how I stay organized. They’re not perfect, and they keep changing — grab what helps and make it yours.

For a long time, I treated my own site like a sandbox. It accumulated half-finished posts, scattered components, and experiments without a clear purpose. Instead of helping me share my work, it started to feel distracting and directionless.

There's a tremendous power in using the least amount of information to get a point across.

That idea shaped this version of my personal website. Rather than implementing every new interface trend that catches my attention, I'm focusing on what matters most: curating my work, keeping useful references, and making it easy to find the things I want to share.

I still enjoy experimenting with new web technologies, but those experiments don't all need to live in the same place. This site can be quieter—a focused home for my work, writing, and the occasional life update.

A group of college friends and I signed up for what we thought would be a fun weekend experiment. The 2019 Smart Infrastructure Hackathon at The Cannon in Houston, in partnership with Microsoft Azure, asked teams to build solutions for improving US city infrastructure. We had 24 hours, coffee, and a room full of cloud solution architects when we got stuck.

Our Idea

After kicking around a few concepts, we landed on road potholes. They cost American drivers $6.4 billion per year in repairs and insurance. Fixing one runs about $30–$50; letting it sit can cost a driver closer to $300 a year. The math made it worth building for.

Our pitch was a two-layer detection system:

• Layer 1: Dashcam footage analyzed in real time with computer vision
• Layer 2: Phone telemetry to confirm abrupt movement on the road

Confirmed potholes would plot on a map for cities to act on. The driver UI would stay minimal: a quick confirmation prompt, nothing that pulls attention off the road.

How We Built It

Python on Microsoft Azure, end to end. Four moving parts:

1. Mobile telemetry

On Android, we used a publicly available sensor logging app with developer-friendly CSV export. While driving test routes, it recorded GPS coordinates, accelerometer readings on all three axes, and timestamps. Same raw device data you'd get from developer tooling, just packaged for quick export off the phone.

In Python, pandas ingested those CSVs and matplotlib helped us spot patterns. The main challenge was false positives: not every jolt is a pothole. Plotting accelerometer readings over time let us tune the threshold before sending a hit downstream.

Pythonimport pandas as pd
import matplotlib.pyplot as plt

df = pd.read_csv('/home/br/Downloads/testdata.csv')
df['Time'] = pd.to_datetime(df.Time, format='%Y-%m-%d %H:%M:%S:%f')

columns = [
  'ACCELEROMETER X (m/s²)',
  'ACCELEROMETER Y (m/s²)',
  'ACCELEROMETER Z (m/s²)',
  'Time'
]

df[columns].plot(x='Time')
plt.show()

2. Live computer vision

This was the harder layer, and where the Azure architects helped most.

The idea was straightforward: mount a phone on the dash, record the road ahead, and let a vision model look for pothole-shaped disruptions in the pavement. Azure Logic Apps watched for incoming frames and pushed them into the cloud. From there, OpenCV handled basic preprocessing (cropping the road surface, normalizing lighting) before handing images off to Azure Computer Vision for analysis.

In a full production version, each frame would get scored for surface anomalies. A high-confidence visual hit plus a matching accelerometer spike from Layer 2 would trigger the confirmation prompt. Either signal alone might be noise; together they made the detection feel much more reliable.

We didn't get the whole pipeline polished in 24 hours, but we proved the concept: frames in, analysis out, tied back to what the phone sensors were already seeing.

3. The Interface

One job: show a dialog when the system flagged a pothole, let the driver confirm or dismiss. We ran out of time to wire up both backend and frontend, but I mocked up the intent: minimal, glanceable, and safe while driving.

4. Mapping

For the backend, accurate geolocation was non-negotiable. A pothole report is only useful if a city crew can find it, and over a 24-hour hackathon we were collecting instances fast. Every confirmed hit needed a precise latitude, longitude, and timestamp so we could store it, deduplicate it, and eventually hand cities something actionable.

That is where clustering came in. One driver hitting the same rough patch might trigger a single spike. Several drivers reporting near the same coordinates over a few days starts to look like a real pothole. The backend grouped those nearby instances together instead of flooding the map with duplicate pins.

Folium handled the display layer: plot the collection of confirmed reports, cluster what overlaps, and give a quick visual read of where problems were stacking up. For the demo, that was enough to show how a city could prioritize repairs from crowdsourced data rather than waiting on manual inspection routes.

Pythonimport folium
import pandas as pd

SF_COORDINATES = (37.76, -122.45)
map = folium.Map(location=SF_COORDINATES)

for each in df.iterrows():
  map.simple_marker(
    location = [each[1]['Y'],each[1]['X']],
    clustered_marker = True
  )

display(map)

The Final Result

When the countdown ended, we had enough working to demo the full loop in 24 hours, thanks to strong team collaboration and a lot of help from the Azure architecture team. The judges called a draw for first place, and we walked away with Azure credits and seats at the host company's co-working space to keep building.

Looking back, it was such a fun little challenge. Twenty-four hours is barely enough time to sleep, let alone wire up computer vision, sensor pipelines, and a map backend. But that constraint is part of what made it exciting. A small group of people with different skills can sit down, pick a real problem worth solving, and actually start building toward something that could matter outside the room. Potholes are boring until you put a dollar figure on them and realize cities need better data to fix them. That is what I remember most.