Totalvery

Web site that shows price, ETA and offers for ordering a delivery from a restaurant.

Comment

Inspiration

Since the theme is "Social Good", we thought what people need the most. Due to COVID-19, many people started to order a delivery from a restaurant rather than going to the restaurant itself, but there are so many delivery services out there that offers different costs and features. To save people from this hassle, we built a web site that shows and compares costs and features between the three most-used delivery services: DoorDash, Uber Eats and Grubhub.

What it does

With the given location, this web site gives the user list of restaurants open near that location. Then, user can click on any restaurant they want, or choose filters to fit their taste. After selecting a restaurant the user can see the different fees, delivery time, rating and promotions for the restaurant. From there, the user can either look at menu or order from the DoorDash, Uber Eats, or Grubhub.

How we built it

For backend, we created our own API using Django REST Framework that requests and fetches data about restaurants from DoorDash, Uber Eats, and Grubhub. Once user searches an address, restaurants' information at the address is going to be stored at our DB, MongoDB Atlas, which is a global cloud DB. This Django-based backend interacts with React pages.

For frontend, after sketching a web design, we used React to build a web page. Once main home page was done, we moved on to feed page, then store page, login page, and account connection page. Also we stylized the web pages using Bootstraps.

Challenges we ran into

  • Adjusting contents by different window size
  • If restaurants do not have default images, replace the empty image with no-image image
  • Extracting information from a JSON file and structuring a new JSON file format to provide necessary information for the users

Accomplishments that we're proud of

  • Google map shows the location the user searched
  • Created a Totalvery API that integrates information from delivery services and provides the necessary information to the users
  • Saving the search result in the MongoDB to provide better performance when the location was searched previously

What we learned

  • Coding with team
  • Using Docker to code in equal environments
  • Using React to build frontend
  • Using Bootstrap for frontend design and development
  • Learning how to use Javascript, HTML and CSS
  • Using Django REST Framework to build API
  • Connecting MongoDB with Django for better performance
  • Using Python Requests library to send query and get data from external websites or APIs

What's next for Totalvery

  • Support login and sign up feature
  • Implement functionality to enable users to link their account with UberEats, Doordash and GrubHub, which helps Totalvery provide more reliable information about estimated fees
  • Enable users to add items into cart
  • Deploy the web site using Heroku
Share this project:

Updates