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
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.
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 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 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.
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.
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.
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.
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.
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.
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.
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 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 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.
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.
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.
Unlock Your Natural Glow From Within
Track your daily health habits — water intake, sleep, workouts, and skin condition — to receive personalized skincare and diet recommendations that help you radiate confidence.
Everything You Need to Glow
From daily health logging to personalized skincare tips, GlowTrack gives you the tools to understand and improve your skin from the inside out.
Visual Health Dashboard
Track your water intake, sleep hours, workout minutes, and skin condition with beautiful interactive charts that glow as your health improves.
Skincare Recommendations
Receive personalized product suggestions based on your logged data. Flip recommendation cards to reveal detailed tips tailored to your skin needs.
Diet Plan Suggestions
Get simple, rule-based diet recommendations that support your overall health and skin vitality — foods rich in antioxidants, hydration tips, and more.
Daily Health Logging
Log your daily metrics in seconds — water glasses, sleep duration, exercise time, and skin condition rating. Build a comprehensive health history.
Progress Tracking
Visualize trends over days and weeks. See how your habits correlate with skin improvements through intuitive progress charts and the dynamic glow meter.
Personalized Health Tips
Beyond skincare, receive actionable health tips based on your patterns — sleep hygiene advice, hydration reminders, and exercise suggestions.
Three Steps to Your Best Skin
Getting started with GlowTrack is simple. Create your account, log your daily habits, and watch your personalized insights unfold.
Create Your Account
Sign up in seconds with your email. Set up your profile with basic health information to personalize your experience.
Log Daily Health Data
Record your water intake, sleep hours, workout minutes, and rate your skin condition each day. It only takes a minute.
Get Personalized Insights
View your progress dashboard, receive tailored skincare and diet recommendations, and watch your glow score rise over time.
Watch Your Health Data Come Alive
Your interactive dashboard dynamically glows brighter as your health metrics improve. Track weekly trends, spot patterns, and celebrate your progress visually.
- Real-time glow score based on your daily habits
- Interactive charts with hover glow animations
- Weekly and monthly trend analysis
- Skin condition correlation insights
Ready to Unlock Your Glow?
Start tracking your health today and receive personalized skincare and diet recommendations. Your journey to radiant skin begins with one simple step.
No comments yet. Be the first!