The last few days I have been working on a web application for some additional information about Utopian.io. If it wasn't obvious from the name, I was inspired by @emrebeyler and his many amazing projects (go check them out!) to create something that actually uses Flask *and* MongoDB!

I'm currently hosting it on a droplet with 500MB RAM, so I'm not sure how robust it is, but you should be able to access it by going to [utopian.rocks](http://utopian.rocks/).

### What is it about?
The project is mainly about providing some useful information that isn't (currently) readily available on Utopian.io. I already created [a CLI](https://utopian.io/utopian-io/@amosbastian/new-release-utopian-cli-0-5-2) that could do a few of these things, but I realised that not a lot of people like using CLIs like I do, so creating a web application would be way more useful. Currently it shows an overview of all Utopian.io supervisors, with a button that takes you to a page with their team's performance in the last 7 days. I created this because I thought it would be useful for Utopian.io supervisors to quickly see an overview of how their team is doing - especially during the supervisors weekly. In the GIF below you can see it in action, but you can obviously also check it out yourself by going to [utopian.rocks](http://utopian.rocks/)!

<center>![utopian.rocks.overview.gif](https://res.cloudinary.com/hpiynhbhq/image/upload/v1520168095/igeoks5fcanynqnwo3rb.gif)
</center>

### How was it implemented?
It was implemented using

* Python3.6 (Flask, Gunicorn, PyMongo and more)
* MongoDB
* NGINX
* Bootstrap

The first thing I did was figure out how to use MongoDB. Since I had never used it before, I checked out @emrebeyler's [utopian_data](https://github.com/emre/utopian_data) to see how an example of how it would be implemented. Unfortunately I know nothing about Go either, but after checking it out for a while and following [this tutorial](http://api.mongodb.com/python/current/tutorial.html) I (sort of) understood how to use PyMongo to do something similar. If you have a MongoDB instance running, then you can simply run `update_database.py`, which (by using `utopian_client.py`) should create a database called `utopian` with the collections `moderators` and `posts`. If you run `update_database.py` after this, then it should only update the posts that could've changed (created < 7 days ago). This can probably be done better, but as I said, I'm completely new to this, so I will learn and improve this along the way.

<center>![update_database.gif](https://res.cloudinary.com/hpiynhbhq/image/upload/v1520084981/cfkgqis2c4ymmqs3wleg.gif)
</center>

After figuring this out, I started creating the web application using Flask. Currently `app.py` creates a dictionary with information retrieved from the database that contains a team's overall performance and each moderator's performance per category respectively, and passes this to the template. This is then used to create the tables that you see on `/<supervisor>/team`. The `/` route currently shows an overview of all Utopian.io supervisors, with a button to their team's performance. The supervisors are sorted by the size of their team (the number on the button), and this also implemented in `app.py` and `index.html`.

Of course the templates themselves were created using Jinja2, HTML, CSS and Bootstrap. Honestly this took way longer than it should have, as I am very bad at everything CSS related.

After implementing everything I added it to a droplet, where it is running as a service using Gunicorn and NGINX. I also have a crontab set up that currently updates the database every 30 minutes (at the bottom of the page it shows the most recent time (CET) a post in the database was reviewed). Finally I bought the domain name utopian.rocks, and after a few hours of tinkering, managed to finally get it linked to my droplet (this has been causing me a lot of trouble, so I don't know if it will be up 100% of the time). Of course you can also run it locally (see the [README](https://github.com/amosbastian/utopian/blob/master/README.md) for more information about this).

### What are my plans?
I have so many plans for this, but I'm not sure how feasible many of them are. I'm also sure stuff like this will be implemented (much better than I ever could) by @wehmoen and his team on Utopian.io itself eventually, so I will see how everything goes in the future. Anyway, currently this is what I can think of (let's be a tiny bit ambitious, shall we?):

* Add a way to change the static time frame of 7 days to e.g. 1 day, 12 hours etc.
* Add a page that shows some statistics about the total number of submitted contributions (overall and per category) for a given time frame
* Add a page for each moderator showing their individual performance, a feed of their most recently reviewed posts, other statistics (e.g. who they have reviewed the most) etc.
* Add a page for projects that show statistics about contributions made to it (e.g. best contributor, overall acceptance rate etc.)
* Add a page for contributors to see their individual performance (e.g acceptance rate, who has reviewed their posts the most etc.)

I can think of a lot more things to add, but the above is what I want to focus on for now.

### How can you contribute?
I would love for people to contribute to this (have spoken to a few people already who will probably help me improve UX immensely), so if you want to contribute something it would be great if you contacted me on Discord (Amos#4622) so we can talk about it. As I mentioned above, I'm an absolute numpty when it comes to CSS, so if anyone could help with that, it would be greatly appreciated (I spent hours today trying to create a better table, but finally gave up in the end). Help with PyMongo and Flask would also be greatly appreciated, as I'm probably doing a lot of things wrong regarding them as well. Of course suggestions/tips/constructive criticism are also very welcome!

<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@amosbastian/introducing-utopian-rocks">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>