How we built a mentoring platform from scratch?
As the dev team of Sustainable Educational Foundation — SEF, we were busy for the past three months building the ScholarX platform. This article going to be the journey of how the frontend was built. As always let’s start from a question.
What is ScholarX?
ScholarX is an exclusive 6-month program aimed at providing mentoring support to a selected pool of high Potential undergraduate students based in Sri Lanka ideally by a Sri Lankan expat currently engaged with one of the world’s top universities or Fortune 500 companies. It’s our free premium mentoring platform by Sri Lankans for Sri Lankans working towards creating a culture of knowledge and expertise sharing without the limitation of geographical borders. - SEF
How does the current program work?
There will be a list of mentors shown on the website. Once the program announced for the year students can apply for mentors to become a mentee.
What is the problem with the current program?
Currently the selecting mentor to mentees done by a single person referring to google forms that users fill. This a very hard and time-consuming task. And If we want to maintain another program it will be a difficult task to maintain the multiple programs.
Solution
As you can imagine the best solution for this is creating a platform that users can become mentors or mentees of a program using a whole new system without using google forms and admin could be able to manage the program.
Once we figured out the scenario carefully we started creating a wireframe based on the user role. There will be four main user roles for a user.
- Admin: Can maintain the programs
- User: Can apply for a program
- Mentor: Can manage mentees
- Mentee
After finalising the wireframes I started creating an API document using postman. If you are interested in how I created the API document read my article.
We used React Js with TypeScript to build the frontend. When using React JS we used functional components instead of class components and that was my first experience of using React Hooks.
How does the new platform work?
A program goes through seven states from the start to finish.
- CREATED
- MENTOR_APPLICATION — Mentors send in their application
- MENTOR_SELECTION — The admins will approve/reject applications based on the program criteria. They could also remove a mentor applicant for other reasons.
- MENTEE_APPLICATION — All approved mentors will wait till the mentees apply for them. We could remove a mentor in this stage too.
- MENTEE_SELECTION — Mentor can select the mentees
- ONGOING
- COMPLETED
If I want to become a mentor for a program I can apply for a program that says Apply as a mentor which means the program state is MENTOR_APPLICATION. If I want to become a mentee I can apply for a program that says apply as a mentee which means that the program is in MENTEE_APPLICATION period. Only the admin can change the state of the program.
Let me provide some screenshots of how it looks like,
Those are some of the views of the platform. There will be only screenshots If I post all the views. Keep in mind that this is the MVP. There’s a lot more work has to be done.
Facing problems creating such a platform is a normal thing thankfully we have the best dev team, we could overcome these situations by having small discussions through SEF Hive or Slack.
If you are interested in joining us to create v2 of this platform or support for another project you can always start by contributing to our projects. Besides that, if you want to become a mentor or a mentee stay tuned for the ScholarX 2021.
This is a small introduction about the journey we went through when building the ScholarX platform. I hope you liked it don’t forget to read my previous blog articles. Until the next one, Stay safe! ✌️
References:
[1]. Sustainable Educational Foundation.[2020] ScholarX 2020 [Online]. Available at: https://sefglobal.org/scholarx/2020/ [Accessed 28 November 2020]
