System Requirements Document (SRD) for GlowTrack

1. Introduction

GlowTrack is a Smart Health + Skin Care Tracker web application designed to help users monitor their health and skincare routines. By logging daily health data, users can receive personalized skincare product suggestions, simple diet plan recommendations, and track their progress through an intuitive dashboard. GlowTrack aims to provide actionable insights using rule-based logic to promote healthier habits and improved skin health.

2. System Overview

GlowTrack is a full-stack web application with the following core functionalities:

• User registration and login.
• Logging of daily health and skincare data.
• Personalized recommendations for skincare products and diet plans.
• A dashboard to visualize health progress (e.g., water intake, sleep hours, skin condition trends).
• A clean, minimalistic user interface for seamless interaction.

The system architecture is modular, ensuring scalability and maintainability. The backend is built using Node.js and Express, while the frontend uses React for a modern, responsive user experience. MongoDB serves as the database for storing user data, daily logs, and recommendations.

3. Functional Requirements as Story Points

• As a User, I should be able to register and create an account.
• As a User, I should be able to log in securely using my credentials.
• As a User, I should be able to log my daily health data, including water intake, sleep hours, workout minutes, and skin condition rating.
• As a User, I should be able to view my health progress on a dashboard with visual charts.
• As a User, I should be able to generate personalized skincare, diet, and health tips based on my logged data.
• As a User, I should see a disclaimer on the recommendations page stating that the app is not a substitute for professional medical advice.

4. User Personas

1. User:

   • Primary user of the application.
   • Can register, log in, log daily health data, view progress, and receive recommendations.

2. Admin (Future Scope):

   • Manages user accounts and monitors system health.
   • Not included in the MVP.

5. Visuals Colors and Theme

The GlowTrack application will use a modern, clean, and minimalistic design with the following color palette:

• Primary Color: Soft Teal (#4DB6AC) – Represents health and freshness.
• Secondary Color: Light Coral (#FF6F61) – Adds warmth and energy.
• Background: Off-White (#FAFAFA) – Clean and neutral for readability.
• Text: Charcoal Gray (#333333) – For high contrast and accessibility.
• Accent: Lemon Yellow (#FFEB3B) – Highlights important elements like buttons or alerts.

The theme will focus on simplicity and clarity, ensuring users can navigate the app effortlessly.

6. Signature Design Concept

Interactive Skincare Dashboard with Dynamic Glow Effects

The GlowTrack homepage will feature an interactive dashboard that visually "glows" as users improve their health metrics. Here's how it works:

• The background dynamically shifts from a dull gray to a radiant gradient (teal to coral) based on the user's progress (e.g., water intake, sleep hours).
• Micro-interactions: When users hover over charts or metrics, subtle glowing animations will highlight the data point.
• The skin condition rating chart will feature a "glow meter" that pulses gently, symbolizing skin health improvement.
• The landing page will include an animated water ripple effect behind the login/register buttons, reinforcing the hydration theme.
• The recommendation cards will "flip" with a glowing border when clicked, revealing detailed tips.

This design will make the app visually engaging and encourage users to maintain healthy habits to "unlock their glow."

7. Non-Functional Requirements

• Performance: The app should load within 2 seconds on a standard broadband connection.
• Scalability: The system should support up to 10,000 concurrent users.
• Security: User data must be encrypted, and passwords hashed using industry-standard algorithms (e.g., bcrypt).
• Usability: The interface should be intuitive and accessible, adhering to WCAG 2.1 guidelines.
• Availability: The system should have 99.9% uptime.

8. Tech Stack

• Frontend: React (modern functional components).
• Backend: Node.js with Express.
• Database: MongoDB.
• Testing: Jest for unit testing.
• Charts: Lightweight React chart library (e.g., Recharts).

9. React Folder Organization and Components Planning

Folder Structure

The React frontend will follow a modular structure for scalability and maintainability:

src/
├── components/         # Reusable UI components
│   ├── Button/
│   ├── Chart/
│   ├── Form/
│   └── Card/
├── pages/              # Page-level components
│   ├── RegisterPage/
│   ├── LoginPage/
│   ├── DashboardPage/
│   ├── DailyLogPage/
│   └── RecommendationPage/
├── services/           # API calls and business logic
├── hooks/              # Custom React hooks
├── styles/             # Global and component-specific styles
├── utils/              # Utility functions
├── App.js              # Main app component
└── index.js            # Entry point

Components

1. Button: Reusable button component with props for type, size, and onClick handler.
2. Chart: Wrapper for rendering water intake and skin rating charts.
3. Form: Generic form component for handling input fields and validation.
4. Card: Used for displaying recommendations (skincare, diet, health tips).

Pages

1. RegisterPage: User registration form with validation.
2. LoginPage: User login form with secure authentication.
3. DashboardPage: Displays user progress with charts and metrics.
4. DailyLogPage: Form for logging daily health data.
5. RecommendationPage: Displays personalized recommendations in an engaging layout.

10. Assumptions and Constraints

• The app will use rule-based logic for recommendations, not advanced AI.
• All user data will be stored securely in MongoDB.
• The MVP will focus on web functionality; mobile app development is out of scope for now.
• The system will not include real-time notifications in the MVP.

11. Glossary

• MVP: Minimum Viable Product.
• Rule-Based Logic: A simple decision-making system based on predefined conditions.
• WCAG: Web Content Accessibility Guidelines.
• Skincare Suggestion: Recommendations for products or routines to improve skin health.
• Diet Plan: Suggestions for food and drink to support overall health.

This updated SRD reflects the confirmed system architecture, database schema, API endpoints, recommendation logic, React frontend planning, and UI design details. Let me know if you'd like to refine any section further!