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.

LandingLoginRegister
Landing

Comments (0)

No comments yet. Be the first!

Architecture

Service Dependenciesv1
External
Storage
AI
Backend
Frontend
Client
Azure OpenAI
MariaDB
PostgreSQL
Redis
LiteLLM Gateway
FastAPI Server
React App
Browser
Landing design preview
Landing: View App Info
Register: Create Account
Login: Sign In
Dashboard: View Progress
Dashboard: View Charts
DailyLog: Log Health Data
Recommendations: Generate Tips
Recommendations: View Skincare Cards
Recommendations: View Diet Plan
Recommendations: Read Disclaimer
Profile: View Settings