Haute Style

Reduce waste & increase fashionability with Haute Style. Upload photos or paste links to clothes you own/want. Get curated outfits previewed on a mannequin with your measurements. Sustainable & chic!

Comment

Inspiration

I was inspired to build this project because of my combined love and interest for tech, fashion, and sustainability. I wanted to build something that could help people continue to stay stylish but also reduce fashion waste wherever possible. I see many great looks on Pinterest and other social media platforms but I think many of those looks can be recreated by items most people already have in their closets.

What it does

This add currently lets you add clothing to your closet either via a photo from your cameral roll or by pasting a URL link to an item of clothing. The app currently shows a Closet grid of saved items where you can tap the item for more details. You can also delete items or clear all items

How we built it

We built Haute Style as a single-file MVP using React Native with Expo in TypeScript, powered by @react-navigation/native for a stack navigator, expo-image-picker for photo import, and @react-native-async-storage/async-storage for local persistence. The code defines typed navigation routes and a ClosetItem model, and relies on centralized storage helpers—loadItems, saveItems, getItemById, and deleteItemById—to keep screens clean. The app includes five screens: Home, AddItem (supports photo import and link import), Closet (a FlatList grid with pull-to-refresh), ItemDetail (large preview with delete), and an Outfits placeholder (currently). For link imports, fetchOpenGraph(url) fetches the HTML and regex-parses and ; when OG data is unavailable or blocked (e.g., due to CORS on web), the app saves a graceful placeholder so items are still trackable.

Challenges we ran into

Right now a challenge I am facing is getting the image of the clothing to show up when I paste a URL link.

Accomplishments that we're proud of

Building a basic and clean front-end MVP so I can see how the app would look and behave and iterate later to make it cuter and more aesthetic. Along the way, I leveled up in TypeScript (which I hadn't had much experience with previously). The codebase is also pretty organized and extensible which sets me up to extend features without spaghetti. As of now, I believe I have a solid foundation to build on to create a better app.

What we learned

We learned React Native fundamentals—how core primitives like View, Text, Image, FlatList, and TouchableOpacity map to native UI—and picked up navigation patterns with typed route params using useNavigation, useRoute, and useFocusEffect to refresh on screen focus. Most of all, I learned the importance of patience and a growth mindset as this project was a big learning curve for me as I had to learn about a lot of new things to complete what I have done so far.

What's next for Haute Style

There is much more to do to finish this project. Next, I need to research how to make sure that when URLs are pasted, it returns and image and title. I also want to create a login system where people can have their own accounts so they can access it on both their phone or laptop and everything would be synced. After that come the delighters: background removal for cleaner previews and a simple measurements-based mannequin. I am sure there is much more to do to build this project up but those are the parts I am working on currentl.

Built With

Share this project:

Updates