RoastBlocker

Inspiration

Mobile apps have various ways of blocking distracting apps, like Instagram, Facebook, TikTok, and more. Our team wanted to explore how to block these app’s websites since students are still able to access them on a computer if they block their mobile apps.

What it does

This is a chrome extension that allows a student to select websites that they want to block and then select a time for how long the website is supposed to be blocked for. A fun feature included is when a person tries to access the website while it is blocked it will show a page where it would motivate the student to get back to studying.

How we built it

We brainstormed the sites that were most popular and selected those sites to be the sites that we would block in the extension. We asked Gemini AI and Open AI to help us figure out how to start with this project and how we would create a chrome extension. We then split the work within our group. One person worked on designing the website with Canva and worked on how the pages would look when a student goes on a site that is blocked. They also designed how the timer would look. One person got some help with AI to start building code to create the chrome extension and then debugged any issues. They edited the Json and CSS code so that we can get to work with our design and idea of how the website should work. One person worked on coding in HTML to get our design from Canva to correspond to our extension. They had to edit it so that the website would look as close to our design on Canva as possible.

Challenges we ran into

A challenge we experienced was setting up the project so that VSCode works and Github works for our group since one person in the group hasn’t done a Hackathon before, so getting started was a bit of a challenge. We also experienced difficulty in debugging/editing AI code to the idea that we had for the extension. Lastly a challenge we had was merging the frontend and backend code with the design of how the extension should look so we would have to edit some of the buttons to connect to pages that we created.

Accomplishments that we're proud of

We are proud of how far we were able to build this project in a 24 hour period. We are also proud of being able to learn how to connect the frontend and backend files from teammates into GitHub from VSCode.

What we learned

We learned how to work with each other by doing each component based on our strengths. We also learned how to connect multiple html, css, javascript, and json files together.