Releasing Carpool 2.0 — Now in React/GraphQL
We’re so excited to announce the launch of Carpool 2.0, now in React and GraphQL! This project was a part of the Open Source Accelerator over summer 2020, and we’re so proud to have been able to come together in this time of crisis and rebuild a successful product from scratch. v2.0 combines the same reliability of v1.0 with new features such as ride creation with custom locations ANYWHERE in the world. Now the Rice community can hail rides together, wherever they are.
Why we rebuilt Carpool
Carpool was our most successful product to date. With over 1500 users at the peak of its launch, users loved our product, but we knew there were fundamental problems with how it was built.
The app was built in AngularJS and MEAN stack. It happened to be the only app in our portfolio that was built with Angular. Once the team that built the app left RiceApps, we were unable to maintain it. At RiceApps, one of the goals for us was to ensure that our projects can be maintained far into the future. This meant porting it to a technology that RiceApps could commit to for the forseeable future. Additonally, the absence of developers who could work in Angular meant that we were unable to build new features that our users wanted. This meant we had to port the app (which initially took 3 years to build) to React and GraphQL.
We realized that Open Source Accelerator would be our best opportunity to work on Carpool. With developers looking for stable products to learn the tech stack on, we could rebuild Carpool over the summer. And we went ahead and did so!
We were faced with the task of completely recreating and redesigning the Rice Carpool website. We had the advantage of having an already finished product (written in AngularJS) for us to work off of, but we decided to completely redesign the user interface as well as adding several new features.
- William Yao. developer
William and Peter Jia, led by the fantastic Winnie Li and supported by our designers Helena Hu and Cloris Cai ensured that the app was completed just in time for the Fall 2020 semester. The most incredible part for us was to see the growth in the technical abilities of all members on the team. When they joined OSA, they had no experience with web technologies. By the end, they had created a complex app from scratch.
Architecture
The website received a complete makeover, where we focused on having a darker, more clean look. The website was revamped out with a cleaner, welcoming landing page, a separate page for creating and finding rides, and a profile page where a user can edit their details as well as accessing their upcoming and previous rides. The About Us page was perhaps added as an afterthought so that users can stay updated with our product roadmap as well FAQs and common bugs. In hindsight, it was a great decision.
Challenges
No journey is rewarding without its challenges. There’s no better people to explain this than the people who built Carpool themselves.
Through our time in OSA, we faced many technical challenges as the program and development of the website went on. Our first challenge was the dreaded CSS. On paper, CSS is a very simple concept. There is very little logic behind styling a webpage and lining up elements the way you want them. This was made even simpler with the help of Helena and Cloris, who designed and entire mockup of the website for us to follow. However, there always seemed to be something finicky with working with CSS: sometimes the page wouldn’t even show up, sometimes the layout is completely messed up despite our careful calculations. This list goes on and on.
For CSS, to make things cleaner and easier to understand, we utilized styled components to help solve some of our problems with layouts. We also used CSS flexbox and grid, which are two very powerful CSS components which help dynamically resize components to fit more screens. For some more complicated components such as checkboxes and dropdown menus, we used some components from Material-UI, a powerful CSS library.
- William Yao
The challenges they faced soon graduated from the minute details of CSS to advanced APIs.
The second major problem I faced personally was trying to implement a feature to add custom locations via Google Maps. Luckily, React has a plethora of packages made by the community for us to use, and the react-google-autocomplete package was just what I needed. However, getting it to work with the website was a real challenge. On our new ride page, I added an option to select both a custom departure location as well as a custom arrival location, and the api seemed to work great with just one custom location. However, the biggest challenge came when I was unable to get both of them working at the same time.
To troubleshoot my challenges with the Google Maps API, I first tried making a Github issues post on the react-google-autocomplete page, but to no avail. After hours and days of debugging, I found out (together with the help of other mentors) that the bug was related to setting the Google Maps API api key in the wrong place. Instead of setting the api key twice in the ride creation page, declaring the key inside a script tag within index.html solved the problem! I found out later that this is because Google Cloud doesn’t support two different instances of the Locations api on the same page, so creating one instance in index.html fixed the issue.
- William Yao
What’s next?
The development of Rice Carpool is far from over. There are still several features and improvements that we’re planning to implement in the near-future. We’re focusing extensively on mobile integration, as the website is not responsive enough for mobile devices. This is a problem because users may need to access the website while they’re at an airport, without access to a desktop computer.
As part of our efforts to create features that the users wants, we’ve added feedback mechanisms to the header of the website, and plan on implementing any features that users request as well as any bugs found during regular use of the website. A more detailed and regularly updated timeline is also found on our About Us page.
Learnings
Finally, we at RiceApps prioritize personal growth above everything else. It is humbling to see we could help the Rice community through not only our tech, but also helping people achieve their goals in such a challenging time.
Originally, I was going to have nothing to do this summer. Quarantine has been a thing for two months now and I was itching to have something to work on over the summer. After seeing the first email sent out regarding OSA, I realized that this was a golden opportunity for me to learn and get my hands on a real project that people would use. I had always wanted to join RiceApps and create projects for the benefit of the Rice community, but I was always scared that I did not have the skills necessary to join. I barely have any experience coding outside of classes, but OSA, which was meant as a more friendly and introductory experience into RiceApps, seemed perfect for me to learn the basics of full-stack development.
Coming into OSA, I barely had any experience coding outside of Rice classes. I was always pretty solid at coding for classes such as COMP 140, 215, and 321, but I never put my skills to use outside of classes to build my own programs and websites. I had a bit of experience creating a website from scratch before, but I was using vanilla Javascript and hard-coded most of the CSS. All things considered, jumping straight into carpool was a daunting task for me, as I had no idea how to setup a project environment, work with others on a website, and the key differences between frontend and backend.
My first task at hand was to create the header for Carpool. I felt like this was a good first task to have, as it is only a small part of the website and I had a design to go off of, thanks to Helena and Cloris’ design on AdobeXd. The process went really well and I was even able to add my own custom animation to the header icons when I hover over them! This gave me a boost of confidence as I went on to implement the landing page. Again, I had the help of a mockup to implement it, and through the magic of CSS grid, the process was also really smooth. However, things are not always smooth like this, as my next task at hand was to implement the Google Maps API into the create ride page. Even though this feature was much more complicated than my previous two tasks, I was most excited about this, as it is a completely new feature to carpool that I’m confident a ton of people would use to coordinate rides to restaurants and stuff. Luckily, there are several react packages that simplify the process of integrating Google Maps into your website, but I still encountered major roadblocks along the way. Firstly, this was my first encounter with working with the backend, and I had a hard time familiarizing myself with how GraphQL worked. Second, there are several edge cases involved with the introduction of custom locations. I had to consider that when a user selects a custom location, that I need to create that location in the backend and immediately add that to the ride submission. There’s also a catch to this, and that’s to first check if that custom location has already been created before, or else an error would occur. As a result, the submit ride function that I wrote is definitely the messiest single piece of code I’ve written. However, after hours of debugging and testing, the code worked flawlessly, and I’m really proud of my work, despite the fact that the code can definitely be improved, which is something I plan on doing anyways. The last task I had to work on was the about page, which was a breath of fresh air from messing with the backend. Here, I utilize several Material-UI packages to make my life easier, implementing a FAQ with a smooth animation, as well as organized cards for the acknowledgements and a detailed roadmap.
I have learned so much through my summer with OSA that I don’t think I can fit it all in this article, but overall I’m just super grateful for this opportunity. I never had the chance to work on a project that would eventually be deployed and used by actual people. This alone made the experience all worth it. The major thing that I learned was basically the entirety of full-stack web development with React and GraphQL. I worked on both the frontend and backend of the website and created several components and pages of the new Carpool website, and in doing so, I can confidently say that I’m now an experienced full-stack developer thanks to OSA! Another major thing I learned was the ability to work on a long-term project with a team, even though everything is remote at the moment. Sometimes collaboration was difficult when you can’t work face-to-face with others, but our Carpool team was always proactive and we always got things done on time with a smile. I want to give a huge shoutout to Winnie Li, my mentor for this project, and Guancong Jia, my mentee partner! They both did so much work for the website that I could’ve never completed without them, such as the whole interface for finding and joining a ride, as well as the profile and login page. They were always willing to help at all times and I learned so much about React along with them. Overall, OSA was an invaluable experience for me, and I learned more in just a summer than I could’ve with anything else.
-William Yao
Acknowledgements
Thanks to Winnie Li, Peter Jia, Willie Yao, Helena Hu Will Mundy, Cloris Cai, Shryans Goyal and everyone at RiceApps + OSA for their contributions to the project as well as to this article. Y’all are wonderful!
