Code To Give
Toby
Code To Give 2022 Hackathon - Canary
My Role
Leader
Front End Developer
Client
Morgan Stanley
Salva Vita
Date
September 2022 - October 2022


About
Salva Vita is an organization with mission to remove barrier between disabled people and companies. In order to do that, they have been connecting disabled candidates with jobs opportunities through testing and evaluating. However, this process was paper-based and being received hundreds of applicants every year.
Therefore, we Canary team have decided to propose a web application can automate this tesing and evaluating process. This is our team submission for Code To Give Hackathon 2022
As the leader of my team, I was responsible for planning, assigning tasks and deadlines for my teammates, and later pitch our solutions to the judges in the final. Moreover, I also take part in developing Front End, and connecting with Back End server with REST APIs.
Result
Our team Canary won the 2nd place
The web application is hosted on Vercel . Code are public at Github
Planning
Salva Vita current website is a Wordpress website with alot of contents. We want to create a solution that can be integrated easily to their system and also complex enough to handle all the complex features.
We came up with a solution of using NGINX to manage routes of our app in a Google Cloud server. With this approach, we can bring Salva Vita's existed Wordpress website to the server, under main route, and having FrontEnd in Next.js run under a sub route, and also BackEnd in FastAPI under another sub route. So under the same domain, user can easily navigate to our developed app with just a simple nav link to the sub page.
Design
We design two type of interfaces for two different type of users: Admin & User.
User: Our target group are disabled people who looking for jobs opportunities. Therefore, we need to create a highly accessible application for them, so they can easy to navigate through the app and answer differents assessments.
To tackle accessibility issue, besides following WCAG, we also came up with few features. Firstly, by combining multiple voice processing JS libraries, we managed to create a voice assistant to help people with Visual Impairment navigate easily through the tests. Secondly, we implement an Accessibility Panel that helps increase the font size, contrast to further helps different type disables. And thirdly, we also add the functionality to navigate and answer question using keyboard for people find it's challenged to use mouse.
Besides from that, in order to reduce the time Salva Vita has to manualy evaluate candidate's results, we automated this process using Artifical Intelligence that can automate this process, and find a suitable jobs base on the real time results, while user answering the questions and suggest those to them. We believe this significantly save alot of time for Salva Vita, and helps candidates can find their job earlier.

Admin: Salva Vita's employee will be the one using this interface to manage, create and assign assessments for candidate.
On this interface, user will have the access to our well made test builder, where they can easily create or modify a test. Then they will have an option to generate an unique assessment link and send over to candidate through email. With this link, candidate can perform the test online, and later, the results of the assessment will be sent over to the system, and can be viewed later in the report page.

Features
> Unique generated assessment:
For each candidate, an unique assessment URL will be generated and sent over to the candidate.
> Managing reports:
Results of the assessment will be recorded secretly and can be viewed later by Salva Vita.
> Highly accessible assessments:
Ranging from multiple features in accessibility panel to voice assistant supports.
> Automating evaluate assessment:
Artifical Intelligence powered evaluation helps candidates find their jobs quicker.
Tech Stacks:
Front End:
> Next.js
> Typescript
> styled-components
> MUI
> Framer Motion
Back End:
> FastAPI
> Python
> NGINX
> PostgreSQL
> Docker
Tools:
> Figma
> Visual Studio Code
> Travis-CI