mint-skincare
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)
Sign in to leave a comment
Project Tasks20
Align Colors and Theme
As a user, I want the app to have a consistent color scheme and theme based on the SRD's defined palette (Soft Teal, Light Coral, Off-White, Charcoal Gray, Lemon Yellow). Ensure accessibility and readability.
Build Daily Log API
As a user, I want to submit my daily health data to the backend. Create an API endpoint to save water intake, sleep hours, workout minutes, and skin condition rating.
Build Register Page
As a user, I want to create an account by entering my details. The page should include a form with fields for name, email, password, and a submit button. Implement based on the existing JSX design.
Build Landing Page
As a user, I want to see an engaging and interactive landing page that introduces GlowTrack and its features. The page should include animations like water ripple effects behind buttons and a clean layout based on the provided color palette. Implement based on the existing JSX design.
Build Login Page
As a user, I want to log in securely using my credentials. The page should include a form with fields for email, password, and a login button. Implement based on the existing JSX design.
Design Home Page
As a user, I want to see an engaging and interactive home page that introduces GlowTrack and its features. The page should include animations like water ripple effects behind buttons and a clean layout based on the provided color palette.
Implement Recommendations API
As a user, I want to generate personalized skincare, diet, and health tips based on my logged data. Create an API endpoint to return recommendations using rule-based logic.
Build Dashboard Page
As a user, I want to view my health progress on a dashboard with visual charts. The page should include water intake progress, sleep hours, workout minutes, skin condition rating, and 7-day trend charts. Implement based on the provided JSX design.
Implement Register API
As a user, I want to register and create an account. Create a backend API endpoint to handle user registration with validation and password hashing.
Implement Login API
As a user, I want to log in securely using my credentials. Create a backend API endpoint to authenticate users and return a token.
Align Colors and Theme
As a user, I want the app to have a consistent color scheme and theme based on the SRD's defined palette (Soft Teal, Light Coral, Off-White, Charcoal Gray, Lemon Yellow). Ensure accessibility and readability.
Build Recommendations Page
As a user, I want to view personalized skincare, diet, and health tips. The page should display skincare suggestions in cards, a diet plan in bullet format, and health tips in a separate section. Include a disclaimer at the bottom.
Build Recommendations Page
As a user, I want to view personalized skincare, diet, and health tips. The page should display skincare suggestions in cards, a diet plan in bullet format, and health tips in a separate section. Include a disclaimer at the bottom.
Build Profile Page
As a user, I want to update my health and skin profile, including details like age, gender, skin type, weight, height, lifestyle, and target water intake. The page should include a form for editing and saving data.
Build Daily Log Page
As a user, I want to log my daily health data, including water intake, sleep hours, workout minutes, and skin condition rating. The page should include a form for data entry and a submit button.
Build Dashboard Page
As a user, I want to view my health progress on a dashboard with visual charts. The page should include water intake progress, sleep hours, workout minutes, skin condition rating, and 7-day trend charts. Implement based on the provided JSX design.
Implement Recommendations API
As a user, I want to generate personalized skincare, diet, and health tips based on my logged data. Create an API endpoint to return recommendations using rule-based logic.
Implement Profile API
As a user, I want to update my health and skin profile. Create an API endpoint to save user details like age, gender, skin type, weight, height, lifestyle, and target water intake.
Implement Dashboard API
As a user, I want to fetch my health progress data for the dashboard. Create an API endpoint to retrieve water intake, sleep hours, workout minutes, and skin condition trends for the last 7 days.
Implement Daily Log API
As a user, I want to submit my daily health data to the backend. Create an API endpoint to save water intake, sleep hours, workout minutes, and skin condition rating.
No comments yet. Be the first!