Bubble Tea App

This is an app where users can learn about the short history of bubble tea, and submit their favorite combinations. And a leaderboard shows which flavors are loved by the users.

The user should be able to do:

Can drag and drop one of the teas and one of the toppings
Can click one of the teas and one of the toppings
Submit drink combination to the database
Clear the drink choice
View the history of bubble tea
see the leaderboard of popular drink combinations

View the site live here

Tech stack:

Screenshots/gif

Installation

Before installing, make sure you have node.js installed on your machine. If it is already installed, follow the steps below.

Step 1

git clone [email protected]:victoriacheng15/bubble-tea-api.git

Step 2

cd bubble-tea-api

Step 3

npm install

Step 4

Please refer to this guide on how to set up the MongoDB atlas.

Step 5

npm run dev

What I learned

This project helped me to understand how to interact with the frontend with the backend server. Users can submit their information to the database, in this case, the information will be their favorite type of tea and topping. The page needs to ensure the information is correct before sending it to the server. Once the information is submitted, the server will either create or update the data.

I also learned about drag-and-drop API. One thing I didn't realize is that the drag{somrthing} (e.g. dragenter, dragstart, etc) is click type, which means it would not work on mobile devices. For drag-and-drop API to work on mobile devices, it needs to use touch{something} (e.g. touchstart, touchmove, etc) event listeners for the users to use this app on mobile devices.