Building a progressive web application that allows users to track skincare products, usage patterns, and effectiveness. This app is being developed for my gf
- a log of what I tried
- a log of what I wanna try
- review on products on how they made me feel/look
- how long ive used it
- a journal for skin care steps to know which order
- progress section to keep track of progress with photos and notes
-
Product Tracking
- Log skincare brands and products used
- Record when products were used (calendar integration)
- Rate how effective each product was
-
Photo Progress Tracking
- Take consistent photos to track skin changes over time
- Add notes to photos to document observations
- Compare photos side-by-side to visualize progress
-
Skincare Journal
- Document daily observations about your skin
- Track reactions to products and environmental factors
- Create a comprehensive record of your skincare journey
-
Implementation
- Develop as a PWA for offline capabilities and mobile installation
- Use Vite + React for frontend development
- Implement shadcn/ui for UI components
- Ensure mobile-friendly design
- Clone this repository
- Install dependencies with
npm install --legacy-peer-deps - Run development server with
npm run dev
If you're helping with this project, please focus on:
- Mobile-first design approach
- Simple, intuitive user interface
- Local storage implementation for product data
- Calendar component for tracking usage dates
- Adding dexie for offline use
- Photo storage and comparison features
- Set up basic project structure with Vite and React
- Add shadcn/ui components
- Implement product entry form
- Create calendar view for tracking usage
- Add PWA capabilities
- Set up local storage/IndexedDB
- Implement photo upload and comparison features
- Use upload thing for image uploads https://docs.uploadthing.com/
This is a personal project being developed for my girlfriend to track her skincare routine, turns out it can be much more than that.
