Much of society fails to recognize the importance of quality rest. With alarming statistics, such as that 20% of all car crash injuries and trauma are related to sleep deprivation and that sleep deficit increases the risk of death by up to 13%, society’s negligence of sleep could have catastrophic effects. This issue inspired us to come up with the solution of your dreams, driftr. driftr is both a web and mobile application that tracks your fatigue levels through your blink rate measurements. Backed by many scientific studies, this method could ensure that users on their devices can take adequate breaks and that users partaking in drowsy driving are notified before they drift off.

How it works

driftr tracks and logs the users blink rate. This feature was made possible with the Tensorflow API. The user is presented the option to choose regular use or driving depending on their activity, and the blinking rates are adjusted accordingly. The camera on their devices tracks their blinking rate throughout the session and notifies them if it reaches a low amount. driftr shows a graph of the user's fatigue levels throughout the session. Vue.Js was our front-end framework of choice. We implemented Quasar to allow us to build a mobile app, Electron app and also a website. The back-end was built using CockroachDB and PostgreSQL. These libraries allow users to sign in and out of our app. Additionally, Express was used to host our server and Graph.JS was used to illustrate the user's blinking statistics. We created the user-interface design in Figma.

How we built it

All of us come from a web-development background, so it was clear what kind of project we would do best. The web server was created using REST structure. The purpose of each language and framework we used is explained below.

Vue.JS + Quasar

All of our front-end code was created using Vue.JS, while Quasar allowed us to create a mobile app via Capacitor, and a desktop using Electron.


We used the Face Landmarks Detection model and precisely tracked points located around the eye, we used a formula to determine if the user’s eyes are closed.


We used CockroachDB alongside the PostgreSQL node package to manage our data. Data we store are passwords, usernames and blink rate data. We connected to the CockroachCloud version and created a server to handle all operations.

Challenges we ran into

It was difficult to find research data related to the exact statistics we were looking for, and we had to piece together data from many different research papers. It was most difficult making the mobile app, many restrictions required many workarounds. The last challenge we faced was “translating” our code from Javascript to Vue.JS. Only one of our team members was familiar with Vue.JS, so the rest of us had to try and learn as much as we could. There were times when the task at hand was too complex, so we built it in regular Javascript and manually translated it later on when implementing it in the final project.

Design Process

Before creating the project, we decided on having a clear image for our project in mind (so that the front-end process would be much more efficient). First, we chose color palettes and fonts that matched our idea of driftr. We then created a UI design in Figma, applying our color schemes and fonts to create a simple yet sleek design. For inspiration, we went to Dribble for illustrative and UI ideas. The driftr logo concept was created from the goals of our project; to prevent dangerous driving due to fatigue and to raise awareness of the dangers of poor sleep quality. The car symbolizes our project’s relation to automotive safety, while the three Zs signify the importance of quality sleep. Photoshop CC 2018 was used to design the logo.

Accomplishments that we're proud of

It was the first time all four of us met, and throughout the hackathon, we developed excellent team chemistry. At times, we were tired and overworked, but we pushed through and completed our project. For three of us, this was our first exposure to Vue.JS and Quasar, so it was a huge accomplishment that we designed the entirety of our front-end using it. Lastly, we were incredibly pleased to implement a website, mobile app, and desktop app (all three via Quasar). At first, it seemed like a daunting task, but we were able to pull through in the end.

What we learned

Throughout HTN, we all gained basic proficiency in Vue.JS and Quasar. This project taught us the importance of team-work, communication and proper time-management. Our time spent on this project made us get to know each other on a more personal level.

What's next for driftr

For driftr, we hope to implement additional analytics for our data results, giving the user more information concerning their fatigue levels over extended periods. We also hope to add a feature where users can opt in to have their data anonymously sent to researchers, who can hopefully use this data to analyze sleep patterns over time.

Built With

Share this project: