cruz

inspiration 💡

as a team of ubc students, we constantly find ourselves sprinting across campus to make it to back-to-back classes. and even worse, we still get to class single and/or friendless. cruz was our solution to two common problems university students face: lateness and loneliness, built on the ideas of two common app industries: ride-sharing and social networking.

what it does ❓

cruz connects people in need of an on-campus ride with people on a bike, scooter, or skateboard already going there. it facilitates meaningful meet-cutes between new friends, allowing users and drivers to choose to deepen their connection off-cruz by swiping left or right at the end of the ride.

how we built it 🛠️

cruz is a Progressive Web App built with Next.js/React with Typescript + TailwindCSS for the frontend and Express.js on the backend. we integrated user login and data storage using Firebase Auth and Firestore Database, and brought its map functionalities to life using the Google Maps, Google Places, and Geolocation APIs.

challenges we ran into 🧱

• figuring out what a PWA was and whether it was worth making one
• big git merge conflicts
• conditionally rendering dynamic Google Map paths

accomplishments that we're proud of ❤️

• getting the Google Places API working
• resolving git merge conflicts
• one of our designer's first hackathons <3
• making an end-to-end design in less than 8hrs

what we learned 🧠

• became git masters
• character illustration in figma
• to not accidentally implement lo-fi (from: dev)

what's next for cruz 💭

• google calendar integration → after students to upload their class schedules, have cruz automatically book them rides in between back-to-back classes for simplified cruzing
• payment model → design a transaction model that improves driver experience & retention
• gamification → extend cruz’s social networking features by introducing collectable badges, leaderboards, and friend requests

Built With

• figma
• firebase
• google-maps
• google-places
• next
• next.js
• typescript