Rice Carpool
Ever needed a buddy to split Uber to the airport with?
I know I certainly have. And so has most Rice students.
Rice Carpool is a mobile website for Rice students to schedule Uber Rides with one another. It is a long-standing project of Rice Apps, which is our student software development club that is focused on software solutions for the good of Rice and the Greater Houston community.
![Carpool V2](/assets/img/carpool/carpool-V2.png)
![Carpool V3](/assets/img/carpool/carpool-flyer.png)
I was a core developer for the 3rd edition of Rice Carpool from May 2021 to May 2022.
Over my time here, I build the front-end for some of our key app functionalities, supported other developers with their features, fixed a bunch of bugs, and ran around half of Rice’s residential colleges to promote our project on 03/01/2022. It was a great time.
Features
The first feature I worked on was Ride Creation, as part of Rice App’s Open Source Summer Accelerator and with zero web development experience. I remember learning ReactJS, nodeJS, GraphQL for the first time and struggling with CSS for most of it.
![Landing Page](/assets/img/carpool/landing.png)
![Ride Search](/assets/img/carpool/ride-search.png)
![Ride Create](/assets/img/carpool/ride-creation.png)
The idea here is pretty simple, the two core features are ride search and ride creation. In particular, ride creation functionality encompassed building the interface (form) for user to input their credentials, saving that information, and sending a GraphQL query to mutate our MongoDB database where the ride informations are collectively stored.
The following remain one of my proudest code snippets at the time:
const addRide = (ride) => {
createRide({
variables: ride
})
.then((obj) => {
addToast("Congratulations! Your ride has been successfully created.",
{ appearance: 'success'});
const rideID = obj.data.rideCreateOne.record._id;
window.open('/ridesummary/' + rideID, '_self');
})
.catch((error) => {
addToast("Sorry, an error occurred processing your new ride. Please try again later.",
{ appearance: 'error' });
});
}
For context, check out the source code. Inspired heavily by the react-task-tracker tutorial hehe.
The second feature that I have worked on was User Onboarding. We wanted to restrict assess to the site to Rice students and also be able to store new user information for future rides. The workflow basically consisted of:
Verifying user as Rice student via Rice SSO Authentification. If the user is registered within our backend MongoDB database, then they are redirected to the Ride Creation. Otherwise, they are prompted with the onboarding page to store their information.
![SSO Pop-Up](/assets/img/carpool/sso-pop-up.png)
![Authentication](/assets/img/carpool/authentication.png)
![Onboarding](/assets/img/carpool/onboarding.png)
A big challenge with implementing this feature was determining the flow of the verification process. In particular, interacting with Rice University’s SSO verificaiton is slightly troublesome since it inherently has suboptimal error handling and the user could possibly be exited from this workflow in the midst of their onboarding process. My (potential naive) resolution was to leverage localStorage
tokens to track the user’s state within onboarding cycle.
const updateUserInfo = async (formData) => {
await updateUser({ variables: formData });
const nextPage = localStorage.getItem("nextPage");
if (nextPage) {
localStorage.removeItem("nextPage");
localStorage.setItem("lastPage", "onboarding");
window.open(nextPage, "_self");
} else {
history.push("/search");
}
};
const cancelOnboarding = () => {
localStorage.clear();
if (previous && previous !== "onboarding") {
window.open(previous, "_self");
}
// default behavior is to route to home page
history.push("/search");
};
Results
![Carpool Final](/assets/img/carpool/snapshot.png)
Our product launched on March 1st, 2022 to the Rice University student body. We placed flyers all over campus and made mass announcements during lunch period at all of the student dining halls on campus. It was a scary moment to wait and see whether students were willing to use this project that we have worked on for over a year.
![Statistics](/assets/img/carpool/stats.png)
Luckily, the app was a massive success! Within 30 minutes of our mass announcments… we had over 64 visitors. And by the end-of-semester Rice Apps project demo day, Rice Carpool had been visited by 2.3K users (unsure if this is distinct, but still pretty good!) Our MongoDB database showed that there were over 450 registered users and around 280 distinct created rides within the 3-month period between spring break and the start of summer. For context, there are only a total of around 4000 students on Rice campus and around 40% are Texas residents.
Today, Rice Carpool is still in use by various venue and has been expanded to include locations beyond airports. There was an article written about it by the Rice student newspaper and it is a go-to scheduling app for Rice’s successful ice skating club led by one of our developers, Anya Gu.
Acknowledgements
The success of this project would not have been possible without:
- the mentorship of our product manager and tech leads
- my fellow developers
- our awesome designers
- previous Carpool teams and the Rice Apps community!
For more on the codebase, feel free to checkout our repo.