LibreMesh Pirania UI – A final overview

Hello Freifunk community!

Working on this project has been amazing, not only have I been able to work hand in hand with great developers but I have also learned a lot of things related to software development that will probably be useful for me in the future. The main idea of this project seeks to improve the implementation of the administration interface of the Pirania captive portal which is implemented in LibreMesh, a plugin used in different Community Networks.

During these weeks, I focused on 3 aspects: design, testing and implementation.To create the sketches that would allow me to detail the achievement of our ideas, we chose a tool called Figma, in this I could deploy the initial designs that we plan to implement for this project. Below you can see some of the screens I created:

List of vouchers screen

In this first screen we thought of some functionalities such as being able to search for vouchers, list vouchers and access another screen to create vouchers, when we choose the option to create vouchers we will see a screen like the following one:

Voucher creation screen

In this screen you can find some functionalities such as:

– Description field, to identify who the voucher is for or what it is used for.

– Choice of the duration time since the voucher activation.

– Choice of voucher permanence, to establish whether a voucher can be used for “unlimited” time or not.

– Possibility to choose how many vouchers to create.

– Possibility to edit a voucher created to correct any typo in the description or to “delete” a voucher so that it can no longer be used.

– And set the possibility of choose some other advanced options such as setting an expiration date to activate the vouchers.

– At the end of the voucher creation, generate a metadata page to deliver the voucher passwords and other data of interest such as the description and the voucher creation date.

Voucher details

In this screen we access after selecting a specific voucher in the voucher list and we can find some features such as the availability status, the creation date and the password that enables access.

As you can see, the idea of these screens is to maintain a similar and clear aesthetic, just like the LimeApp.

After that, I was working on a TDD framework to write the tests for these screens, I used technologies like React Testing Library and Jest. screens, I used technologies like React Testing Library and Jest.

Working on these tests was my favorite part of the project, as I feel that I was able to learn many things in this area and discover tools that I did not know.

Currently this project is at this point, however, I will continue working on new updates to implement all these ideas that I have been working on these weeks.

Finally, I want to thank Freifunk and my mentors for helping me in this process, it has been very rewarding for me to share and learn so much from them!

Thanks for reading,


Leave a Reply

Your email address will not be published. Required fields are marked *