Hej everyone,
for the past year I have been working on a project for an organization that facilitates free tutoring for pupils in Austria. Before using Retool to develop a real web application (on top of a MySQL database) to manage all their data (e.g. pupils and tutors information, information on the tandems) and to find the matching tutors for pupils demands easily, the organization was using different Google Spreadsheets. When I heard about this, I took the chance to throw in my skills (and around 250 hours of work) to develop the following web app (as well as the database behind) and I thought I would like to show the result to you today, accompanied by some lessons learned concerning working with Retool.
One disclaimer upfront: The app is for a German organization, thus all text is in German, but I have tried to add some important translations below the first screenshots.
1. Getting information into the database
As several hundred sets of data were previously stored in Google Spreadsheets and as still all new registrations by pupils and tutors are saved there at first (due to some technical constraints), I have developed a semi-automatic import system, that allows the upload of a CSV file:
(Translations: "Tutor:innen" = "tutors" / "Schüler:innen" = "pupils" / "Kontakttyp" = "contact type" / "Stammdaten" = "core data" / "Interne Daten" = "internal data" / "Fächer" = "school subjects" / "Kommunikationskanal" = "communication channel" / "Zustimmung Datenverarbeitung" = "Consent to processing of data")
As you can see above the users first choose if they want to import a list of tutors or pupils and then select if they either (a) want to upload a CSV file or (b) add contact details manually (in this case the second step ("Schritt 2") is simply skipped. When choosing option a, the user gets a list of all contacts in the uploaded list in step two and also gets already notified if some of this data is fomally wrong (e.g. wrong mail format is marked in red). Then they can select a row and change any data they want in step three ("Schritt 3"). This overview makes it very easy to import new contacts and see if all data is correct. When the click on import ("Kontaktdaten importieren") the contact will be added to the database AND the respective row will be deleted from the table in step two. Then they can move on with the next contact.
Why not skip step three you might wonder? Well, first, as the data comes in unsctructerd it was safer to let the human user at one point check the validity of the data before it is added to the system. Second, I also wanted to give the users of the app the possibility to add contacts manually. This way I combined two features, but only had to implement one set of components.
Lesson learned No1: Always consider that there might be more than just one use case for your apps and components. Especially after the revisons that Retool did to its components there are so many possibilities that you might want to think twice if it isn't easier to maintain one app that is a litte bit more complex than having two apps which do 90% of the time the same thing.
2. Engaging with the data
Now that the data has moved into the system we come to the core part of the web app. Here you can see how the data is displayed to the users. You have an area with filters at the top (where users can enable extended filters if they need them); then you have either the list of tutors or pupils on the bottom left side; and when the user click on one row they will get a detailed profile of this contact on the bottom right:
(Translations: "Bundesländer" = "states" / "Verantwortlichen" = "responsible persons")
As described before, the revision of the components was a game changer for my work. Through them I was able to integrate an easy to use action bar at the bottom of the contact profiles. There users can download information of the contact as contact file, open the location of the contact in Google Maps, start the matching of this contact, and edit the data. In the following you can see the profile with the "edit mode" enabled:
Before I had an extra app where users had to go to change the contact information. This not only slowed down the workflow for the users, but also required double maintenance work for me (remember lessons learned no1).
So, some more lessons learned:
Lesson learned No2: Take your time to switch from the deprecated components to the new ones. At the beginning I was actually very annoyed by all the changing components, but I realized that they take away quite some need for hardcoding things and allowed for more ways of dynamiccaly programming my apps.
Lesson learned No3: Use the "disable query" parameter in the advanced options of queries to prevent unnecessary data traffic and slowdown due to loading queries. I discovered the power of this option quite late, but it helped me a lot ot cut of the loading of queries that are triggered in chains based on e.g. the value of a specific component.
Here are some more screenshots of features on this page, such as the possibility to add and view comments and also to get an overview of the tandems a contact is part of:
(Translations: "bearbeiten" = "edit)
3. Matching tutors and pupils
Finally (and obviously the core functionality) is the "matching". Now that all data is strcutured in the database it was possible to help the users with the matching by providing them with scores based on the subjects tutors offer and pupils demand as well as the place they live:
By the way: This app, as well as the import app are build in steps using containers. This means that the user is only presented with the next step, once everything in the current step has been selected/done.
Even though the screenshot looks quite big, the user is guided through the matching process. First, they choose if they want to start the matching process with pupils or tutors. Then, they select a contact (this list can be filtered just as in the contact overview) ("Schritt 1") which triggers a searching process for matching contacts ("Schritt 2"). If the users want to apply other filters then the standard ones, they can do so (e.g. because they match tutor and pupil from differnt states for online tutoring). In the last step ("Schritt 3") all relevant data of the selected contacts is then shown side-by-side and the user can create a match by adding some more information to the tandem.
4. Wrap-Up
Overall, I'm very happy with what Retool enabled me to do for this great non-profit project. I have learned so many new things in the past year and I want to highlight two things in particular:Lesson learned No4: Try out things. Even though Retool can't make anything work without coding it enables you to do a lot of things by using JavaScript. My JS skills were actually quite limited when I started to work with Retool. By now I feel very safe with it, also due to the last lessons learned...
Lesson learned No5: The Retool community forum is a great place to find answers. I have used this forum so many times and it helped me so often in fidning solutions for programming problems. Dont be hesitant to come here more often when you have a problem you can't get your head around.
I hope you have made it until the end of this post and that you maybe found some inspirations in this app for your own.
I'm happy to answer any questions here!
Best, Timo