CariMentor

Main Poster
1-on-1 Session
Discussion
Group Session

Inspiration

This project is based on a challenge a lot of us face in this very rapid, developing world: how to cope with the sheer pressure of having to keep up with things. As an example, if you’re a web developer, it’s becoming quite a meme where every day, a new JavaScript framework is born. If you position yourself as a new web developer, being faced with this will obviously put you off in learning as you’ll be overwhelmed before you even start.

Continuing the web developer example, in this case, there are many resources available on the internet that can guide you to learn web development so you don’t get too overwhelmed. But this lacks real-time human interaction: you don’t get to ask questions and get feedback instantaneously, and it’s easy for you to get sidetracked when you learn all by yourself.

This project aims to help people who are in need of mentors (mentees) in the goals that they are pursuing. By providing them with a community where they can connect with mentors, we hope that even in this fast-paced world, people can still find peace and ease to learn and pursue everything they’ve dreamt of before.

Alongside all of that, we too want to provide a community where professionals can fulfill their needs of self-actualization by sharing what they have learned over the years in the hope to be able to help the younger generation become a better version of themselves. We believe that our solution is a good solution to fulfill both needs: a need for guidance from mentees, and a need for self-actualization from mentors.

What it does

This project, CariMentor, has a lot of features to facilitate both mentors and mentees. As a mentee, you can:

Find mentors based on your interests or even on your location – who knows you might end up wanting to meet them offline one day?
Send a request to set up an online one-on-one meeting with the mentors that you want.
Check out what one-on-one meetings you have scheduled, have been rejected, or are still in pending status.
Give out ratings to the mentors that have approved your request for one-on-one meetings.
Join an online group session/workshop and participate in discussions regarding the session.

And, as a mentor, you can:

Register yourself as an expert in certain interests to gain specific audiences.
Check for one-on-one meet requests that have been given to you.
Reject or approve one-on-one meet requests from mentees.
Create a group session/workshop where mentees can participate both in the event and in discussions As well as basic functionalities like creating an account and editing your profile.

This project targets both mobile and desktop users as the website is fully usable for both platforms.

How we built it

We built this application with a separate backend and frontend. The backend itself is written in Express with a PostgreSQL database. For speed development purposes, we chose to use Prisma as our ORM to simplify things like migration and seedings as in hackathons we find that we might change our requirements/technical designs very frequently. We also use Swagger as an API documentation tool so there won’t be too many communications between the frontend team and the backend team.

The frontend of this application is made using Next due to several reasons, particularly due to the built-in routing and built-in optimizations such as for images and loading fonts from Google Fonts. When building the styles, we use both Tailwind for creating our custom components and Mantine for premade components. Having Mantine as a part of our design system also helps our designer when using Figma as there already exists a UI kit based on Mantine. We also tried to use better ways of fetching data such as using useSWR (stale-while-revalidate) where you can cache requests instead of fetching everything inside useEffect.

We don’t have an object storage service to use, so for storing images (user profiles), we chose to use a third-party image hosting site, that is ImgBB.

For stricter development rules and better efficiency in teamwork, as both the backend and frontend are made in JavaScript, we decided to use TypeScript as the main language for both of them. We also use strict and separated folder directories convention to reduce the possibility of a merge conflict.

Both of the repositories were hosted on GitHub. The backend – both the API service and the database – is hosted on Malik’s personal bare metal server and the frontend is hosted at Vercel.

Challenges we ran into

Some of the challenges we found are that the deadline is very tight for the number of features that we want to make. There were also API contract changes midway so on-the-fly adjustments often needed to be done, both on the backend side and on the frontend side.

The ‘classic’ problem of confusing merge conflicts also happens every now and then as when you’re trying to develop something very quickly, some form of good communication must be sacrificed, so miscommunications were something that we ran into while developing this application.

Also, as the backend is designed using REST and is mostly made to return response schemas as is without joins, the frontend needs to do a lot of requests because joins are done client-side, not server-side.

Accomplishments that we're proud of

We were able to make a pretty good-looking application with complete functionality in a matter of less than 36 hours. As we are to-be last year university students too, we managed to do it all while juggling our internship work. We are very proud of both the idea that we had and the execution that we did. Fun fact, one of our members did 2 user interviews, and 1 take-home coding interview, and got a letter of acceptance all on the 2nd day of the hackathon.

What we learned

When working as a team, especially a separate backend and frontend team, having API documentation like Swagger really helps a lot and saves you a lot of communication time. Using an ORM, like Prisma, really helps you with migrating database schemas, seeding data, and shortening the time you need to spend otherwise writing manual SQL queries. Prebuilt components like Mantine also streamline the design and coding process, while using Tailwind CSS really simplifies how you write CSS – no need for a separate CSS file!

What's next for CariMentor

Of course, there is a very wide room for improvement. One thing would be the efficiency of the website itself. Most of the data is brought to the client side, so it would be heavy if we are going to have more features in the future. There will be more and more API calls. So, it would be good to redesign the server-side as backend for frontend (i.e. actually do more aggregations and/or joins so the FE can make fewer API calls) to reduce latency cost.

Profit-wise, we can build on the existing idea of having premium mentors. Give them more advertising space, have them be able to host exclusive events, et cetera.

Feature-wise, ideally, for online meetings, we should be able to provide them with our own meeting links instead of needing the mentors to make their own meetings using third-party links such as Google Meet or Zoom. We also had something in mind but did not have time to implement, such as periodical quizzes. This feature is inspired by the mechanism of a course we took at school. The lecturer always gives us weekly quizzes which we can exercise ourselves for the materials. These weekly quizzes help us to gain more comprehensive knowledge of the course. We thought it would be a great idea to integrate such features as well, e.g. each month, in every topic, there will be a mentor (as a PIC) that throws a study case based on the tag/topic. Here, all users can contribute to answering and discussing the question.