FitDetector

FitDetector is a web application to identify clothing in photos of celebrities using crowdsourced data.

I developed this web application after noticing how difficult it can be to find out what clothes people are wearing in photos online. Using Google's image search is often inaccurate and gives similar looking clothing but not the exact piece of clothing, while asking on forums related to the celebrity often leads to little to no helpful replies. Building a platform that attracts users interested in clothing and with expertise or more knowledge about styles that a celebrity often wears would solve this problem.

Core Features

• Submitting an outfit photo for others to leave suggestions on
• Submitting suggestions for clothing in outfit photos
• Searching for celebrities to view outfits submitted by others
• Following celebrities to easily keep up with their outfits
• Rating outfits and celebrities
• Authentication with Google OAuth

Technology Stack

• React: Selected because of prior experience
• Next.js: Selected to learn about concepts like server-side rendering and static site generation
• TypeScript: Selected for type-checking and better developer experience for catching errors
• tRPC: Selected for integration with TypeScript and Next.js allowing for a great developer experience building end-to-end typesafe APIs
• Prisma: Selected because of prior experience and integration with TypeScript
• MySQL: Selected due to the relational nature of data in my application and to utilize the developer experience of the PlanetScale database platform
• Tailwind CSS: Selected because of prior experience and for quickly developing consistent designs

Technical Challenges

One major technical challenge I had while setting up my application architecture was how to store user uploaded images. I had never stored user uploaded images in an application before, so I did some research on my options. After looking through services like Supabase's storage, AWS S3, Cloudinary, and BackBlaze B2, I decided to use Cloudinary for this project. Cloudinary had an easy-to-use API for uploading and delivering images, options to deliver images through a CDN to improve performance, and offered transformations to manipulate images which could come in handy in the future. They also had a solid free tier for my usage so I gave it a go, and it is working great so far.

Lessons Learned

My main takeaway from this project is the benefit of using TypeScript with other typesafe developer tools when developing web applications. Prior to working on this project, I refrained from using TypeScript because I thought there would be little benefit in its use for my small projects. After countless recommendations from friends and reputable discussions online, I decided to give it a go. The initial setup and usage of types was a bit daunting and slow, but once I got accustomed to the changes from JavaScript, my development process was much smoother and I was able to catch errors quicker than I would in a JavaScript project. I plan on migrating my past projects to TypeScript, and starting future projects with a typesafe language.

Next Steps

I plan on implementing features like a voting and reputation system for clothing suggestions, content moderation, and generating statistics from data about celebrities like their most worn brand or average price of clothing. I also want to optimize for performance and decide where in my web application I can use server-side rendering or static site generation to improve the user experience.