Mask map

Project overview

In response to the global outbreak of severe infectious pneumonia since 2020 and the shortage of masks in Taiwan, the government has implemented a name-based mask distribution system. The system requires people to buy masks from pharmacies by their real name registered. Thus, I created this mask map for the public to check the number of masks left in each pharmacy.

Goal

With this map, people can reduce the chances and time of not getting a mask from the pharmacies due to insufficient stock.

Introduction

  • Can be positioned according to the user’s location and display nearby pharmacies
  • Search for nearby pharmacies by using the area filter above
  • Pharmacy information and the number of masks for adults and children are clearly stated and can be linked to Google Map through the address
  • Support RWD that allows mobile phone users to use it easily

Skills

  • HTML5
  • CSS3
  • Vue.js
  • Vue CLI
  • Leaflet + OpenStreetMap
  • RESTful APIs
  • RWD

Showcase

Github
https://github.com/Caleb-Liao/mask_map
‍

Demo
https://caleb-liao.github.io/mask_map/dist/
‍

Design sketches  by Chien-liang
https://challenge.thef2e.com/user/3?schedule=4427#works-4427
‍

廖浚宏
ChunHung (Caleb), Liao
This website is best viewed on desktop
Enjoy! © 2024 Chun-Hung, Liao
Contact
EmailInstagramLinkedin