In recent years, Online Scams have been increasing exponentially. The main victims of these scams are people with a limited technical background. We wanted to introduce a product to protect these users from potential scams by warning them early about fake websites and protecting their data.

What it does

Shakedown is a Chrome Extension that sits hidden on your browser unless you visit a potential phish website. Upon visiting, it uses state-of-art Image processing using JavaScript to find whether the link refers to a real website or not. If the website is real, Shakedown ignores it but if it is fake, Shakedown will show a pop-up to warn you.

Further, Shakedown can be configured to send an email/text message to a guardian to make sure that their loved ones are not being targeted by these scams.

How we built it

We started with a website initially, but then realized a Chrome extension was the correct path. The website is built using a modern NextJS/Chakra frontend (with NextAuth as an auth provider) and the chrome extension is pure Javascript. We explored a lot of options to compare images, but settled on a node-canvas based solution to identify the most similar ones quickly, and we use Puppeteer to take the images themselves.

We used Twilio's API to send text messages to the guardian many times throughout the project.

The backend is deployed on a Digital Ocean droplet behind an Nginx reverse proxy, while the frontend is deployed on Vercel. We also made sure to have a very clear design from the start, building an entire UX flow out on Figma before writing a single line of code.

Challenges we ran into

Coming from different backgrounds and different skill levels, we had a lot of challenges figuring out what each other will be doing. Also, taking a product from an idea to design to coding to actually having it working was a challenging task. It was more challenging because we were planning on making a chrome extension but none of us had built an extension before the hackathon. Further, some of us had never worked with Web Development prior to this hackathon.

Accomplishments that we're proud of

In a span of 24 hours, We went from not knowing how to build a Chrome Extension to building a working extension. We collaborated extensively to share out skillset and went through multiple online tutorials to learn things that we were missing. We learned to keep our code up-to-date in source control(Github) to make sure we were collaborating with each other efficiently. This helped us bring our extension together.

What we learned

Attending an online hackathon and finding a team member who resonates with you was very hard. However, we made sure to communicate a lot and find what skills we all had and what we could work on. We learned that designing the UI and UX Flow for any website as the first stage of development is crucial in keeping the project flowing smoothly. We met frequently to discuss expectations and worked in a team to bring Shakedown together. Through this hackathon, we learned how crucial working in a team is and how different skillset in a team makes it complete.

What's next for Shakedown

Shakedown will be launched into Google Chrome Web Store shortly and will help people save their loved ones from being scammed. Further, more websites can be included in our database to make sure they get flagged. We can also utilize Machine Learning to learn to distinguish between real and fake links and increase our accuracy of finding fake websites.

Built With

+ 17 more
Share this project: