*** Video uploaded to Google Drive folder at link provided in "Try it out" links


In most organizations like clubs and companies, interviews are a routine occurrence. Every application cycle, organizations need to set up their own system for organizing and managing information throughout each cycle, so every application cycle, multiple documents and spreadsheets are created and shared. While organizations will find a way to make these systems work, they always lack coherence, consistency, and organization, since each document and spreadsheet works independently and the platforms that recruitment teams use for sharing information are not specialized for the interview process. The result is a fragmented and overly complicated system for both interviewers and recruitment supervisors. Our team has had lots of experience recruiting for various organizations, and yet none of us have found another app like Marmalade. While there have been some softwares for receiving applications or for managing hired employees, we were never able to find an application specifically for the interview process. In light of our revelations, we have created this app ourselves, despite having limited skills prior to the start of the hackathon and less than 48 hours to execute it.

What it does

Rather than using several non-specialized apps like Excel, Word, Sheets, Docs, Notion, Calendar, and more, Marmalade offers interviewers and companies an all-in-one solution for recruitment management. Marmalade's multitude of features allows recruitment teams to manage several applicants for multiple positions at a time, without having to navigate several platforms and pages. Marmalade allows users to compile their applicant data into a single location, complete with sorting functions for interview times to help interviewers easily find and prepare for upcoming interviews. Additionally, with the ability to take notes and assign scores for individual applicants, recruitment teams can eliminate the need for additional apps, thereby further streamlining the review and decision process. Once the team has completed interviews, Marmalade neatly displays the candidates by score and allows interviewers to mark their choices directly in the app.

How we built it

  • We used Firebase's Authentication and Realtime Database services to facilitate user authentication and data storage
  • We used React to build the entirety of the frontend of the project and connect it to the backend
  • Figma was used as the wire-framing software to layout the UI/UX
  • Adobe Illustrator was used to build a variety of graphics used throughout the application, including the logo ## Challenges we ran into
  • Throughout the hackathon, we were constantly tackling how to tie React and Firebase together. Prior to the hackathon, we had no experience with React, and a limited amount with firebase. Despite this, each of us were able to do our parts and create a beautiful UI/UX, as well as a fully functional database and authentication system. However, when we tried to merge the backend and frontend, we ran into many issues.
  • Because it was also our first time using React, we ran into quite a few challenges related to using states and dynamic rendering of the various components. Our team was much more habituated with vanilla HTML/CSS/JS, so using React’s functionality during the hackathon was quite the learning curve.

Accomplishments that we're proud of

  • Being able to absorb React.js as new language and applying it to our project
  • Having the courage to face new challenges like using Firebase with React
  • Being able to adapt and readjust to problems and challenges during the hackathon, and finding creative solutions within our knowledge reach
  • Working hard even through difficult circumstances (and little sleep)
  • Improving our organization of our files since our previous project
  • Overall, creating our first web app with React.js!
  • All of us learned many new concepts and had hands on practice during the hackathon

What we learned

  • We familiarize ourselves with the fundamentals of ReactJS
  • Working with React and Firebase constantly presented struggles throughout the process since we had very limited experience working with both going into the hackathon, but we learned how to pair the two
  • Collaboration isn’t as simple as splitting up front-end and back-end, it’s just as important to know how to put it all together
  • It’s important to never give up, even when there is seemingly no light at the end of the tunnel

What's next for Marmalade

  • Adding multiple company workspaces for a single user
  • Archiving/Exporting a candidates information
  • Including smoother animations to augment the user-experience
  • Revamping the note-taking system, as well as adding real-time collaborative editing
Share this project: