Covid-19 has made shopping in person impossible, so trying on shoes is a luxury we no longer have. Although there are shoe sizes, different brands have different lengths and widths for the same size. We decided that having to gamble that a shoe would fit you when it arrived at your house was a problem we could fix, so we created SIZR.
What it does
SIZR uses AR to measure your foot length and width with the easy use of your phone camera. WE DO NOT STORE ANY PICTURES TAKEN! We also ask you if you like your shoes on the large or small side, to make sure you are comfortable and happy! After you have measured your shoe, and told us your preferences, we return you a list of shoes along with your recommended size for that shoe. This shoe is specifically tailored for you, and we used sneaker industry experts to find how each shoe in our database really fits, so you can be sure that you will have a comfortable shoe!
How we built it
SIZR is built on top of our wonderful, and indestructible CockroachDB database. We stored shoe and user data on CockroachDB, using the CockroachDB SQL console to help use monitor and modify tables as needed. CockroachDB was used in conjunction with SQLAlchemy to create a strong, well functioning database.
The backend runs off of Flask. Flask communicates with CockroachDB and the frontend to accept, send, and process requests, as well as generate user recommendations. When generating user recommendations, we take numerous factors into account, such as the dimensions of the user fits, if the user prefers larger or smaller fitting shoes, as well as industry insider information about the shoe. This insures that our match for you will phenomenal fit, both in width and length! The backend was packaged into a Docker container and deployed on Azure for easy access by the frontend.
The frontend of the application uses React as well as SCSS for styling. States within the frontend are managed through react hooks which react enables for the front end to be very light-weight, responsive, and customized through SCSS. Furthermore, the react router dom allows the site to change between pages very quickly for a cleaner feel on navigation. The team used Figma to quickly prototype our designs for the different pages. In designing SIZR, we wanted to achieve a functional and accessible user experience, while ensuring a sleek and modern user interface was implemented. We believe that we were able to accomplish this through our prototypes and our site.
Challenges we ran into
As with every problem solving endeavor, we have our far share of problems. Our first was our most important, how do we measure something with a camera? We explored using OpenCV, but determined that it would not be a good idea, as we would need some sort of reference object. We eventually found WebXR which helped us build a really awesome AR measuring app that could be used from you phone. Testing this we figured out that it was also extremely accurate, to within a few millimetres.
Our other big challenge was connecting the front-end and the back-end. Our whole team are junior developers and first year Systems Design Students at the University of Waterloo. We had to learn most of what we applied here in the last 36 hours, so having to learn all of these new technologies was certainly challenging, but also extremely rewarding.
Accomplishments that we're proud of
We are extremely proud that we managed to get a fully working web app, with a fully functioning front-end and back-end deployed onto the web. It took a lot of work, but we are so proud that we managed to pull it off.
We are also really happy that we were able to learn and use new wonderful technologies, like CockroachDB, Azure, and WebXR. We all love learning, so any opportunity that lets us broaden our developer mind makes us super happy.
What we learned
We learned about the intricacies of deploying a web app. We also learned how difficult it can be to maintain every aspect of a web app, and more importantly hard it can be for all of those aspects to work together. Lastly we got to learn some really great technologies, like CockroachDB and Azure!
What's next for SIZR.
Right now, we are planning on taking a break for a bit. This hackathon has been pretty tiring, and we have worked long and hard hours to build something we are very proud of.
Maybe sometime in the future we will be able to elaborate on our ideas, add different types of shoes like dress shoes and high heels, and perhaps even allow users to purchases said shoes from us.
For now, we are going to relax, and allow ourselves to be proud of our accomplishment.
Lastly, I, the one writing this DevPost, am immensely proud of my teammates. They worked long and hard hours to get a fantastic web app running. It was a pleasure working with them, talking with them and seeing them problem solve. As the great Ali Partovi once said in a Fireside chat at Hack The North 2021, "surround yourself with people smarter then you". I certainly did that! To Shivam, Nicolas, and Joseph, thank you so much for being the best teammates I could ask for.
Try out our site https://code.shivamsh.me/ (only works on mobile)