Qonso

• 

  Logo

• 

  water log

• 

  water tracking

💧 About the project: Qonso

Qonso is a wellness-focused web app designed to help users stay hydrated while making it fun and rewarding. The app encourages daily water intake by turning it into a habit-forming game, where users earn points each time they log their water consumption — points that can later be redeemed for rewards. 💡 Inspiration

The idea for Qonso came from a simple but recurring problem: most people don’t drink enough water. We all know it's essential, yet we often forget. I wanted to create a tool that doesn’t just remind users to hydrate, but actually motivates them with rewards and visual progress. By gamifying hydration, Qonso helps turn a healthy behavior into a consistent habit. 🧠 What I learned

Qonso taught me a lot about:

Designing habit-building mechanics (reminders, streaks, and rewards)

Building a full-stack app using React + Supabase

Managing multilingual support (EN, FR, ES)

Creating a secure and scalable admin interface

Working with row-level security and custom SQL functions

Structuring an app around user motivation and retention

🛠️ How I built it

The app was built with:

React + Vite for the frontend

Supabase (PostgreSQL, Auth, Storage) for the backend

TailwindCSS for UI design

i18next for internationalization

Custom components for:

    Tracking daily water intake

    Earning and redeeming points

    Admin management of rewards, users, and notifications

    Automatic email reminders (via SMTP config)

I also implemented country-specific targeting for rewards and notifications, with future extensions planned for analytics and community challenges. 🚧 Challenges I faced

Designing an experience that’s motivating but not overwhelming

Keeping track of daily activity while avoiding user manipulation

Handling multilingual data in both the app and the admin interface

Implementing secure Supabase RLS policies

Ensuring a smooth and responsive UI/UX across devices

Managing email reminders and avoiding spam issues

Built With

• french
• i18next
• interactive-user-interface-vite-?-for-ultra-fast-dev/build-environment-tailwindcss-?-for-a-clean-and-responsive-design-system-react-router-?-for-client-side-routing-i18next-?-for-multilingual-support-(english
• lazy-loaded
• modular
• react
• react-router
• responsiv-disign
• supabase
• tailwindcss
• vite