What’s Up With This Water?

Secured 3rd place locally in Wichita, KS during NASA Space Apps Challenge 2023.

NASA SpaceAppshackathoncompetitionweb developmentreactvite

Overview

NASA Space Apps Challenge is a 48-hour hackathon where teams from all over the world compete to solve challenges posed by NASA.

Outcome!

  • Won 3rd place locally in Wichita, KS. With a team of 5, winning a total of $500.
    • team members:
      • Me: Adrian Yip
      • Benjamin Serrano
      • Julian Tee
      • Khang Tran
      • Nicholas Ang

The Challenge

Create a user-friendly app that lets people check the quality of water in their local water bodies. The app should also provide information about endangered species living in the water and offer tips on how to protect them. Make the app easy to use, perhaps similar to a weather app, but even simpler.

The Solution

We listed the requirements then whiteboarded the solution. We decideded to separate the responsibilities into 5 main components. Frontend, WaterData: ListWaterBodies, WaterBodyData, AnimalData: ListAnimals, AnimalData.

  • Utilized Vite for rapid development.
    • Chose React for speed and familiarity.
    • Implemented TailwindCSS + UI Library for styling.
    • Integrated OpenStreetMap for mapping.
  • Employed Django and Django Rest Framework for the backend.
    • Utilized SQLite for database functionality.

The Result

Within 48 hours we were able to create a working prototype. We were able to get the frontend and backend to communicate with each other. Scraping water and animal data from various sources from provided by NASA, then storing them in a database. Then serving the data through an API. The frontend then uses the API to display the data on components and a map. The process was fun, eventhough we couldn't achieve our original goal, I believe me and my team was happy that we were able to make something together. The last few hours were us scrambling to stitch the backend and frontend together. Which was a great learning experience. I now know to use dummy data to test the frontend while the backend is being developed and reading backend code to be able to know what im I'll get from the apis.

tl;dr

  • Established communication between frontend and backend.
  • Scraped and stored water and animal data from NASA-provided sources.
  • Implemented an API to serve data to the frontend.
  • Overcame challenges, learned to use dummy data for frontend testing during backend development, and gained insights into reading backend code for API understanding.