ToolTinder 2.0

• 

  Example chat page!

• 

  Example of the main menu!

Inspiration

Through boredom of not having much inspiration, and wanting to have another go at a previously botched project, I decided to take up the mantle of making ToolTinder from scratch. This time, I used a PWA approach, which I felt more comfortable making effective GUI and interface in. I decided it would also be a good opportunity to be able to learn React JS to improve my development.

What it does

It's mostly a joke product - a knock off of Tinder designed to help you find the ideal tool through flirty interactions with AI-generated tools. Find a match, get to know them, and see where it goes from there!

How we built it

It took me 24 hours in WebStorm, Photopea and Figma to develop the GUI, graphics and sound effects all by myself. It also took a lot of research and subverting things to be able to get certain features to work.

Challenges we ran into

Initially, the webcam feature wasn't working. After doing some research, I found that react js won't host on external IPs if they do not have a https certificate. I had to spend time learning how to make one of said certificates so I could get the webcam working. In turn, IOS threw a tantrum and made it so I couldn't add the PWA icon - which was very strange. I also kept hitting limits on Gemini, which damaged my progress on debugging slightly.

Accomplishments that we're proud of

How nice and entertaining the graphics came out, it was really fun to get to experiment in a field I always love developing in.

What we learned

How to make PWAs so I can develop web-based applications and cater to my developing strengths.

What's next for ToolTinder 2.0

Maybe funding so I'm slightly less broke

Built With

• css
• figma
• gemini
• javascript
• photopea
• react
• webstorm