IP Man

IP Man: Giver of IP, Drinker of Soylent
Website

Inspiration

I had been having trouble connecting my laptop's VPN to my phone's hotspot. The process of troubleshooting involved going to sites where I could find my IP and corresponding location so I could make sure my IP was hidden. These sites were often extremely boring with one-color UIs, uninspired logos, and too much boring text. That's why I have created IP Man, a website to make finding your IP just a little more exciting. Just like the movie, IP Man's competitive nature adds a sense of excitement and intensity. Now, ensuring internet privacy is fun!

What it does

When the website is accessed, your IP is presented between two, more high profile elements to prevent eavesdropping from others. Relaxing music plays in the background to ease IP frustration and make the entire process entertaining. While you wait for your VPN to reconnect, you can watch the code and visualization of the most efficient sorting algorithm. Going to the website also earns points for your location, which are shown on the leader board. Can your city make it to the top?

How I built it

I used Python and Flask for the backend, mainly to handle MongoDB Atlas data. The Flask server then renders the website, which has an embedded YouTube video and internet speed test widget. JavaScript was used for the code typing animation and W3.CSS was used for formatting the table. I also used Google Fonts because no text editor uses Times New Roman (I hope). The website is hosted on Heroku with a custom domain from Domain.com.

Challenges I ran into

The biggest challenge I faced was working on the frontend. In previous hackathons, I have mostly worked on backend. Deployment also took a lot of time, and I had a few hiccups with the typing animation for the code/title.

Accomplishments that I'm proud of

This is the first hackathon I've worked on completely independently! This is also the first time I've used iMovie for editing a long video (took so long lol).

What I learned

I learned how to link Flask/Heroku apps with a custom domain, how to use a Google Font, how to edit video on iMovie, and a lot of CSS things but prob not enough.