A desktop and mobile mockup of Terra Fortuna's website

Forward Platform | Mentoring Website App

  • CODING
  • HTML
  • PHP
  • CSS

Forward is a mentorship platform that won the first-place at BCIT's Hack The Break 2023.

  • Timeline

    24 Hours

  • Languages

    HTML

    CSS

    PHP

    MySQL

  • Tools

    Visual Studio Code

    Figma

    MAMP

The purpose: of the event is to develop a solution to a real-world problem, addresing the theme of job security. Our goal is to develop a website that addresses a challenge presented by the theme of the Hackathon event.

Go Forward!

Forward connects local mentors and mentees by matching them based on compatibility using user-entered survey information. Forward also offers a Community Hub where users could post their work and join their peers in discussions about their specialties and interests.

Built by mentees, for mentors & peers, Forward helps local tech industry professionals and new-comers build communities and connections with each other.

This project was built by a team of first-time hackers for BCIT's Hack the Break 2023 and was awarded first place. The team consisted of:

My main role for this project is Back-End Development, but I've had opportunities to collaborate as a Graphic Designer.

Problem to Solve

Job insecurity can impact anybody in life. It especially takes a toll on your mental health. As a result, it has detrimental effects on an employee's performance. Based on our research, job insecurity:

  • Takes a toll on mental health.

  • Forces career changes due to recession.

  • Leaves people feeling lost and unsure.

Our Solution

a mockup image of Forward's website

Forward's landing page

We were inspired by our own struggles with our job search journey. We know how valuable and beneficial someone's guidance and encouragement can be for someone just starting out in the tech industry.

a mockup image of Forward's website

Forward's user page

Forward provides a platform that empowers individuals to achieve their full potential. Connect to local mentors to help guide their personal and professional journeys.

a mockup image of Forward's website

Forward's projects list page

Design

I had the opportunity to work on the logo design, but mostly defining the base brand guide. By being able to create this, I was able to aid Kayla, our UIUX Designer, to create consistency within the overall design of the product

Forward's Lo-Fi wireframes created by Kayla Tran

Kayla, was able to deliver rapid lo-fi and hi-fi wireframes for the overlook of the website design. While working on these wireframes, our front-end developers went to work, coding each component and screen.

Forward's Hi-Fi wireframes created by Kayla Tran

Through constant communication with the designer and front-end developers, we were able to address what is doable within the project scope, especially since we were very time-constrained for the whole event.

Development

The team consisted of 4 developers where 2 worked on front-end and the other 2 worked on back-end. I took on the role of a back-end developer working along with Dave in creating the database.

My role as a developer is to work on the back-end part of the website. Other than working the back end, I also touch upon some elements of the products Front-End Design.

I was able to implement the side navigation bar along the grid system that was implemented by the other Front-End Developers.

A coding snippet of the website backend data

The back-end database of mentors and projects was created using PHP and SQL. An issue we ran into together was that we were having a hard time visualizing what the back-end data would look like initially.

An image of how the data was displayed

After communicating with the designer and Karina, one of our front-end developers, we've managed to put together a data file with an array of 'Mentors' containing their own data values. These mentor data are created through a class method taking in values such as their name, career, and what they specialize in.

As the night comes to an end our team was slowly exhausted over time and decided to call it. I decided to keep on going and took on issues that we're addressing in the front end along with Dave. We both managed to finish the front-end work, and next thing in the morning just needed some tweaks before submission.

Challenges

As a team, we took a week to think about our project idea. There was a lot of discussion going around and ended up with this mentor platform idea because we empathize with users who have job insecurity as we are seeking new opportunities for ourselves.

At times, we encountered situations where some team members had less work to do. To address this, we maintained constant communication through messaging and distributed the workload by assigning tasks such as creating presentations while waiting for front-end designs. This approach helped us visualize our back-end and ensured that everyone was contributing to the project's progress.

Project Reflection

Overall, an amazing experience for first-time hackers at a hackathon. We hope to work on this in the future and possibly make it to possibly an actual app that schools can use. We've planned some features to implement such as in-app messaging and an events page for local meetups.

Always moving Forward!

From winning the hackathon and positive feedback from our cohort, we're happy to continue to improve and iterate on this project to be its best.

During this phase of iteration, I'm happy to take on a UX Design role, collaborating along with Kayla in improving the overall design of the app!

Here is a current log of Forward Version 1.1:

  • Design Refinements - our designers currently working on implementing a more robust Design System which will us to be more efficient with our work and create consistency during the design and development phases.

  • Community Hub Feature - as promised, we're implementing a feature where you can create quality connections with local mentors, mentees and peers within your community!

  • Coding Refinements - our developers are also refining and refactoring the current code to create efficiency within the development environment.