• 

  Mystic Home Page

Inspiration

"Outfits give you confidence." This was a line I came across while scrolling LinkedIn, and it made me stop and think—do outfits really matter that much? I wanted to find out more, and as always, my go-to method was searching on YouTube.

That’s when I discovered that the outfits that look so aesthetic on Pinterest often don’t look the same on everyone—and the reason is body shape. That’s where the idea Mystic was born.

What it does

Users' measurements are taken, and based on that, detailed styling tips—such as suitable necklines, sleeves, tuck/untuck choices—are provided. Outfit suggestions across four categories (Indian, Indo-Fusion, Western, and Comfort) are also given. Additionally, the system analyzes uploaded outfit photos to test whether they suit the user’s body type or not.

How we built it

I built Mystic Wardrobe Whisperer using a modern tech stack powered by AI-assisted coding tools like Lovable and Cursor. The project is built using Vite + React + TypeScript with styling powered by TailwindCSS and shadcn/ui for UI components.

The repo is structured cleanly using:

src/: for core application logic and components index.html: the app’s HTML entry point package.json & bun.lockb: for dependency and package management (both npm and Bun used during setup) tailwind.config.ts & postcss.config.js: to configure styling and theming tsconfig.*.json: for fine-grained TypeScript configuration across app, node, and build layers

We used Cursor for fast AI-assisted development and refactoring, especially while building core logic

Challenges we ran into:

The biggest challenge was figuring out what the user actually needs. Initially, Mystic only gave outfit suggestions. But using it myself, I realized something was missing — just seeing an outfit name wasn’t enough. I wasn’t getting actual styling guidance.

After some research, I understood that styling tips (like neckline, sleeves, tuck/untuck, etc.) with explanations were essential — not just for recommendations, but for users to learn why something works for their body.

Another challenge: I started building this project without any AI tools except ChatGPT. I had no idea about Lovable or Cursor — and that showed in the initial version. It lacked structure, had poor image support, and no homepage. It felt incomplete.

Once I discovered these tools (thanks to my sibling!), I could finally add a feature I always wanted — the outfit image analyzer, where users upload a photo and get a suitability rating. But building this wasn’t easy either. The analyzer gave bad results at first — even analyzing non-outfit images. It took multiple upgrades and adjustments to get it to a usable state.

Accomplishments that I am proud of

The styling tips now explain why something works — it's not just generic advice. The outfit analyzer finally works well and gives useful feedback.

What I learned

That solving real problems means thinking like a user, not just a builder. And that the right tools can multiply your vision — but your clarity of purpose matters the most.

What's next for Mystic

I want to make the outfit analyzer more intelligent, using stronger AI models and real fashion logic. I plan to scale it so that every female user can confidently choose what suits her body — because you should choose the outfit, not let the outfit choose you.

Built With

• cursor
• html5
• lovable
• react
• tsx
• typescript
• vite