Sign In Page
Sign Up Page
Home Page
Symptom Checker Page
Routine Planner Page
Skincare Solutions Page
Medical Consultation Page
Exercise Library Page
Nutrition Plans Page
Fun Zone Page
Profile Page

🩺 SymptoWise – Your Personal AI Health & Wellness Companion

🚀 Inspiration

In an age where healthcare information is just a search away, many people rely on the internet to understand their symptoms. Unfortunately, this often leads to misinformation, anxiety, or even harmful self-diagnosis. We saw a gap, a need for a reliable, interactive, and user-friendly tool that not only checks symptoms but also encourages a preventive and holistic approach to wellness.

SymptoWise was born out of a desire to empower individuals with credible health insights, daily wellness routines, and mental well-being tools, all in one unified platform.

💡 What It Does

SymptoWise is an intelligent health and lifestyle platform designed to guide users on their personal wellness journey. Here’s what it offers:

Symptom Checker: Users can input their symptoms and get potential health insights and suggested next steps.
Personalized Diet Planner: Based on user preferences or health conditions, the app recommends nutritious meal plans pulled from structured health datasets.
Exercise Recommendations: Curated workout routines based on age, goal (e.g., weight loss, flexibility), and health status.
Skincare Section: Skincare advice based on common concerns like acne, dryness, or irritation.
Consult a Doctor: Suggests appropriate doctors or specialists based on user symptoms and location (mocked via JSON for now).
Fun Zone: Engaging content and mini-activities to reduce stress and promote mental well-being.
User Authentication: Login/Register system to personalize and protect user data using context-based routing.

🛠️ How We Built It

SymptoWise is architected with a clean, modular structure and built for performance, scalability, and user experience.

🧱 Tech Stack

Tech	Usage
React (TypeScript)	Core frontend framework with component-based architecture and strong type safety
Vite	Lightning-fast bundler and dev server for optimal performance
TailwindCSS	Utility-first CSS for clean, responsive, and consistent styling
Firebase	Authentication, hosting, and secure user session management
Context API	Lightweight global state management for health data, themes, toasts
OpenAI API	Powers the intelligent symptom checker and recipe generator features
Cloudinary	Efficient media upload and CDN for user profile images
Netlify	Seamless deployment and hosting of the web app

📁 Project Structure

📦SymptoWise
├── public/
│   └── assets/
│       ├── images/
│       └── json/
│
├── src/
│   ├── components/
│   ├── contexts/
│   ├── hooks/
│   ├── layouts/
│   ├── lib/
│   ├── pages/
│   ├── App.tsx
│   ├── main.tsx
│   └── index.css
│
├── index.html
├── package.json
├── tailwind.config.js
├── vite.config.ts
└── tsconfig.json

🧗 Challenges We Ran Into

Every great build comes with hurdles. Here's what we tackled:

Mapping Symptoms to Suggestions Designing a user-friendly symptom checker that’s intuitive yet helpful was tricky, especially without medical APIs or databases.
Component Reusability & State Management Managing global state across different pages while keeping the UI responsive and modular took careful planning.
Balancing UI and Health Data Accuracy Striking the right tone between being engaging and medically sensitive was a constant consideration.
Time Constraints for PWA Optimization Integrating service workers, testing installability, and ensuring mobile readiness under a tight timeline was a challenge, but rewarding.

🏆 Accomplishments That We're Proud Of

✅ Developed a multi-faceted health application from scratch in limited time
🧠 Built and integrated a working symptom analysis flow
📱 Made the platform mobile-friendly and PWA compliant
♻️ Created a reusable component system for future scalability
✨ Achieved a clean, modern, and intuitive user interface
🔐 Implemented a fully functioning auth and route protection system

📚 What We Learned

How to manage complex application state using custom hooks and contexts
Best practices in designing user-first health interfaces
The power of modular design and strict folder structuring
Handling user authentication and access control securely
Importance of delightful micro-interactions (e.g., toasts, loading rings) in improving UX