The Ordinary Advanced Routine Builder 🧪

A modern, type-safe web application for creating advanced skincare routines with The Ordinary products. Built with SvelteKit, TypeScript, and TailwindCSS.

🌟 Key Features

• Advanced Product Compatibility Engine: Real-time validation of product combinations based on The Ordinary's compatibility rules
• Dynamic Routine Optimization: Automatic ordering of products based on their phase (water, anhydrous, emulsion, etc.)
• Intelligent Filtering System: Multi-faceted filtering by concerns, product types, and time of day
• Shareable Routines: Generate unique URLs for sharing routines, with all selections preserved
• Responsive Design: Fluid layout that works seamlessly across all devices
• Dark/Light Theme: Custom-designed themes with smooth transitions

🛠 Technical Stack

• Framework: SvelteKit
• Language: TypeScript
• Styling: TailwindCSS + DaisyUI
• Icons: Lucide Icons
• State Management: URL-based state with SvelteKit's native stores
• Build Tool: Vite
• Deployment: Vercel

💡 Technical Highlights

Type-Safe Product Management

interface Product {
	id: string;
	Name: string;
	TOD: 'day' | 'night' | 'both';
	Phase: string;
	Targets: string[];
	Excludes: string[];
	Tags: string[];
}

Real-time Compatibility Checking

function getIncompatibilityReason(product: Product): string | null {
	const incompatibleProducts = selectedProducts.filter((id) => {
		const existingProduct = products[id];
		return (
			product.Excludes.includes(existingProduct.Tags[0]) ||
			existingProduct.Excludes.includes(product.Tags[0])
		);
	});
	return incompatibleProducts.length
		? `Not compatible with: ${incompatibleProducts.map((id) => products[id].Name).join(', ')}`
		: null;
}

SEO Optimization

• Dynamic meta tags based on routine content
• Schema.org structured data for routines
• OpenGraph tags for social sharing
• Semantic HTML throughout

State Management

• URL-based state management for shareable routines
• Reactive updates using Svelte stores
• Persistent theme preferences using localStorage

Performance Optimizations

• Lazy loading of product data
• Efficient filtering algorithms
• Debounced search input
• Optimized re-renders using Svelte reactivity

🎨 Design Features

• Custom theme system with smooth transitions
• Glass morphism effects
• Responsive card layouts
• Accessible color schemes
• Interactive hover states
• Micro-interactions throughout

🚀 Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

📱 Mobile-First Approach

• Responsive design using Tailwind's breakpoint system
• Touch-friendly interface
• Optimized layouts for different screen sizes
• Consistent experience across devices

🔍 Future Enhancements

• PWA support for offline access
• Advanced routine comparison tools
• Product usage tracking
• Routine scheduling features
• Integration with more skincare brands

Ordinary References

Layering

Main layers

1. Prep
2. Treat
3. Seal

Secondary layers

1. Water
2. Emulsions (except for those also classified as creams)
3. Anhydrous
4. Oils
5. Creams
6. Suspensions

🤝 Contributing

Contributions are welcome! Please read the contributing guidelines before getting started.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Built with ❤️ by [Your Name]