**Tutusfx** continues its development using Vuejs and JQuery. **Tutusfx** is an open-source, incentivised exchange (cryptoexchange, forex, et al) trade platform designed on blockchain technology. The website is currently under development, and is expected to launch its alpha version later this year. The Vuejs public repository is available on github and the JQuery flavour is also available on github. We present monthly development reports to alert the public on changes to our source codes and the resulting effect (feature addition, modification or removal) on the application. ![JPEG_20190208_195216.jpg](https://cdn.steemitimages.com/DQmREDCQ69i63NALGK6Ub33ghhqCPv7tF9p5UYerx1pF4nv/JPEG_20190208_195216.jpg) **Monthly Development Report (July 2019)** Users are allowed to access functions on various sections of the application. General purpose functions that are frequently used are place on the toolbar (shown at the top) and replicated into the navigation drawer (hidden on the right). Some extension links are also available at the footer. The functions are grouped into categories and named. One of such categories is the **Menu** which contains the *App Store* and others. ![Tutusfx Drawer Menu](https://cdn.steemitimages.com/DQmWHhAx2rTcNxQdzCo3qZ7t8gENmnBqFMuPityrVaLZbk4/menu_drawer.png) **Menu** function group in drawer The drawer and its functions are defined with **Menu** as follows:



        
          
            
              
                
                  {{ item.name }}
                  
                
              
            

            
              
                {{ subItem.name }}
              

              
                
                  {{ subItem.icon }}

Vuetify source code for Drawer with **Menu** The drawer width is set at 260px and a break point is set at 991. The drawer items are kept as a list of lists which is iteratively loaded to the drawer. The drawer background color is regulated by the theme and the resultant color is bound to the drawer to keep it uniformed with other menu items. The toolbar items are kept and loaded in the same way as drawer items. The toolbar background color is also handled the same way as that of the drawer. ![Tutusfx Toolbar Menu](https://cdn.steemitimages.com/DQmXZNmCRACzdzB18o581qSEQzBzRCcxkrFW4pDmjVHmpNH/menu_toolbar.png) **Menu** function group in toolbar The toolbar and its functions are defined with **Menu** as follows:



        
        
          
            
              {{ item.name }}
            
            
              
                
                  {{ subItem.name }}
                

                
                  
                    {{ subItem.icon }}

Vuetify source code for Toolbar with **Menu** The **Menu** contains: *a)* App Store *b)* Third-party Exchanges *c)* Currency Markets *d)* Chat *e)* Vote for Witness *f)* Reset Password *a)* App Store: The App Store is to be made up of 2 units: *i)* Tutusfx applications *ii)* Third-party applications The store is for applications built on Tutusfx and may contain free or paid apps. *b)* Third-Party Exchanges: These are third-party individuals and groups who are registered with Tutusfx to assist with exchange of fiat to Tutus Tokens (TT). They are independent units and Tutusfx will not be directly responsible for their activities. *c)* Currency Markets: These are graphical currency rate displays (CRDs) of tradable instruments on Tutusfx. *d)* Chat: This is an interface which will allow logged in users have one-to-one or one-to-many digital interactions. *e)* Vote for Witness: This is an interface which will allow logged in users to vote up to 20 witnesses. *f)* Reset Password: The Reset Password interface allows a logged in user to modify his password. If user prefers to use an easy-to-remember password, he may go ahead to do so but, will be responsible for any security challenge thereto. ![Tutusfx Drawer Themes](https://cdn.steemitimages.com/DQmY9RwU1Wms19gp8g4sqwnZdZfyHS71Tk3GF1NPb6v5FJ1/themes_drawer.png) **Themes** function group in drawer **Themes** are defined as follows:


                {{ subItem.name }}
                
                {{ subItem.name }}
                
                {{ subItem.name }}
                
                {{ subItem.name }}
                
                {{ subItem.name }}
                
                {{ subItem.name }}
                
                {{ subItem.name }}
                
                {{ subItem.name }}
                
                {{ subItem.name }}
                
                {{ subItem.name }}

Vuetify source code for **Themes** (in drawer and toolbar) ![Tutusfx Toolbar Themes](https://cdn.steemitimages.com/DQmUvrU46jDNJTdWvCmJNcfhav7wTyagzbWQmtT2KmUxw6A/themes_toolbar.png) **Themes** function group in toolbar The **Themes** menu consists of ten (10) items: *a)* Nature *b)* Night *c)* Sunny *d)* Cloudy *e)* Romance *f)* Royal *g)* Aqua *h)* Teal *i)* Deep Royal *j)* Silver The Nature, Night, Sunny, Cloudy, Romance and Royal **Themes** were discussed here. The Aqua, Teal, Deep Royal and Silver **Themes** are variants added for plausibility of user choices. *i)* Aqua: is a variant to the Cloudy Theme *ii)* Teal: is a variant of the default Nature Theme *iii)* Deep Royal: is a variant of the Royal Theme and *iv)* Silver: is a variant of the Sunny Theme. ![Tutusfx Drawer Visibility](https://cdn.steemitimages.com/DQmcpS3zSCyUDG1rsr7EaVBmVEJLSLbWnKLkgNQK7Dwzf8M/visibility_drawer.png) **Visibility** function group in drawer The **Visibility** function group contains functions for toggling the visibility of items in the application. These include: *a)* Trade Bar *b)* Footer *a)* Trade Bar: toggles the visibility of the Trade Bar which contains rates of various trade pairs, located at the top of the Homepage. *b)* Footer: toggles the visibility of the Footer which contains the application warning at the bottom of the browser. ![Tutusfx Toolbar Visibility](https://cdn.steemitimages.com/DQmdnfyTxRDWspVxoaJatpo1jB77ABbVDzuSRTiJc9peSqj/visibility_toolbar.png) **Visibility** function group in toolbar **CRD Modification** To reduce user data consumption of application, the **Homepage Currency Rate Display (CRD)** was replaced by an animation of images. This animation of images is to be an indirect route to a local CRD (currently under development). The texts on the **Homepage** animation are set with transitions that make them more attractive when loaded anew; they zoom in from left and right individually. **About Us Modification** The **About Us** section of the **Homepage** is intended to be a link to the **About Us** view of the website. The image on the section was given a transition to make it appear from top while the texts appear from bottom. This is intended to make the section more attractive and in turn, also make the **Homepage** more attractive to users. ![Tutusfx Homepage](https://cdn.steemitimages.com/DQmZFHzWGzZM47EHw3z8Hcqe8Crmitfzp2houmcVynxtjoL/homead.png) **Homepage** view ![Tutusfx Sitemap](https://cdn.steemitimages.com/DQmQSKvHrq3h3szx38UxC5sVbHeZPaXsLBEkXmiTwNQrCSP/sitemap_content.png) **Sitemap** view A **Sitemap** has been added in Vuejs to give users descriptions and easy access to functions and links on the website. Similarly, a **Frequently Asked Questions** view is also defined to give users answers to puzzling questions and unravel details about **Tutusfx** that users might need to know. ![Tutusfx Faqs](https://cdn.steemitimages.com/DQmXKe2HN6rYbcxxhWSG2q9pTd9g7qEALWH4TLXnpLm6RZj/faqs_content.png) **Frequently Asked Questions** view To beautify and standardize the application, Vuetify was added to it and Vuex was used for handling the **Themes**. The **README** is currently being updated to direct application users on how to install and run **Tutusfx** on their local systems.

tutusfx