Anxiety Tap Game

System Design Diagram
Home Page
Analysis Page

Inspiration

We wanted to build something simple yet impactful — a tool to help people become more aware of their anxiety patterns and feel a small sense of control in stressful moments. With mental health being a growing concern, especially among students and tech workers, we created a gamified, lightweight experience: tap a duck when you're anxious, and gain insight and encouragement along the way.

What it does

Allows users to tap a duck to log moments of anxiety
Provides sound and visual feedback to help self-soothe
Tracks daily and weekly tap patterns and displays them in charts
Uses Gemini AI to offer personalized feedback, encouragement, and advice
Fully responsive, installable as a PWA, and works offline

How we built it

Frontend: HTML, CSS, JavaScript (Vanilla + Tailwind), ECharts, PWA with Service Worker + Manifest
Backend: Node.js, Express.js, MongoDB Atlas (hosted on Heroku)
AI Integration: Google Gemini 2.0 Flash via REST API
Storage: LocalStorage for temporary counts, MongoDB for persistent user data
Deployment:
- Frontend: GitHub Pages
- Backend: Heroku API

Challenges we ran into

Handling overlapping audio playback for quick taps without cutting off sounds
Making the app feel smooth and emotionally soothing on both desktop and mobile
Integrating Gemini AI in a friendly, non-clinical tone using prompt engineering
Managing cross-origin requests between GitHub Pages and Heroku-hosted APIs

Accomplishments that we're proud of

Created a polished, installable mobile PWA that works offline
Fully functional user system with login, registration, and persistent data
Integrated generative AI to provide actual emotional support
A calming, delightful user interface that works well across devices
Simple to use — just tap, and you're already reflecting and healing

What we learned

How to structure full-stack apps with separate hosting for frontend/backend
How to handle real-time visual/audio feedback in JavaScript
How to work with Google’s Gemini API and craft wellness-focused prompts
How impactful a simple idea can be when paired with thoughtful UX

What's next for Anxiety Tap Game

Add more duck sounds and emotional feedback states (e.g., stressed, relaxed)
Support journaling after taps for deeper emotional tracking
Export or email weekly reports to users
Enable themes and light/dark mode
Build a streak feature to encourage self-awareness habits
Connect with licensed therapists for pro-mode guidance (with consent)

Built With

Submitted to

Stevens QuackHacks

Created by

Hogan Lin was responsible for deploying both the frontend and backend of the Anxiety Tap Game:

1. Deployed the backend server to Heroku, ensuring seamless API connectivity and database access via MongoDB Atlas

2. Deployed the frontend as a static PWA on GitHub Pages, with full offline capabilities and service worker integration

3. Designed and implemented the entire UI/UX, focusing on a calm, friendly user experience across all screen sizes

4. Integrated Progressive Web App (PWA) features including manifest, icons, and service worker for offline play

5. Ensured responsive behavior and optimized mobile support for login, register, gameplay, and analysis pages

Hogan Lin
1. Cloud Database Setup: I configured and deployed a MongoDB Atlas cloud database to ensure our data storage was scalable, secure, and accessible for both development and production environments.

2. Backend Development: I built the backend using Express.js, where I designed and implemented RESTful API endpoints to handle user authentication, data tracking, and communication between the frontend and the database. The server logic ensures smooth data flow and reliable performance.

3. Frontend Integration: On the frontend, I used jQuery and vanilla JavaScript to handle user interactions and send asynchronous HTTP requests via Axios to our backend server. I also implemented logic to properly handle and display the response data, ensuring a seamless user experience.

WeiTing Kuo
I worked on the frontend of the project. This was my first time participating in this type of project, and I learned a great deal throughout the process.

Peter Liao
Gaoyi Wu was responsible for implementing the analysis page, transforming raw user interaction data into actionable insights
1. Data Visualization with ECharts and Time & Behavior Analysis

2. Dynamic Data FetchingIntegrated real-time data fetching from backend APIs, ensuring the charts reflect up-to-date user behavior.

3.Gemini AI Integration
Designed and constructed structured prompts for Gemini API, which interprets the anxiety pattern data and generates personalized mental health advice.

Gaoyi Wu

Updates

WeiTing Kuo posted an update — Mar 30, 2025 11:42 AM EDT

For demonstration purposes, please use the following account to test the login and explore the application. This account contains comprehensive test data, allowing for the most complete presentation of our application's features.

Username: wesley Password: 123

Log in or sign up for Devpost to join the conversation.

Hogan Lin started this project — Mar 30, 2025 10:54 AM EDT

Leave feedback in the comments!

Log in or sign up for Devpost to join the conversation.