FitHub

Fithub is a website that helps you solve the most pressing of problems: What will your outfit be for the next day? By helping you visualize the combos in your closets, you can save entire minutes!

Comment

Inspiration

We began brainstorming for our project by thinking about minor problems that have inconvenienced us in recent memory. One of the ideas that came to mind was the task of choosing an outfit. From personal experience, some team members have historically struggled to make decisive decisions when choosing an outfit. The time consuming aspect of dressing is that your only 2 options for seeing how items fit is by either trying them on individually, or laying out everything in an attempt to hold them up against each other just enough for you to have a rough idea how it will look on you. In reality, both of these methods are incredibly time consuming. In addition, it does not help that you have to remember your opinions and preferences during the transition periods of grabbing other clothes. To solve this, we decided to lean towards something along the lines of an online wardrobe where you are able to quickly match up items of clothing in rapid succession. Thus, fithub was born.

What it does

Fithub is a website that allows a user to upload and match items of clothing. The basic flow of its use is:

  • The user uploads a variety of pictures into their respective "shirts" and "pants" categories.
  • The website stores those items in a dropdown menu.
  • The user chooses two items to match and clicks a generate button.
  • The shirt and the pants are combined into one properly scaled and matched image that gives the user a good sense of how the two pieces will look together.

How we built it

Brainstorm:

Once hacking time began, we started by with a thorough group brainstorm. By simply recording down whatever ideas we thought could be potentially good projects for a hackathon, we created a surplus of potential ideas.

Now armed with plently of ideas to choose from, we had to make a very important decision in narrowing them down. Some of the key factors that were considered were: difficulty (technical skill and time restrication), uniqueness, and practicality.

The biggest limiation was, as was likely the case for many groups, the difficulty of a proposed project. Out of the 4 members in the group (all first-year undergraduates), 1 member had distinctly more, yet still limited, coding experience, 2 members had reasonable proficiency in python, with some brief exposure to a few other languages, and the last member entered the year with next to no programming experience, and the extent of their knowledge was through UCI classes. In addition to limited programming experience, this was the first hackathon for 3 of the 4 team members, with the last member having only participated in 1 other hackathon (ZotHacks 2023). Factoring in out very limited skill set, It was a simple yet difficult task to narrow down our project ideas. While some projects were very clearly outside of our capabilities and were easy to eliminate, others seemed very doable until we looked further into it and their true intricacies were revealed.

Uniqueness and practiciality were 2 other factors that were considered in the brainstorm. They were more thought of as preferences since the difficulty restrictions had already eliminated the vast majority of our options. After eliminating some (what we viewed as) rather generic options, we landed on the idea of an outfit chooser. A brief breakdown of the problem made it seem relatively doable within the scope of our knowledge as well as the time given for the hackathon.

Organization/Planning:

After some discussion over dinner on the first day, we had near confirmed the idea of Fithub. The next step that we invested a significant amount of time into was the planning stage.

Given that one of our team members had some amount of real-world experience with programming, he was able to provide insight on how professional projects were structured to maximize efficiency and minimize the confusion when collaborating on code. 3 out of 4 of the team members had minimal experience with the use of git and github for the purpose of collaboration. After a brief lesson by the one member with experience, We were all able to get a grasp of the priniples behind git and how it would be incorporated into our own workflow.

After clarifying the logistics of our work, it was time to distribute the work accross the team. With the 4 members, we decided to break into 2 backend developers and 2 frontend developers. We briefly discussed the languages and frameworks that we were going to use, but decided it would be better to choose something with consideration for the exact logic problem we were going to solve.

The 2 frontend developers settled on the idea of learning React for JavaScript and HTML. With both devs having absolutely no experience with React, they went off to research and learn for the next couple of hours.

The backend developers were not in a hurry to commit to a framework, and instead decided to break down the instricate logic of the problem and given the task we would need to accomplish, what framework would serve us the best. The exact details of how Fithub takes images and combines them will be covered in a later section, but after well thought out reasoning, Python seemed to be the best pick due to our familiarity with the language and its available resources for our given tasks. Thus we also committed to Flask with Python as our framework of choice.

After reconvening as a team, we had a very good idea of the exact tasks that needed to be completed for each part of the project. Each member took an individual part that was meant to be temporarily isolated and later combined, We decided that the project could be structured in a way that allowed for independence yet collaboration. As the inaugural day drew to a close, Fithub development had embarked on a journey of growth that no member would have even anticipated.

Technical Development:

Entering day 2, every member had a very clear idea of exactly what their goals and tasks for the day were. If everything were to go to plan, Fithub development would easily be done wihin the day. However, nothing is ever that easy...

React vs. Svelte vs. Vanilla HTML

The frontend developers immediately ran into problems with the difficult and complexity of React. Given their very basic knowledge of JavaScript, CSS, and HTML, implementation of React was simply too much to manage while still developing a well-put-together frontend. Thus the idea of switching frameworks was considered. The alternatives were Svelte (for simplfiication at the cost of less real-world application) or Vanilla HTML, CSS, and JavaScript (due to more familiarity but less functionality). After considerations, Svelte was the new framework that the frontend would be using.

Backend logic:

The backend logic was mostly concerned with the problem of receiving 2 images, and processing them so that they could be returned as a complete image, with appropriate editing and scaling. The problem was broken down into very detailed segments, each addressed with a cumulative python script. The flow of the problem solving followed the path of:

  • Take find images that are stored in the system (saved by input taken from the webpage)
  • Remove the background of each PNG file (left with clothes on transparent backgrounds)
  • Recording the opacity value of each pixel in the png image and finding the border of the clothing item based on where the pixels were no longer transparent.
  • Measuring distances that would assist with scaling (bottom edge of shirt generally lines up with the top edge of pants for the purpose of fitting)
  • Using these distances, Scale the 2 images of clothing so that they are proportional relative to each other.
  • Create a blank, transparent, PNG that is large enough for both pictures of clothing.
  • Impose both items of clothing onto the blank PNG, but be awakre of the location where items are to be placed.
  • return the completed outfit PNG to the system.

The logic was fairly straightforward to create since it was mostly learning about image manipulation in a language we were mostly familiar with. The other challenges associated with develoing a project like this were more prominent it the other sections. However, the meticulous nature of the logic meant that it still took nearly the entire day to finalize.

Additional backend tasks:

The remainder of backend tasks were given to the other backend developer. While it was less heavily involved in the main logic of the problem, it had its own problems of equal caliber. The main task of the rest of the backend was communication with the frontend. The backend needed to ensure that files were able to be transferred between the frontend and backend, but at the same time manage all the other connections and pathways between functionality. The logical complexity was much different than the main problem, but held equal, if not more, weight due to our unfamiliarity with the necessary skills.

Frontend tasks:

The frontend was primarily tasked with creating the webpage for Fithub. One significant problem served as the connection between the frontend and backend: gathering and storing files as input from the user. Beyond simplay designing the website and the desired features for the user, storing files and data perptually plagued our team throughout the duration of the hackathon. In addition to the unfamiliar languages, the decision to learn new frameworks that would theoretically optimize workflow proved to be a much bigger challenge than initially expected.

Integration:

Our final hurdle that was considered in the initial planning was the integration and interconnectivity of each developer's respective parts. Being able to work on independant task gave us the freedom to structure our problem excatly the way we wanted. However, it led to the problem that information needs to be passed between these structures. The mismatch of languages and framework were detrimental to the ease of this merge, but by the end of day 2, a mostly functional version of Fithub was up and running.

Challenges we ran into

Considering how inexperienced we are as a team in regards to both hackathons and programming as a whole, it is no surprise that we ran into every problem imaginable. From confusing macro-problems to the most obscure details, to fatigue, it seemed like the entire day proved to be a challenge. This section will highlight the significant (programming-related) problems that we ran into as a team.

Frontend:

As a team, we were definitely significantly less fluent on the frontend. The first major problem was the entire React framework. No one on the frontend team had ever worked with any kind of framework, much less React. The complexity of React proved to be too much for us. Early in the second day, we found ourselves at a crossroad: continue to suffer through using React, or pivot to another framework. The options that came to mind were Svelte or Vanilla HTML. The benefit of Svelte was that we would still be able to learn something new about frameworks using a simpler tool, but the tradeoff was that time still needed to be invested into learning it. The appead of vanilla HTML is its simplicity and familiarity. However, its simplicity also creates its limitations in functionality. We were worried about the limitations being much more of a hassle to deal with in the long run. Because of that, Svelte was the new framework of choice for the frontend.

Additional troubles that the frontend ran into were creation of certain website elements or simply manipulating items on that needed to be change. Without thorough HTML experience, it was hard to grapple with the code to get it to do exactly what we wanted it to. A specific scenario was the use of flexbot and grid in CSS to help with componemnt manipulation. It was difficult to predict the exact changes that would be made, and it became a game of trial-and-error which was not only frustrating, but also time-consuming.

Backend:

While the backend never saw a dramatic restructuring like the frontend did, we also ran into our fair share of troubles with backend development. To start with the main logic, the image manipulation involved many python functions and resources that we had no idea of their existence. This meant that we needed to go on a deep dive for every resource that we needed in order to ensure we chose a reasonable solution to go about the problem. In addition to finding the correct resources, the math required to manipulate images was very tedious and had to be meticulously planned out. While the raw calculations were not difficult, we had to consider things that such as avoiding iterating through tremendously large arrays of data which could easily get overlooked with not working with images. Managing these large amounts of data as well as creatively solving seemingly simple operations like measurement added a deveptive degree of complexity to the calculations of image manipulation.

The rest of backend development ran into problems with regards to communication between the frontend and backend. With the frontend using Svelte and the backend using Flask, it required a base amount of technical skill with frameworks and such, more than the majority of the team had. Additionally, the task of connecting the entire project toegether was mostly left up to this part of the backend. Trying to stay locked in late into the second day after the onset of fatigue was a challenge in and of itself. The work distribution saw a heavy shift as most devs were near complete with their secions, while the backend was still far from being able to successfully connect the parts.

Upon reflecting, most of the challenges that we were faced with stem from either a significant lack of experience in programming, or the style of problem solving and working that is required for hackathons.

Accomplishments that we're proud of

We've spent a lot of time highlighting the negatives and struggles that we had with this hackathon. However, there is still a lot of positivity and accomplishment that we as a team can be incredibly proud of. Here is a brief list of a variety of accomplishments in our code:

  • Being able to solve the main problem and in the process, learn about image manipulation with our main language, python
  • Successfully addressed a personal problem with a creative solution that we came up with and developed organically
  • Being able to learn so much new information within a day and a half. (Entire new languages and frameworks, frontend devs had minimal experience with HTML and almost none with CSS, JavaScript, and Svelte)
  • Learning important coding skills like proper use of Github.
  • Learning topics that stary more away from our UCI coursework such as the use of the upload buttons on the website to connect the frontend with the backend.
  • Figuring out how to use the extensive resources present within VSCode or simply available on the internet.

Overall, simplay being able to create a functional product that is reasonably close to what we envision is more than what we could have ever asked for and that in itself is something that we can all be proud of.

What we learned

Throughout the hackathon, we all picked up on many general programming skills, along with an abundance of new technical skills. Some of these learnings include:

  • JavaScript frameworks and how to use them (Learning Svelte, CSS, and JavaScript with very little or no experience at all)
  • How to insert many components with HTML and manipulate them with CSS (including dropdown menus!)
  • Macro skills that can greatly streamline a complex project or intricate problem that needs to be solved
  • How to tackle problems that are seemingly out of reach given our current knowledge

What's next for Fithub?

Due to the time restriction on hackathons, we were very limited in the amount of functionality we were able to implement. The current functioning website is very basic in its use and does not support many things that a properly designed site would use. We hope to keep building upon it, specifically introducing quality of life updates that allow for a smoother user experience. This could include ideas like saving and sharing closets, quick generation, and support for other items besides just shirts and pants. Through the development of Fithub, we discovered the beautiful rabbit hole that are personal projects. Even if this marks the end of Fithub, We hope that it is the spark to bigger, better, grander aspirations.

Share this project:

Updates