The Final Big One!

Gabriel Romero
5 min readFeb 4, 2021

After nearly 1 ½ years of studies, the time to move into my professional web development career has come. It’s been a blessing first working through the UX track and ultimately the Web Development track at Lambda School.

For our final web development project, our team of 7 developers was tasked with working with the non-profit organization Village Book Builders to build on their web portal.

What’s it all about?

Village Book Builders Homepage

Village Book Builders is a non-profit organization empowering villages around the world to end the cycle of poverty through education. They build library spaces where children can foster deeper relationships with learning. They also help people bring social responsibility in-house by connecting volunteers, students, and working professionals to serve as mentors to children in developing communities all over the globe.

Our team’s focus for this round of build was teachers and students onboarding and building out the functionality to match mentors with student mentees. My personal focus was displaying a list of current mentors and the mentor/mentee matching.

The biggest fear I had moving into this project was being overwhelmed by the sheer amount of code we would face since this was a build on project. It took our team a few days of reading the code to figure out and plan how to move forward and solve the current problem at hand before any coding was started. We created user stories that would guide us from the user’s perspective. We then added those stories and what features would have to be developed to our Trello board. From that point, we assigned individuals to each user story to have a starting point for each feature that would be developed.

Understand and solve.

For my portion of the build, I worked on displaying a list of the mentors and matching mentors and mentees.

Mentor List

I created the mentor list component using data created from our mock back-end API with a get request. We were tasked with using Ant Design for our project, which I’ve never used before, so there was a bit of a learning curve understanding how to work with their pre-built components.

The mentor/mentee matching feature was a new animal for me as well. We hadn’t covered anything like this in our studies so I knew it would be a challenge. The only matching criteria the stakeholder had in mind at the start of the project was ensuring both the mentor and mentee spoke the same language since Village Book Builders engages with children all over the world. They weren’t too sure how the overall process would work, but this was enough for us to start on the feature.

I began my process by reviewing what the previous team had developed to decide if building a new component would be the best option or adding the feature to an existing component would work best. After careful review, I decided the feature would work best in an existing form where the headmaster could edit a mentee profile.

Mentor/Mentee Matching

I added a table with radio buttons from Ant Design and then populated it with a get request to our mentors API. In that table, the headmaster could see all the mentors and the languages they spoke to ensure the mentor and mentee could communicate effectively. The feature was almost fully functional when our stakeholder decided to change directions.

The stakeholder wanted the feature to have time slots where the headmaster could add a mentor and mentee for them to meet. They would still need the ability to see what languages the mentor/mentee spoke as well. Back to the drawing board!

Considering the feature now needed time slots for each day along with the ability to see a list of the mentors/mentees, I decided it was appropriate to create a new component that would have all these features. The first thing I needed to develop was a way to organize the dates and times.

Ant Design made that problem easy to solve with their calendar component. I was able to create a get request to the calendar API data that our back-end developer had created to show how the calendar would work when a headmaster had made choices from the dropdown menus that I had also used from Ant Design. I had also created two small mentor and mentee lists that would be imported into the component so the headmaster could review all the mentors and mentees prior to making any time slot choices. Unfortunately, I ran out of time to complete the functionality of the form fields, but at least I gave the next team of students a good start on the feature for them to fully develop it!

The final solution for Mentor/Mentee matching.

Wrapping it up!

Our team’s final product for this build included:

  • Onboarding for students and teachers
  • A dashboard for students, program managers, and teachers
  • The ability to edit student, program managers, and teacher profiles
  • A list of resources available for students in their dashboard
  • A list of mentors for the headmaster profile
  • The ability to match mentors and mentees for the headmaster profile

Future features for Village Book Builders might be online classes, online books along with other various student resources.

It truly was a pleasure working on this project!

--

--

Gabriel Romero

Lambda School Web Development & UX Design graduate.