Team Pulse - Team Health Check

Inspiration

The inspiration behind Team Pulse stemmed from a common challenge faced by team leaders and organizations: understanding team well-being and dynamics without resorting to cumbersome, time-consuming surveys or heavy HR systems. We envisioned a tool that would make regular pulse checks incredibly simple and fast, allowing team members to provide feedback in under 10 seconds, often without even needing to log in. The goal was to create a solution that fosters open communication, offers optional anonymity to encourage honest feedback, and ultimately helps leaders make data-driven decisions to improve their team's environment. We wanted to empower teams to proactively address issues and celebrate successes, leading to healthier, more productive work cultures.

What it does

Team Pulse is a streamlined platform designed for team leaders to conduct quick and effective health checks. It allows administrators to:

• Create and manage teams, adding members by email.
• Design custom health checks using predefined templates or by writing their own questions.
• Choose response scales (1-5 or emoji) and privacy settings (anonymous, named, or user choice).
• Schedule health checks for immediate sending or a future date, with optional expiration times.
• View a comprehensive dashboard with key statistics like total health checks, active surveys, total responses, and average response rates.
• Analyze detailed results for each health check, including question averages, response timelines, and comments, with the ability to export data.

For team members, the experience is frictionless: they receive a unique link via email, click it, answer a few questions, and can optionally leave a comment and choose their anonymity preference. No login is required, ensuring a high response rate and ease of use.

How we built it

Team Pulse was built as a modern full-stack application leveraging a robust and scalable technology stack:

• Frontend: Developed with React 18 and TypeScript for a dynamic and type-safe user interface. Tailwind CSS was used for rapid and consistent styling, ensuring a clean, professional, and responsive design. Lucide React provided a comprehensive set of icons.
• Backend & Database: Supabase served as the core backend, providing a PostgreSQL database for data storage, Supabase Auth for user authentication, and Supabase Edge Functions for serverless logic, specifically for sending emails.
• Email Delivery: The Resend API was integrated via a Supabase Edge Function to handle reliable and efficient email sending for health check invitations.
• Data Visualization: Recharts was used to create interactive and informative charts for the dashboard and health check results, providing clear insights into team data.
• Deployment: The application is deployed on Netlify for continuous deployment and hosting.

The architecture ensures a clear separation of concerns, with the React frontend handling user interactions and the Supabase backend managing data persistence, authentication, and server-side operations like email dispatch.

Challenges we ran into

Building Team Pulse presented several interesting challenges:

• Supabase Row-Level Security (RLS): A significant hurdle was correctly configuring RLS policies, especially for the responses table. Initially, public users (anonymous) were unable to insert responses due to restrictive policies, leading to 403 Forbidden errors. This required careful debugging and refinement of the RLS rules to allow anonymous inserts while maintaining data integrity and security, ensuring that responses could only be submitted via valid, unused links for active health checks.
• Email Integration with Edge Functions: Setting up the Resend API within a Supabase Edge Function required meticulous handling of environment variables, CORS policies, and ensuring the function could correctly fetch data from the database using the service role key. Debugging email delivery issues and ensuring proper error reporting from the Edge Function was also a learning curve.
• Health Check Expiration and Archiving: Implementing the logic for health check expiration and automatic archiving involved adding new columns to the health_checks table, updating database constraints, and creating custom Supabase functions (archive_expired_health_checks and archive_health_check) to manage the lifecycle of health checks. This required careful synchronization between the database logic and the frontend display.
• Dynamic Form Generation: Handling the dynamic nature of questions and response types (numeric vs. emoji) in the frontend required a flexible component design that could adapt to different configurations and ensure a smooth user experience during the response process.

Accomplishments that we're proud of

We are particularly proud of several key accomplishments:

• Seamless No-Login Experience: Successfully implementing the core value proposition of a frictionless response flow for team members, where they can complete a health check via a unique link without any login or registration.
• Robust Supabase Integration: Leveraging Supabase effectively for authentication, database management, and serverless functions, demonstrating a powerful full-stack setup.
• Intuitive User Interface: Designing a clean, modern, and responsive user interface with Tailwind CSS and Lucide React that is both aesthetically pleasing and highly functional for both administrators and respondents.
• Automated Email Delivery: Successfully integrating the Resend API to automate the sending of personalized health check invitations, a critical feature for the platform's usability.
• Comprehensive Analytics: Providing administrators with a clear and insightful dashboard, including response rates, question averages, and comment analysis, enabling them to quickly grasp team sentiment.

What we learned

Throughout this project, we gained valuable insights into several areas:

• Supabase Ecosystem: A deeper understanding of Supabase's capabilities, particularly its Row-Level Security, custom functions, and Edge Functions, and how to effectively combine them to build secure and scalable applications.
• Full-Stack Development Best Practices: Reinforcing the importance of clear data modeling, secure API interactions, and efficient state management in a React application.
• Serverless Functionality: Practical experience in deploying and managing serverless functions for specific tasks like email sending, understanding their benefits and limitations.
• User Experience Design: The critical role of simplifying user flows, especially for non-technical users, and how small details like optional anonymity and clear progress indicators can significantly impact engagement.
• Debugging Complex Systems: The process of diagnosing and resolving issues across the frontend, backend, and database, particularly with RLS, highlighted the importance of systematic debugging and understanding the entire application stack.

What's next for Team Pulse - Team Health Check

Team Pulse has a clear roadmap for future enhancements, focusing on expanding its utility and insights:

• Enhanced Engagement Features: Implementing reminder emails for non-respondents and detecting partial completions to boost response rates.
• Advanced Analytics: Developing heatmaps for question/team trends over time, sentiment analysis for comments, and potentially benchmarking against anonymized industry data.
• Integrations: Building integrations with popular communication platforms like Slack and Microsoft Teams for seamless health check distribution and notifications.
• Customization and AI: Introducing a custom form builder for more flexible health check creation and exploring AI-generated questions or suggestions.
• Monetization Features: Expanding the freemium model with more advanced features for Pro and Business tiers, including export options, multi-admin support, and dedicated support.
• Mobile App Version: Exploring the development of a dedicated mobile application for an even more convenient experience.

Built With

• bolt.new