How I built overactive.io

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.

🤔 Why

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.)

nomadlist

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.

sheets
The Google Sheet listing countries and their data

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 (Montréal becoming 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:

  • Quality of life score based on country Human Development Index
  • Cost of life score based on country Purchasing Power Parity and city cost of living index (from Numbeo)
  • Tech dynamism score based on city coworkings count. The score is based partly on the absolute amount of coworkings in the city (how much dynamism it contains) and on the relative amount of coworkings in the city compared to its population (how dense the dynamism is), this way for 2 cities with 20 coworkings, the one with 20.000 inhabitants is much more dynamic than the one with 2.000.000 inhabitants

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…

🎨 Design

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.

sketches
First sketches with a mix of English and French comments

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
Only 4 frames were needed: 1 for the reusable parts, 2 for the layouts and 1 for the exportable assets

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.

dropdown

💻 Build

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.

site main

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.

site modal

⛅️ Deploy

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):

  • The React files are transpiled into static HTML and JS
  • Cities pictures are selected by hand one by one and stored as static assets (like any other image)
  • The lists of countries and cities are 2 CSV files downloaded from Google Sheet, stored as static assets (like any other file)

files
Some of the pictures I selected for cities illustrations

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.


Share this post