Fabrik

Inspiration

I was planning on refreshing myself on FastAPI and learning how to create a web app with React + Vite when I came across the FASHN AI API. It caught my attention because I was interested in the use case of the FASHN AI platform, as I've personally struggled with decision paralysis when online shopping for clothes. From there, I wanted to utilize their API as a means to both learned about React + Vite and work on something that can help me and others. I also realized that this could be a game-changer for people wanted to start their own clothing brands without needing expensive photoshoots and models (as long as they get the right permissions first, of course).

What it does

Fabrik lets you virtually try on clothes using FASHN AI's pre-trained model. Fabrik enables users to upload a photo, select desired clothing pieces, and instantly generate realistic try-on results. It's perfect for both shoppers who want to avoid the whole order-and-return hassle, and for aspiring designers who want to showcase their ideas without breaking the bank.

How we built it

The initial repository was bootstrapped using a template that I had previously created for React + Vite projects (here). It was set up to help any interested developers to efficiently start working on React & FastAPI projects without the need for excessive configuration and debugging.

After that, I incorporated the following Technologies:

• Frontend: Shadcn/ui for ui components, allowing for a sleek and responsive user design.
• Backend: Integration with FASHN AI API to handle the image processing and virtual try-on functionalities.
• Database: MongoDB Atlas as a means to store images that users have saved.

Challenges we ran into

There were some initial hiccups with the setup as I had to do some debugging anyways. But aside from that, the main challenges were primarily setting up the various models I needed for the backend and the database. First, I needed to create the various request and response models for the FASHN AI API, which required trial and error along with a lot of back-and-forth with referencing the API documentation. Second was the Image model, mostly because of Pydantic's confusing error messages (aka a giant wall of text) along with the differences between Pydantic V1 and V2. For this, I had to use ChatGPT to pinpoint where the issue was originating from. Surprisingly, the MongoDB Atlas setup was fairly hassle-free, and I really liked that they provided a previous example of a FastAPI implementation.

Accomplishments that we're proud of

Overall, I'm proud that I was able to create and to be able to submit a comprehensive web application within a short timeframe despite working solo. I successfully integrated the FASHN AI API and implemented a responsive, user-friendly interface using React and shadcn/ui. Additionally, setting up a robust backend with FastAPI and MongoDB Atlas ensured that Fabrik is scalable and efficient.

What we learned

The project improved my understanding of FastAPI and highlighted the benefits of React + Vite over Create React App. Working with MongoDB Atlas gave me practical experience with NoSQL databases and their implementation patterns.

What's next for Fabrik

The immediate focus is to implement JWT authentication, ensuring that users can access only their saved images.

Next, I plan on added a batch upload features, enabling users to upload multiple images simultaneously. Which will offer users the ability to mix and match different outfits and models seamlessly.

On the more technical side, I plan on adding additional unit tests to cover a wider range of use cases and edge scenarios.

Acknowledgements

I utilized GitHub Copilot and ChatGPT for efficient debugging, and referenced official documentation. Comprehensive documentation for all resources that I used is available in the Fabrik GitHub repository.

Special thanks to the FASHN AI team for their invaluable support in helping me resolve any issues encountered during development!

Built With

• fashnai
• fastapi
• mongodb
• python
• react
• shadcn
• typescript
• vite