© VILLAGE BOOK BUILDERS ALL RIGHTS RESERVED

Building Village Book Builders

Empowering Children Around The World

Joshua Whitwell
7 min readFeb 4, 2021

--

By: Josh Whitwell

Bringing Social Responsibility In-house

This month I began working on a team of five other developers to design an online platform to provide rural children with mentorship opportunities with working professionals around the world.

The platform was commissioned and is managed by a non-profit organization called Village Book Builders (VBB), whose mission is to empower international villages to end the cycle of poverty through education.

Although the primary work of VBB is to build physical library spaces where children can foster deeper relationships with learning, they are gradually expanding the reach of their work into the digital realm by connecting volunteers, teachers, and industry experts with children from around the world in an online mentorship program.

© VILLAGE BOOK BUILDERS ALL RIGHTS RESERVED

The problem is that under the current setup Village Book Builders’ mentorship program is managed in a piecemeal fashion by the headmasters of their various constituent schools around the world.

Data pertaining to the countless participants in the program (mentors and students) is largely stored across an array of decentralized, static spreadsheets; while the process for scheduling and matching the mentors and mentees must be handled manually by the headmaster.

Our team was brought on to help VBB to migrate and translate these tedious, manual processes onto a digital platform that could serve as a centralized location for managing all of the user data and interactions related to their mentorship program.

© VILLAGE BOOK BUILDERS ALL RIGHTS RESERVED

Migrating Village Book Builders to the Digital Realm

For our part, we were specifically charged with building out the functionality of the platform that would allow a school headmaster to manage the students, teachers, and mentors at their school as well as track information about their village, their school, and their own profile. We were also tasked with designing a way for local program administrators to sign up new students through a secure registration portal. With these features in mind, our team set out planning the main user stories for the platform.

The first user story that our team tackled was designing a new login portal to be used by program administrators to allow students to register themselves for the mentorship program.

The registration portal would need to be secured behind an authentication wall, which meant that a new new user type and model needed to be added to the back end to allow for program users to be authenticated. Because the back end code base was set up using a mock JSON server API, this was a matter of simply adding a new program model with a program role field.

Program database model

With a new program user set up on the back end, we then began work on building out a dashboard component for program administrators to manage the sign up and registration process for students. In order to keep the app’s theme consistent across the site, and to keep the component tree DRY, we repurposed the dashboard component that already existed for the headmaster view, and simply swapped out the navigation links and routes for the program specific ones.

Dashboard page for program administrators

Next we built out a view to allow program administrators to search for a student in the database by name, email, or date of birth. This would allow the admin to know whether a student was already registered, or if a new account needed to be created. If the account already existed, the admin could view the student’s profile and current information, as well as edit any existing fields in order to complete the onboarding process.

Search component for program admins to verify a student account in the database. A program admin can click on more info and activate to view the student’s information and complete the onboarding process.

If the student did not already exist, the admin or student would be able to create a new account through a separate registration route. The challenge, however, was designing the registration flow in such a way that would allow the user fields to be accessible and editable by various user roles in the system. This was a specific request from the stakeholder, as the various stages of the student registration process was often completed by multiple parties including the headmaster, teacher, or student.

The solution we came up with was to create a modular student sign up form and profile form that would be rendered across the headmaster, teacher, and student views. In this way, we could keep the component tree simplified without rewriting redundant components for the different roles.

Registration component for signing up new students. The component is reused across multiple user views.

The last feature we built was a dashboard page for mentees to view their own profile and access a list of educational resources provided by the stakeholder. For the mentee profile component itself, we realized we could repurpose the same component designed for the program administrator view. However, the challenge was creating a way for the mentee profile modal to be rendered conditionally from a user interaction on the navigation menu.

Mentee profile modal accessible from menu button anywhere in the mentee user view.

To do this, we created a custom function for controlling the visibility state of the mentee profile modal and wired it to a button click located in the menu. This allowed for the modal to be viewable on any route without interfering with the rendering of the other route specific components.

Custom function and visibility state for handling the rendering of the mentee profile modal.

Village Book Builders Today, Village Book Builders Tomorrow

After a long month of planning, developing, testing, and iterating, our team was proud to be able to ship all of the following features that had been commissioned by the stakeholder. A live demo of the shipped features can be seen below, and the deployed site can be viewed through AWS Amplify here.

  • A notification system and approval process for headmasters to review and approve newly registered teachers.
  • A fully functional matching system for headmasters to view and manage mentorship pairings between mentors and students.
  • An authenticated program role to allow local program administrators to register new students in the database.
  • A student management system that allows a teacher, headmaster, program admin, or student to complete the student onboarding process.
  • A student account page that allows a student to view and edit their profile and access educational resources from Village Book Builders.
Live demo of Village Book Builders app deployed to AWS Amplify

Although satisfied with what we’ve been able to accomplish so far, the Village Book Builders story is far from over and there are still many features waiting to be implemented in future release cycles. First and foremost among these is designing a way for mentors and students to be able to view and manage their own matching assignments.

Currently, all of the matching information is restricted to the headmaster’s view, which means that a student or mentor must still go through the intermediary of the headmaster in order to access their mentoring info. Ideally, both the mentor and student would have a personal view where they could see a list of their mentorship sessions and edit or cancel these sessions as needed.

The main challenge with implementing this feature would be handling the matching resources on the project back end. In the current design, the matching information is stored redundantly on both the mentor and mentee database models. To make the matching system more dynamic and functional across the different users, we would ideally implement a new match table that would link the mentee and mentor to a specific matching session.

Other features on the horizon include building a library and computer role that would allow students to participate in mentoring sessions directly within the VBB ecosystem, which would ensure that the resources and information related to the sessions could be centrally housed and accessible across users.

© VILLAGE BOOK BUILDERS ALL RIGHTS RESERVED

Reflecting Back, Looking Forward

Overall, working on Village Book Builders was an enormous learning opportunity and provided significant real-world experience in collaborating on an application with a team of other developers. Among the main takeaways from the project, were better understanding the importance of group cohesion and planning, as well as consistent and regular communication throughout the development process.

Initially, one of the challenges our group faced was not having an organized process for reviewing and merging new features. However, after a collective reevaluation of our workflow, our team was able to come to an agreed upon system that would allow for shipping of new features to proceed in a timely manner without compromising the integrity of the review process.

On the whole, the project has helped further shape my career trajectory by exposing me to new technologies available as a web developer, but also has expanded my horizon of the types of projects and teams that I envision myself working on in the future.

--

--

Joshua Whitwell
Joshua Whitwell

No responses yet