MyMizu-neptune

This is a team project created during our study in Code Chrysalis in collaboration with MyMizu, a Tokyo based non-profit startup.

mymizu と提携して、社会貢献を元に行なっているアプリに、mymizu が今まで達成してきたことを拡大または強化することを通して、もっと注目を集めたり、環境保全をより追及できるような機能（ルート検索やレーティング）を実装。

MyMizu provides a crowd-sourced platform for locations where you can get water with your water bottle to encourage users to consume less bottled water. We've created an app prototype with following enhanced features. Users can review on water refill spots and find a route with water refill spots around.

You can access the deployed app from the following link: https://mymizu-neptune.herokuapp.com/main (Accessible from desktop or mobile.)

User Story and Clickstream

ユーザーはピンをクリックしてその場所の情報がわかる。また、行きたいルートを検索できる。そしてそのルートの近くの給水所がわかる。その給水所の評価やコメントもできる。

As a user, one can click the pin where a water refill spot is and give ratings and comments to the spot. Also, one can find a route and with water refill spots around.

Clickstream 1:

1. Click on a pin to view the water refill spot's detail
2. Click on 給水を記録 (log refill here) button
3. Give a rating stars and comment if any
4. Click on 給水を記録 (log refill here) button again to save the result

Clickstream 2:

1. Click on ルート (route) button on the footer function list
2. Input location in From and To
3. Click on Search button
4. A route and water refill spots nearby will be displayed

Tech Stack

• Front-end
  • React.js
  • react-google-maps API (https://www.npmjs.com/package/@react-google-maps/api)
  • Bootstrap
• Back-end
  • Node.js
  • Express.js
  • Knex.js
  • PostgreSQL
• Data and APIs
  • Google maps: Map marker, Geocoding, Route planning
  • MyMizu: water refill spot info
• Deployment and CI/CD collaboration
  • Heroku
  • Github
  • Slack

Sample Screens