I recently released Overactive, a web page that lists the best cities in the world for developers to build and share tech products. Here is how I built it in 2 weeks on my free time.
I soon plan to travel a lot to see what people build around the world, how they use tech, how they work together and what inspires them. There are a lot of places online dedicated to travels but I wanted to focus on cities made for tech and entrepreneurship. Nomad List is a great tool that lists and scores cities based on nomad criteria (cost of a solo flat, weather, WIFI quality, freedom of speech, etc.)
But this nomad rank relies partly on crowdsourced information since people can vote for each nomad criterion of cities, so the rank felt a bit too based on popularity, trend and cost of living advantages for me.
First I built my own list of cities driving tech development in their countries. Each country gets economic and living data from official reports like the International Monetary Fund stats on Wikipedia for GDP, GDP per capita, GDP PPP per capita, or the UNODC study for Criminality rates. A country cost of living ratio is deduced from its Purchasing Power Parity. UNDP data sets were used for HDI and Income index. I also used Numbeo for cities data like their cost of living.
All this data has been gathered and copy/pasted by hand 💪 I could have built a more elegant scraper that would automatically do it for me, but it would have taken some time and there are always unexpected data to handle: numbers could be written with
, instead of
., some cities would not have the same spelling (like
Ko Samui being
Koh Samui) or some countries would be written without accent (
Montreal). Doing it by hand costed me 30s per country and 10s per city.
Then I could deduce scores to rank cities from all of this:
Originally I wanted to take startup incubators into account, but those are hard to find as there is no official or up to date list of those even in European countries. VC investments also sounded importants but I was surprised to see that exhaustive investment information could only be found for North America, Europe and a part of Asia. The rest of the world apparently does not make enough money to be reported correctly…
Nomad List cards design was simple and looked good for my own purposes. I especially liked to see a picture to illustrate each city so I kept a similar approach but broke cities by regions. The score is clearly shown upfront on the city card so quick visual scanning is eased.
I used Figma to design a more accurate version of the website. The layout is very simple here since we only have 1 page with all the cities listed. When clicking on a city more data would be displayed in a modal so the user can check all the small scores that composed the final one. Simple. A couple of links are automatically generated to send the user from the city modal to its corresponding page on visa requirements to travel there, Nomad List, Google Maps, Airbnb, a Numbeo cost of living breakdown, Coworker and its Lonely Planet travel guide.
Figma’s reusable components were very useful here since the majority of the layout is an alignment of cities cards. When changing the
City component it would automatically update all the other cards in the main layout, super convenient!
At this point I added a way of ranking cities with their 3 scores following a “how much I care” filtering pattern so the more the user cares the more the score is important in the final rank.
As the app would only have 1 page and almost no interaction (except for modals and filters) I wondered which technology to use. I finally made it with React since I am familiar with it. Each Figma reusable component found its React reusable component sibling and everything just fitted nicely.
Modals would show data a bit more nicely than originally thought in the Figma mockup. I think that updating the design as you code is perfectly ok.
I deployed the app with a custom script (that I will probably discuss in another article) on a DigitalOcean server. I currently have 5 web apps running on the same server and there is still a lot of room for more.
Since Overactive is just a static app (with no server):
Once sent to the server the script starts a Docker container with only Nginx inside serving the static files. This container is bound to a domain name (“overactive.io”) thanks to another Nginx, on the server itself this time. And that’s it! Static apps are really easy; just serving HTML some JS and assets.
Overactive is now online and fully operational. It was not intended to bring any revenue, but rather to simply be fun and helpful.