About the Project
Inspiration
As Rice students, we often found ourselves struggling to get from class to class on time, especially when trying to figure out which paths were the fastest. Generic tools like Google Maps don’t reflect the unique layout of Rice: they cut straight through buildings, ignore sidewalks, and don’t capture key student needs like servery hours or locations of classes. That gap inspired us to build Owl Map, a tool designed by Rice students, for Rice students.
What We Learned
- How to use React and Leaflet to build an interactive map UI.
- How to structure a backend in Python (FastAPI) that serves nodes and routes based on a graph of campus.
- How to containerize services with Docker and manage persistent data with Postgres.
- How to calculate distances using the Haversine formula:
$$ [ d = 2R \cdot \arcsin \left( \sqrt{ \sin^2\left(\frac{\Delta \phi}{2}\right) + \cos(\phi_1)\cos(\phi_2)\sin^2\left(\frac{\Delta \lambda}{2}\right) } \right) ]
where (R) is Earth’s radius, (\phi) = latitude, and (\lambda) = longitude. $$
- How to design a clean, intuitive interface for students with collapsible sidebars and quick ETA lookups.
How We Built It
Frontend (React + Tailwind + Leaflet):
- Displays the Rice campus map.
- Lets users select “from” and “to” nodes to get an ETA.
- Shows serveries and their live hours.
- Provides class scheduling and daily walking summaries.
- Displays the Rice campus map.
Backend (Python + FastAPI):
- Provides two APIs:
/nodes(list of all campus nodes with coordinates) and/navigate(path + distance). - Implements graph-based routing to ensure paths stay on sidewalks instead of cutting through buildings.
- Provides two APIs:
Infrastructure (Docker + Postgres):
- Containerized backend and frontend for easy deployment.
- Stores node/edge data in Postgres for flexibility when expanding the map.
- Containerized backend and frontend for easy deployment.
Challenges We Faced
- Getting Mapbox to work initially—dealing with tokens, permissions, and styles was harder than expected.
- Switching to Leaflet solved styling issues but required us to rethink how to hardcode and manage edges.
- Making the paths realistic: the algorithm initially drew straight lines through buildings until we hardcoded sidewalk-based edges.
- Handling data flow between frontend and backend cleanly, especially normalizing nodes from the API so they worked across different components.
Takeaway
We set out to make Rice navigation easier, and in the process, we built a full-stack application that blends algorithms, UI design, and infrastructure. Owl Map is not just a tool for getting from Duncan Hall to Fondren Library, it’s a platform we can grow with real-time data, better scheduling features, and even accessibility insights in the future.
Built With
- css3
- docker
- fastapi
- git
- gunicorn
- html5
- javascript
- leaflet.js
- postgresql
- python
- react
- sqlalchemy
- uvicorn
- vite

Log in or sign up for Devpost to join the conversation.