The latest articles on DEV Community by SOUMYODEEP DEY (@soumyodeep_dey). https://dev.to/soumyodeep_dey https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1741927%2F27ef2a28-6445-49ae-988a-0ae750e562d2.jpg https://dev.to/soumyodeep_dey en SOUMYODEEP DEY Mon, 28 Jul 2025 06:29:37 +0000 https://dev.to/soumyodeep_dey/beautymatch-smart-skin-compatibility-for-beauty-products-2fbg https://dev.to/soumyodeep_dey/beautymatch-smart-skin-compatibility-for-beauty-products-2fbg <h2> Introduction </h2> <p><strong>BeautyMatch</strong> is a privacy-first Chrome Extension that analyzes beauty product pages from <strong>Amazon.in</strong>, <strong>Sephora India</strong>, and <strong>Nykaa</strong>, and shows whether a product is a <strong>Good Match</strong>, <strong>Caution</strong>, or <strong>Not Recommended</strong> based on your skin profile.</p> <h2> 🚀 Features </h2> <ul> <li>🧠 Smart verdicts based on your skin tone, type, and allergies</li> <li>🛍️ Automatically scrapes ingredient info from supported Indian websites</li> <li>✍️ Quick onboarding to save your skin profile</li> <li>🎨 Tailwind-powered popup UI with React</li> <li>🔒 100% local – no server, no tracking, no data sharing</li> </ul> <h2> Watch it here : <a href="https://youtu.be/7M6hI5qbFKQ?si=CmbFt0JtNMCYexbN" rel="noopener noreferrer">YouTube Video</a> </h2> <h2> Full Code here : <a href="https://github.com/Soumyodeep-Dey/BeautyMatch" rel="noopener noreferrer">GitHub Link</a> </h2> <h2> 📁 Project Structure </h2> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>BeautyMatch/ ├── public/ │ ├── manifest.json # Chrome extension config (MV3) │ ├── onboarding.html # Onboarding page HTML │ └── icons/ # Extension icons ├── src/ │ ├── pages/ │ │ └── Onboarding.tsx # Onboarding React component │ ├── content/ │ │ └── scraper.ts # Content script to scrape product info │ ├── background/ │ │ └── background.ts # Background service worker (MV3) │ ├── App.tsx # Verdict popup UI │ ├── main.tsx # React entry point │ └── styles/ # Tailwind CSS ├── index.html # Popup HTML ├── vite.config.ts # Vite + CRXJS build config └── README.md # You're here! </code></pre> </div> <h2> 🧠 How It Works </h2> <ol> <li>You complete a short onboarding quiz</li> <li>Your skin profile is saved in <code>chrome.storage.sync</code> </li> <li>When visiting supported product pages, the extension:</li> </ol> <ul> <li>Scrapes ingredients from the page</li> <li>Compares them with your saved skin profile</li> <li>Displays a personalized verdict in the popup</li> </ul> <h2> 🛠 Tech Stack </h2> <ul> <li><strong>Vite + React + TypeScript</strong></li> <li> <strong>Tailwind CSS</strong> for styling</li> <li> <strong>@crxjs/vite-plugin</strong> for Manifest V3 Chrome Extension builds</li> <li> <strong>Chrome Extension APIs</strong>: <code>storage</code>, <code>runtime</code>, <code>scripting</code> </li> </ul> <h2> 🧪 Run Locally </h2> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code><span class="c"># Install dependencies</span> npm <span class="nb">install</span> <span class="c"># Build for Chrome (outputs to /dist)</span> npm run build <span class="c"># Load in Chrome:</span> <span class="c"># 1. Visit chrome://extensions</span> <span class="c"># 2. Enable Developer Mode</span> <span class="c"># 3. Click "Load unpacked"</span> <span class="c"># 4. Select the /dist folder</span> </code></pre> </div> <h2> 📦 Scripts </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Command</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>npm run dev</code></td> <td>Launches dev server for pages</td> </tr> <tr> <td><code>npm run build</code></td> <td>Builds extension for production</td> </tr> </tbody> </table></div> <h2> 🌱 Future Roadmap </h2> <ul> <li>Add support for more Indian and global e-commerce platforms</li> <li>Improve ingredient matching accuracy</li> <li>Add accessibility settings and dark mode</li> <li>Optional: user login and syncing across devices</li> </ul> <blockquote> <p>🚀 Built with ❤️ by <a href="https://soumyodeep-dey.vercel.app/" rel="noopener noreferrer">Soumyodeep Dey</a></p> </blockquote> webdev extensions skincare typescript