PosePal

Inspiration 🌟

The inspiration behind PosePal comes from the common issue of maintaining a healthy screen distance, especially in today's digital-heavy lifestyle. Many existing systems offer screen distance warnings, but they lack engagement and effectiveness. We wanted to address this by creating a more interactive and fun experience to encourage users to maintain a healthier posture while using their devices.

What it does 🚀

PosePal is an interactive web app designed to monitor a user's screen distance. It features a unique alert system that 'yells' in a cute, engaging manner when the user is too close to the screen. This approach aims to make health-conscious behavior enjoyable. Additionally, PosePal includes a feature to track and view the user's history, providing insights into their screen time habits. It also incorporates a countdown timer for focused work sessions, enhancing productivity while ensuring ergonomic safety.

How we built it 🛠️

PosePal was developed using a modern tech stack, reflecting current trends in web development. The frontend was built with React, ensuring a dynamic and responsive user interface. TailwindCSS was used for styling, providing utility-first CSS classes that made it easier to design a visually appealing and intuitive layout. On the backend, we utilized Express, a flexible Node.js web application framework, for handling server-side logic. Data management was handled with SQLite, a lightweight database, in combination with Knex, a SQL query builder, allowing for efficient and manageable data operations. For the core functionality of screen distance measurement, our team implemented face-api.js, which is built upon tensorflow.js, enabling robust image processing and computer vision techniques.

Challenges we ran into 🤔

One of the primary challenges your team faced was accurately measuring the screen distance. Initially, we considered using a complex formula that involved various parameters and calculations. However, this approach proved to be overly complicated and perhaps impractical for real-time processing. After experimenting and iterating, we simplified the method by focusing on measuring the distance between the user's eyes in pixels using face-api.js. This approach provided a more direct and efficient way to estimate screen distance, although it likely required careful calibration and testing to ensure accuracy and reliability across different users and environments.

Accomplishments that we're proud of 💪

Developing a Functional MVP: We successfully created a Minimum Viable Product (MVP) that effectively showcases our solution for maintaining healthy screen distance.
Self-Managed Environment Setup: For the first time, we independently set up the development environment for a complex web application.

What we learned 📚

Effective Use of Technologies: We improved our skills in React, TailwindCSS, and face-api.js, learning to integrate these tools for dynamic UI and real-time image processing.
Backend Skills: Our work with Express and SQLite deepened our understanding of server-side development and database management.
Simplified Problem-Solving: We learned the importance of simplifying complex problems, a lesson that came from devising a practical approach to measure screen distance.
Team Collaboration and Project Management: This project honed our teamwork skills and project management, teaching us to combine diverse expertise effectively.

What's next for PosePal 🔮

Refine the error handling mechanisms in both the frontend and backend
Include a better calibration process for measuring screen distance, ensuring greater accuracy and reliability by developing more sophisticated algorithms or user-guided calibration steps.
Add features for badge earning and sharing achievements on social media
Enable login functionality with third-party services, specifically integrating Clerk for user authentication