--- tags: tech --- # GDSC [WATER QUALITY MONITORING PROGRAMS IN SUB-SAHARAN AFRICA](https://reachwater.uk/wp-content/uploads/2020/09/WQMonitoringPrograms-SubSaharanAfrica_oneSheeter_v5.pdf) ## Electronic Part ![image](https://i.imgur.com/gi5aba9.png) ``` sample.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>HTML 5 Boilerplate</title> <link rel="stylesheet" href="style.css"> </head> <body> <p>PH: 7.1</p> <p>Resistivity: 18MOhm</p> <p>Temperature: 22 C</p> <p>Location:&nbsp;57.16205,&nbsp;-2.35529</p> </body> </html> ``` ## Application Part Basically use Firebase, build serverless application ### Webapp Which language? ### Hosting webapp [Firebase Hosting](https://firebase.google.com/docs/hosting) ### API [Cloud Functions for Firebase](https://firebase.google.com/docs/functions/get-started?hl=ja) * https://zenn.dev/msy/articles/856e9b5855c45c ### Database [Cloud Firestore](https://firebase.google.com/products/firestore) * https://qiita.com/misa_m/items/0afbd063ff13b49f2729 ### Authentication [Firebase Authentication](https://firebase.google.com/products/auth) * https://qiita.com/TakeshiNickOsanai/items/7eed1ca8b9e482d392bc May be unconfotable for users, so should be considered; OK if we can log in with a Google account. ### Get Current location info [Geolocation API](https://developers.google.com/maps/documentation/geolocation/overview) * https://zenn.dev/sweflo/articles/8c34c081cb764c ### Map component [React Leaflet](https://react-leaflet.js.org/) * [Apply for Next](https://dev.classmethod.jp/articles/tried-react-leaflet-with-nextjs/) [Google Maps JavaScript API](https://dev.classmethod.jp/articles/google-map-marker-aws/)