Bubble Sort


Angela Chen

I-Tung Chiang

Danny Kuo


3 weeks

Fall 2020


Full-Stack Developer



Web Development


Bubble Sort is an online boba tea delivery website built for a boba tea store located at Squirrel Hill, Pittsburgh. The website provides customer-side interfaces and owner-side interfaces to accommodate both needs.

This is my final project for a course I took at CMU - 17637 Web Application Development, in which I worked as a full-stack developer and designer in a team of 3.


In this project, my learning goals are to practice the knowledge I learned from the course - programming web application servers with Python Django, and to strengthen my skills in building web interfaces with React. Also, E-commerce is one of the fields I'm interested in and I hope to learn the relevant technologies that help build a successful E-commerce website.

As a team with 3 Asian students, the idea of Bubble Sort was born when we witnessed some small businesses in Pittsburgh that sell amazing Asian food struggling on effectively communicating with their customers during COVID-19, when their business had to be moved to online. We hope to build a platform where they can create and manage menu items and orders, while the customers can easily order, pay online, and track the delivery status updated by the owner in real-time.

Based on my past experience in UI Design (with Figma), I volunteered to be the designer for this project and efficiently designed the visual style and created high fidelity mock-ups within a limited time.

Screen Shot 2021-02-15 at 12.45.10 AM.pn
Screen Shot 2021-02-15 at 12.45.24 AM.pn
Screen Shot 2021-02-15 at 12.45.40 AM.pn
Screen Shot 2021-02-15 at 12.45.53 AM.pn
Screen Shot 2021-02-15 at 12.46.48 AM.pn
Screen Shot 2021-02-15 at 12.47.14 AM.pn

Proceeding to development, I was mainly responsible for implementing all the owner-side features including:

  • Create, edit, update and delete (CRUD) products with image, description, category, and price

  • Manage and arrange the order of categories, and the products inside each category

  • View order information and update order status to provide real-time feedback to customers

  • View and manage customer's reviews

I used Django REST Framework to build our API and made a separate Django app for the front-end using React, which communicates to the Django REST API through Axios.


  • Client-side framework:  React.js

  • Server-side framework:  Django

  • Deployment:  Heroku

  • Third-party APIs:

    • Geocoding API - converting an address into spatial data

    • Googlemap API - getting user's address

    • Distance Matrix API - calculating travel distance and estimate time

    • Stripe API - processing online payment