Swasti

Inspiration

Swasti was born from a desire to bridge traditional Indian wellness wisdom with modern digital accessibility. We observed a gap in readily available, bite-sized health and lifestyle tips specifically tailored for Indian mothers, who often seek natural remedies and time-tested practices for their families. Our goal was to create a nurturing digital space that empowers them with daily insights rooted in Ayurveda and traditional home remedies, presented in an engaging and easy-to-consume format.

What it does

Swasti is a mobile-first web application that serves as a daily companion for wellness. It offers:

Daily Wellness Tips: Users can discover new health tips, home remedies, and traditional practices every day. Swipeable Interface: A "Tinder-style" card interface allows for intuitive discovery of tips, where users can swipe right to save or left to skip. Social Features: Users can like, comment on, save, and share tips with their community, fostering interaction and knowledge exchange. User Profiles: Authenticated users can create personalized profiles, follow other users, and build a supportive wellness community. Categorized Content: Tips are organized into categories like Digestion, Immunity, Children's Health, and Women's Health, making it easy to browse specific areas of interest. Secure Authentication: The app supports email/password and Google OAuth authentication, ensuring a secure and seamless login experience. Real-time Engagement: Comments and likes update in real-time, enhancing the interactive nature of the platform.

How we built it

Swasti is built as a modern, full-stack web application using a robust and scalable tech stack:

Frontend: Developed with React 18.3.1 and TypeScript 5.5.3 for a type-safe and component-based architecture. Vite 5.4.2 provides a fast development server and build process. Styling is handled efficiently with Tailwind CSS 3.4.1, enabling rapid UI development with utility-first classes. React Router 6.22.3 manages client-side navigation, while Zustand 4.5.1 serves as a lightweight state management solution. Lucide React is used for crisp, customizable icons, and React Spring adds smooth animations. The core "swipe" functionality is powered by React Tinder Card. Backend & Database: We leveraged Supabase as our Backend-as-a-Service solution. This provides a powerful PostgreSQL database, handles user authentication and authorization, implements Row Level Security (RLS) for robust data protection, and supports real-time subscriptions for dynamic content updates. Supabase also manages file storage for user avatars. Database Schema: The database includes profiles for user information, tips for wellness content, and junction tables like saved_tips, likes, comments, and follows to manage social interactions and user relationships. All tables have RLS policies meticulously defined to ensure data privacy and security. Challenges we ran into One significant challenge we encountered was perfecting the email verification flow with Supabase. Ensuring that users could seamlessly register, receive a verification email, and then be correctly redirected and authenticated upon clicking the verification link required careful handling of Supabase's authentication events and state management within our React application. We iterated on the EmailVerification.tsx component and the authStore to ensure a smooth and reliable user onboarding experience, especially for OAuth users. Additionally, managing the complex RLS policies across multiple tables in Supabase to ensure both public visibility of certain data (like tips) and strict user-specific access (like saved tips or profile editing) presented an interesting security challenge.

Accomplishments that we're proud of

We are particularly proud of:

Seamless User Experience: Delivering a highly responsive and intuitive mobile-first interface, especially the engaging swipeable tip discovery. Robust Authentication & Authorization: Successfully implementing a secure authentication system with email/password and Google OAuth, backed by Supabase's RLS for fine-grained access control. Full-Stack Functionality: Building a complete application from scratch, encompassing user profiles, content creation, and social interactions, all integrated with a powerful backend. Leveraging Modern Tech: Effectively utilizing cutting-edge technologies like React, TypeScript, Tailwind CSS, and Supabase to create a performant and maintainable application. Addressing a Niche Need: Creating a product that directly addresses the specific cultural and wellness needs of Indian mothers, providing a valuable and relevant resource.

What we learned

This project provided invaluable learning experiences in:

Supabase Deep Dive: Gaining a comprehensive understanding of Supabase's capabilities, from database design and RLS to authentication and real-time features. Advanced React & TypeScript: Deepening our proficiency in React hooks, context, and state management with Zustand, along with leveraging TypeScript for robust and error-free code. Mobile-First Design Principles: Reinforcing the importance of responsive design and optimizing user interfaces for mobile devices using Tailwind CSS. Authentication Flows: Mastering the complexities of user authentication, including email verification, password management, and OAuth integrations. Building for Community: Understanding the technical requirements and design considerations for fostering social interactions within an application.

What's next for Swasti

Our roadmap for Swasti includes exciting future enhancements:

Push Notifications: Implementing daily push notifications to deliver wellness tips directly to users' devices. Offline Mode Support: Enabling users to access saved tips and basic app functionality even without an internet connection. Multi-language Support: Expanding accessibility by offering content in regional Indian languages like Hindi and Tamil. Advanced Search & Filtering: Developing more sophisticated search capabilities and filtering options for tips and categories. Wellness Tracking & Analytics: Introducing features for users to track their wellness journey and view personal insights. Community Challenges & Goals: Creating interactive challenges and goal-setting features to encourage consistent wellness practices.