Covid Info v2
Covid Info v2 is a remake of my previous version which you can check over here.
I decided to remake this app to see how far I’ve learned these technologies. It’s also because my friend want to make a similar app, hence I decided to make this so I can help him along the way.
Another big advantage we see of shipping the interpreter compiler itself (rather than pre-compiled output) is that the effective size of the CSS for your whole app is deterministic and fixed. The weight of the compiler itself along with your theme file is all that users will ever download, no matter how many styles you use.
Currently the compiler weighs around 10KB which is smaller than styled-components and the average tailwind output.
I use the API provided by disease.sh. They have quite a lot of endpoints that you can use. More than enough for my needs.
Design wise, I took some of it from this beautiful dribbble shot. It’s easy enough to implement since I’m quite good at CSS (at least that’s what I think :p) because I am so used to implement a design every week for svelteception. All goes well, except for the world map section.
I never made any map related thing, so this is the first time I use a map library like LeafletJS. Since I use NextJS which utilize SSR, I can’t just import Leaflet as is because it needs a
window object. At first, I’m using react-leaflet-universal but I’m not sure if that’s the best solution.
The next day, I found out that NextJS can import a module only if the page has been rendered on the client side by using its
dynamic module, I was blown away the first time I found it. I no longer need a thin wrapper like react-leaflet-universal.
I was going to make a feature where if you click on a country, it would zoom the map but ended up not doing it because I have no idea how to do it, I’ve Google it up and still couldn’t find any solution.
Initially, I want to make it responsive/mobile friendly. Twind has this nice feature where you can group tailwindcss directives. It looks something like this
md:(col(start-1 end-2) row(start-2 end-4)), this saves me a lot of time. After doing that for maybe half and hour, I thought it doesn’t look that good in terms of UI/UX so I threw it away.
I use Vercel to deploy this app. I really love Vercel because they provide so many features yet it’s still free. Deploying NextJS app on Vercel is really easy because NextJS is also made by Vercel so they must have optimised their platform for NextJS app. You can even get analytics if you deploy your NextJS app on Vercel.
Honestly, I am quite proud of this one. I learned a lot along the way, seeing them compared side by side made me happy. I didn’t waste a year doing nothing, I made some progress.