Consider using semantic UI for front end

[girishramnani]

Considering using https://semantic-ui.com to build the front end template.

[girishramnani]

We are planning to build the UI quite similar to https://www.bancor.network/discover

[girishramnani]

Just be cognisant that the currency convertor component is separate issue https://github.com/mjrulesamrat/cryptocurrencies-flask/issues/8

[girishramnani]

So something like this without the line graphs

[girishramnani]

The best way that I always thought of creating jinja templates is to 1) first create the raw html templates without worrying about jinja 2) convert the raw html template with blocks of jinja template syntax making it dry and injecting actual variables eg. in the above image for the symbol names. your raw html would be

<div class="symbol-wrapper">
   <div class="symbol-short"> BNT </div>
   <div class="symbol-long">Bancor </div>
</div>
<div class="symbol-wrapper">
   <div class="symbol-short"> EOS </div>
   <div class="symbol-long">Eos </div>
</div>

so you change that to

{% for currency in currencies %}
<div class="symbol-wrapper">
   <div class="symbol-short"> {{currency.symbol}} </div>
   <div class="symbol-long"> {{currency.long_name}} </div>
</div>
{% endblock %}

just by assuming this you that there is a currencies list you have to pass to the jinja context. You can decide what all information has to provided.

[girishramnani]

To test the above jinja code you can create a small render script like

context = { "currencies":
      [{"symbol" : "BNT", "long_name" : "Bancor"},
       {"symbol" : "EOS", "symbol" : "Eos"}]
}

from jinja2 import Template
template = Template(open("template.html"))
template.render(**context)

[mjrulesamrat]

Thanks @girishramnani This is perfect. We will just pass rendered html to front-end.