Ever since COVID-19 hit, it has disrupted when and how businesses open. In my home country, Lebanon, the opening and closing times of nearly all amenities around my home have been very inconsistent, due to business owners' decisions and government regulation. Also, many shops and businesses have their own rules before letting you enter to their places, most hang a sign on the door that says for example "Please, masks are mandatory". All of this has caused frustration as to when can can we visit those amenities and what precautions should we expect before heading out!
What it does
Amenities map, with the help of Radar.io APIs, gets the approximate location of the user, offers multiple types of amenities the user would like to visit, and then, after selection, the places around the user is filtered and he/she is shown relevant places that are currently open, or will open soon. This way, I, for example, can check if my local coffee shop is open, what do i need to grab, and then head out confident that I'll get my cup of coffee!
How I built it
First, i started doing low fidelity wireframes on paper. Then i moved to Sketch for Mac to design my screens, followed by Adobe Photoshop CC for logos and assets. I wanted to come up with a fresh, modern, and unique logo. After setting up the assets i moved to development phase.
In the development phase, I used the latest Angular version (10.1.4) to create 2 interfaces, the home (intro), and the actual tool. I have also added Nebular which is a component framework for angular, and my beloved CSS framework Bulma. The actual tool makes use of Nebular's buttons, layout structure and other components, keeping UI and UX in mind. I developed the needed components, signed up on Radar.io to get my keys, tested them using Postman, added the necessary location service, and finally connected everything together. Last but not least, and since my tool is made for the world, i added support for internationalization! translating the app should be easy.I then tested everything to make sure it runs as intended. Lastly, i got a domain from domain.com and got a domain email address to include in the project.
Challenges I ran into
It's been a while while since i last developed an app with Angular, i faced warnings, compilation errors, and stuff that just wouldn't work, but eventually nothing gets in the way of proper and systematic debugging (and multiple cups of coffee). Also, reading Radar.io's documentation, understanding it, and making it work was also challenging. While their documentation is good, It took a while to get the hang of it. It's very powerful but sadly the juicy and advanced features are paid. I also was researching other libraries before getting it to work, but thankfully it did.
Seems that Radar.io does not support Lebanon, no places data came out of my location, so i had to add some mock data only in the last screen (ft. Montreal, QC, Canada).
Accomplishments that I'm proud of
Im proud of many things! It's been a while since i made a full fledged product (from design to implementation) with lengthy hour streaks (48 hour hackathon). I dusted off my digital tablet, drew Octocat, updated myself on the latest version of angular, discovered the new additions of Bulma, and of course discovered Radar.io. Very handy and powerful set of APIs for location. Also, this web app has the potential to make people's live easier if made official and publicly available. I can also make a video at ~4AM, after 3 cups of coffee, and squeeze a 48-hour product demo in ~2 minutes.
What I learned
I can code for very long hours, happily. Radar.io is powerful for location based apps.
What's next for Amenities Map
Develop a portal for business to use and update their information. Get people to try out and let me know their thoughts. Improve and support more types of amenities. Overall make it more robust, and the sky is the limit. Along the way of developing it, i was getting a lot of good ideas that would make headlines!