TypeSight

• 

  Landing Page

• 

  typing page

• 

  User Dashboard

Inspiration

I was practicing typing on a random typing website. I found myself looking hard into the keyboard while typing and got a decent speed. At that time, I got the inspiration to build something like this.

What it does

Our product monitors eye movements and gives real-time feedback, ensuring you keep your eyes on the screen and develop perfect typing habits.

How we built it

Building an idea from scratch is never too easy. We tackled all the problems and worked on building a robust backend using nodejs(Express) , frontend using React and realtime eye movements detection with the help of mediapipe and OpenCV with realtime connection using websockets.

Challenges we ran into

Connecting the websockets and sending the user's webcam stream to the server was not an easy challenge to tackle , but with continous testing and researching we're able to complete this feature.

Accomplishments

We're proud of that we're able to develop the idea into a working prototype. This boosts our confidence and motivates us to build more interesting stuffs like this.

LEARNING

Learning never stops when you make something on your own. Every feature requires new concepts and learning respective technologies. For me, I learned a much about websockets, connecting websockets , and backend frontend efficient connectivity.

FUTURE SCOPE

We are planning to implement a subscription feature for our users that'll give them on the top features of our product. For now, we have a simple subscription implementation using Stripe.

Built With

• express.js
• mediapipe
• opencv
• react
• typescript
• webhooks
• websockets