Why did I choose to build this project? đ€
This project was one of my favourite tools for breaking my way out of tutorial hell đč. I also wanted this project to serve me as a display of my JavaScript skills to potential employers or collaborators.
đ You can take a look at the finished live project here. đ
What did I want to implement in the project?
By the time I decided to start working on this project I had just finished learning about Promises, async...await
, APIs and error handling. I wanted to code a project to implement all of this knowledge, also include that project in my portfolio, and keep sharpening my design and coding skills đ€. I usually try to maximise the return on time invested, so I tend to do projects that can serve multiple purposes.
Finally, I also wanted to continue experimenting with the whole process of building a website from scratch. As I did with my previous project, I wanted to gain experience dealing with user stories, the definition of features, and the design stage, and also with the testing and deployment stages. Once more, I also wanted to get a feel of how much work (and time) was involved in the operation.
Time harvesting
As with all the other projects and learning activities I'm involved in lately, I decided to use Clockify (not sponsored by them, yet đ). I used this app to calculate how much time the different parts of the project will take, and thus have a good estimate in the future to calculate how much time and effort a new project will take me.
The overall process of working on this project, from start to finish, took around 45.5 hours.
A bit more than 2.5 hours were allocated to API research, 4.5 hours to design, around 14.5 hours to HTML and CSS (mostly CSS⊠it was a bumpy ride đ ), and the rest to JavaScript.
Choosing the APIs
At first, I didn't know what the projectâs theme will be, so I started by researching free APIs to get some insights on what could be done. I great resource that I found is this list of public APIs on GitHub, where APIs ranging from animals and anime to videos and weather, are being displayed.
I found a couple of them that caught my interest, and I decided to use one that provides COVID-19 up-to-date data. I imagined that it would be interesting to be able to compare how different countries are experiencing the COVID-19 pandemic and get some insights about their vaccination campaigns (more on this in "User stories"). Plus, we had just entered a new lockdown in my state đ·, so the theme felt right.
Workflow
I followed the same workflow as with my previous project:
Initial planning
- Define user stories
- Define features based on user stories
- Create a flow chart linking the features
- Define the architecture the program will have
Design
- Search for inspiration
- Define colour scheme and typography
- Make a graphic design of the site
Code
- Build HTML structure
- Build the needed CSS to implement the graphic design into actual code
- Build JavaScript code to implement the features defined during the initial planning
Review and deploy
- Test for browser compatibility
- Test for responsiveness
- Validate HTML and CSS code
- Deploy the project
Initial planning
The initial planning for this project was a bit more complex than the one of my previous one, especially because it had many moving parts such as APIs, the creation and deletion of elements, and calculations that needed to be updated âon the flyâ đȘ°.
User stories
I started by putting myself in the shoes of the users and, thus, I could write the following user stories:
- As a user, I want to be able to get the following COVID-19 information about my country:
- Confirmed cases
- Recovered cases
- Deaths
- Administered vaccines
- Partially vaccinated population
- Fully vaccinated population
- As a user, I want to be able to add other countries so I can compare COVID-19 data between them.
- As a user, I want to be able to delete countries so I can add new ones.
Defining features
Based on the previously defined user stories, I proceeded to determine the features that the COVID-19 Dashboard app will implement. I also include some nice to have features to improve the user experience.
- Get the userâs locale information and render the COVID-19 information for the userâs country.
- Provide a search box with a predefined list of countries to search COVID-19 data from.
- Compare up to 4 countries.
- Provide the user with the possibility to delete compared countries individually or in bulk.
- Provide the user with the possibility to change the comparison reference country.
- Provide a nice-looking background but also allow the user to deactivate it so it doesnât interfere with all the information that would be displayed.
- Make the app responsive.
Going visual: making a flowchart
Due to the relative complexity of the app, I definitely wanted to make a flow chart of it to have a clear idea of how the user will be interacting with the page.
Defining tasks on Kanban board
As with my previous project, I decided to use the Kanban framework to address the defined features and start working on them. In this case, I used Notion instead of ClickUp, to test how comfortable I felt working in this way with Notion, and I must say I prefer using ClickUp due to its better features for this type of work đ€. Again, I could have used Asana, Trello, or GitHub Projects. I think the tool is not that important as long as there is a Kanban board somewhere (or any other similar framework, for that matter).
In the board, I included the previously defined features, the items created on the flowchart, and the main project workflow elements.
I began by inputting all the tasks and assigning them to the "Not started" column. During the project, the Kanban board was useful to keep track of what needed to get done. This is a snapshot of how it looked during the project:
Design
Searching for inspiration
In this project, I knew I wanted to display the information on cards, so I browsed the Internet to see how professional designers had implemented cards in their work. After looking for quite a few designs, I decided to build a card containing the country flag at the top, the COVID-19 infection related information below the flag, and the vaccination information at the bottom part of the card.
Defining the colour scheme and fonts
When defining colours, I tried to avoid the ones that were too strong or bright, because the user will have to read numbers clearly and easily. After trying many different combinations on the great site Coolors, this was the winner đ„:
Designing for desktop and mobile
The next step in the workflow was building the design, and I, once again, used Figma. I experimented đ§Ș for quite some time testing different card shapes and sizes until I found one that I thought worked well. I also included the colours from the colour palette and the desktop and mobile versions of the design.
You can take a closer look to this design here.
Coding the foundations: HTML, CSS and JavaScript
Building the HTML code for this project wasnât too difficult. The index.html
document is like a container on which the cards will be rendered using JavaScript code.
You can take a closer look at the source code of this project here.
Going crazy (again) with CSS
Even though the design seems simple, it required considerable effort from me to transform the graphic design into closely enough CSS style đ„.
I experimented with the backdrop-filter
CSS property and had to create an alternative for browsers other than Chrome due to support issues. Unfortunately, I discovered that even Chrome presents some strange flickering (or artifacts) when applying backdrop-filter
to a big image (such as the one I was using as background), so I ditched the idea of using that property đ€Šââïž. Initially I wanted to use it because a simple blur using the filter
property leaves a white âborderâ on the image. I ended up using filter
anyway and applying an outline to compensate for the white border. In the end, the user will hardly notice the white border is even there.
Going full throttle with JavaScript
When it came the turn of addressing JavaScript, I started by testing how the APIs worked and how the data they were returning looked like.
I implemented an API ( https://geocode.xyz/ ) for getting the userâs country name by using reverse geocoding. Once that data was available (I used asyncâŠawait
for that), I made use of the name of the country to trigger a new API request ( https://restcountries.eu/ ) to get the countryâs flag.
With the data from the first API call or the name of the country entered by the user, I triggered two API requests ( https://covid-api.mmediagroup.fr ) to get the countryâs COVID-19 data and the countryâs vaccination data.
I employed the data from the API that delivers COVID-19 data to build the list of available countries to get information from, to avoid errors when requesting data for a country that was not supported by the API đ€.
I used several async..await
functions to implement all the API requests and I also employed some âspinnersâ to let the user know that the site was fetching the data, thus improving its user experience.
I also took advantage of the asyncâŠawait
functions to handle any possible error that could arise from the APIs and implemented a messaging system to render those error messages to the user.
JavaScript architecture
During the time I was working on this project, I didnât know about MVC or JavaScript modules, so I condensed all the code into a single file. I wonât refactor this code because I think it is a fair snapshot of how my knowledge looked like at the time, but if I was to build it again knowing what I know now, I would implement MVC from the start.
The JavaScript architecture is simple, having one class that is in charge of building the card for each country, and a collection of functions that handle the different interactions with the user.
Testing the app and asking for feedback
As with my previous project, during the building process, I was constantly testing how the app was performing. Doing this pushed me to modify the HTML and CSS code on several occasions.
I asked friends and family to test the app, and they had a mixture of problems with the API used for fetching the userâs country. I wanted to change it for another, more reliable API, but I couldnât find one.
Publishing
As I always do, I used Git to keep track of the changes in the project and to be able to publish it on GitHub so I could share it with others đș.
Due to the experimental nature of the project, I used GitHub pages to deploy and publish the project. I could also have used Netlify or my own hosting service if the APIs I chose were more reliable.
Lessons learned
At the start, this project seemed simple, but it quickly got complicated, especially because I was dealing with three different APIs (and a couple more that didnât work in the end).
I didnât spend much time on HTML, but CSS proved to be demanding once more đ . Thanks to the challenges I faced I gain more CSS skills and learned how to better debug it.
Regarding JavaScript, I could have implemented MVC from the get-go, so I will do that in my next project. As I previously said, I prefer not to refactor this project and leave it as a witness of my skills at the time.
APIs are reliable⊠most of the time đ€. Iâm sure paid APIs perform better, so if I need to use them in the future for a more serious project, I will research deeply what is the best API to get for the job.
This project still has room for improvement, but I had to make the decision to stop working on it at some point. Overall, I think itâs functioning as expected.
As always, I'm open to any suggestions you may have about this writing or the project itself.
Top comments (22)
That's really awesome and a lot of learning stuff here.
Just one thing I noticed (nothing to be offended but I am curious about the same). I tried to add my country India, & saw the following flag for it đ
dev-to-uploads.s3.amazonaws.com/up...
I believe that's flag for British occupied India(not sure). That's surprisingly shocking, what API is using that flag after the 75years of Independence & so much contribution to world economy , innovation & what not!
I still need to explore the code & API you are using but yeah that's the first thing I noticed as a User.
As mentioned nothing to be offended here or your fault but it's surprising to see who is providing the modern API with modern technology to serve outdated information that too 75 years old!
Damian used restcountries.eu/, but it looks like he used partial matching to get the country flag (restcountries.eu/rest/v2/name/India), which returns the "British Indian Ocean Territory" as a first result when looking for India.
With the "fullText" flag to true for an exact match (restcountries.eu/rest/v2/name/Indi...) it returns the correct result.
Exactly! Thanks for this.
I noticed that issue with the flag as well. I think that is happening because I'm searching for the first ocurrence of the country name, and that weird "British occupied India" is comming up first. If I have time, I'll fix this in the future.
Thanks for the feedback! đ
Maybe use a native web component for flags, flagmeister.github.io
It is interesting how you approached the problem and thought about it. I like the entire preparation process and your tool chain. Also the idea with clockify seems to be nice in terms of knowing how much time you spent (do you also know how much time did single festures take?).
I'm glad you find it useful! Yes, I set Clockify up with more detailed tracking but is a bit cumbersome to explain it all. In retrospect, I should have used tags on that app so I could get better statistics.
Hi Damian, great work. I love the way you give us the chance to follow your thoughts and solutions. I will check it in detail soon.
One shirt question: which tool did you use for the workflow graph?
Regards Thomas
I'm glad you find it useful! đ
I used this app for making the flow chart: app.diagrams.net/
It's very easy to use and you can save the chart on your GitHub repository đ€Ż
Congrats on flexing your skills without the use of libraries. This is exactly what I like to see from developers I hire. Although strong from a technical perspective, your politically charged data will only hurt your job prospects.
Thanks for your feedback! One clarification here: it's not my data ;)
Pretty awesome work, I love seeing the process from a to z, and the design looks really nice, I love the colour palette!
Thanks Kevin! đ
What tools did you have to use for debugging CSS?
What I usually do is this:
This will render a dashed blue line on all elements, so I can see their position and sizes.
The other tool I use is just the Chrome Developer Tools.
Nice work; the link to your application in Publishing section should be colo-codes.github.io/mini-projects...
Thanks! I have corrected this now.
Awesome! now I want to replicate it
Go for it!
That's really awesome Damian. The process was insightful and well organized.
Thanks for your feedback! I'm glad you like it.
This is my next project starting very soon