mint-skincare

bytemp

Build a full-stack web application called "GlowTrack". Purpose: GlowTrack is a Smart Health + Skin Care Tracker web app where users can: - Register and login - Enter personal health and skin details - Log daily health data - Receive personalized skincare product suggestions - Receive simple diet plan recommendations - View health progress dashboard Tech Stack: Frontend: React (modern functional components) Backend: Node.js + Express Database: MongoDB Testing: Jest Charts: Lightweight React chart library Keep everything MVP level and clean. Use simple rule-based logic (not advanced AI). --------------------------------------------------- 1. SYSTEM ARCHITECTURE --------------------------------------------------- First: - Design system architecture - Define database schema - Define API endpoints - Explain recommendation logic structure Keep structure modular and production-ready. --------------------------------------------------- 2. DATABASE DESIGN (MongoDB Models) --------------------------------------------------- Create models: User: - name - email - password (hashed) - age - gender - skinType (dry, oily, acne-prone, combination) - weight - height - lifestyle (sedentary, active) - targetWaterIntake DailyLog: - userId (reference) - date - waterIntake - sleepHours - workoutMinutes - skinConditionRating (1-5) - notes Recommendation: - userId - skincareSuggestion - dietPlan - healthTips - createdAt --------------------------------------------------- 3. RECOMMENDATION ENGINE (Rule-Based Logic) --------------------------------------------------- Create backend logic function generateRecommendations(user, dailyLogs) Rules example: IF skinType = oily AND skinConditionRating <= 3: - Suggest oil-free cleanser - Suggest non-comedogenic moisturizer - Avoid fried and sugary food - Increase water intake to 3L IF skinType = dry: - Suggest hydrating cleanser - Suggest hyaluronic acid moisturizer - Add healthy fats to diet IF sleepHours < 6: - Add sleep improvement tip IF lifestyle = sedentary: - Suggest 20 min daily walk IF waterIntake < targetWaterIntake: - Suggest hydration reminder Return structured response: { skincareSuggestion: [], dietPlan: [], healthTips: [] } --------------------------------------------------- 4. API ROUTES (Express) --------------------------------------------------- Create routes: POST /api/register POST /api/login POST /api/daily-log GET /api/dashboard/:userId GET /api/recommendations/:userId Include: - Basic validation - Password hashing - Clean folder structure - Error handling middleware --------------------------------------------------- 5. FRONTEND (React) --------------------------------------------------- Create pages: 1. Register Page 2. Login Page 3. Dashboard Page 4. Daily Log Form Page 5. Recommendation Page Dashboard should show: - Water intake progress bar - Sleep hours - Workout minutes - Skin condition rating - 7-day water intake chart - 7-day skin rating chart - Button to generate recommendations Recommendation page should show: - Skincare suggestions in cards - Diet plan in bullet format - Health tips in separate section Use modern minimal UI. Keep design clean and simple. Use reusable components. --------------------------------------------------- 6. CHARTS --------------------------------------------------- Add: - Water intake chart (last 7 days) - Skin rating trend chart (last 7 days) --------------------------------------------------- 7. TESTING --------------------------------------------------- Generate Jest test cases for: - Recommendation logic - User registration - Daily log submission --------------------------------------------------- 8. DISCLAIMER --------------------------------------------------- Add disclaimer on recommendation page: "This app provides general wellness suggestions and is not a substitute for professional medical advice." --------------------------------------------------- Generate: - Backend folder structure - Frontend folder structure - All major files with code - Instructions to run locally - Environment variable example Keep code clean, readable, and beginner-friendly.

Comments (0)

No comments yet. Be the first!

Page 1 of 5

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.

Page 2 of 5

4. User Personas

User:
- Primary user of the application.
- Can register, log in, log daily health data, view progress, and receive recommendations.
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."

Page 3 of 5

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

Page 4 of 5

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

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

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!

mint-skincare

Comments (0)

System Requirements

System Requirements Document (SRD) for GlowTrack

1. Introduction

2. System Overview

3. Functional Requirements as Story Points

4. User Personas

5. Visuals Colors and Theme

6. Signature Design Concept

7. Non-Functional Requirements

8. Tech Stack

9. React Folder Organization and Components Planning

Folder Structure

Components

Pages

10. Assumptions and Constraints

11. Glossary

System Requirements Document (SRD) for GlowTrack

1. Introduction

2. System Overview

3. Functional Requirements as Story Points

4. User Personas

5. Visuals Colors and Theme

6. Signature Design Concept

7. Non-Functional Requirements

8. Tech Stack

9. React Folder Organization and Components Planning

Folder Structure

Components

Pages

10. Assumptions and Constraints

11. Glossary