Tawazun

• 

  Tawazun in the chrome extension manager

• 

  Top of Tawazun configuration settings

• 

  Middle of Tawazun configuration settings

• 

  Bottom of Tawazun configuration settings

• 

  Extension configuration pop up settings

• 

  Example of a hadith provided

• 

  Example of a mediated post

• 

  Beginning of hadith.json, our database that holds 200+ hadiths in Arabic and English

• 

  manifest.json, used to explain to Chrome how our extension works and how it should use it

Inspiration

Our inspiration was a close friend of ours. Whenever we met at gatherings and events he was glued to his phone using social media. Even if we went to his house he would just be on his laptop and it made things awkward and made us realize how big a problem screen time usage in teens, especially Muslims. This wasn't even the biggest thing we saw in him, he was very disconnected with Islam. This made us wonder if we could somehow incorporate Islam into social media and everyday browsing while also trying to help mediate screen time usage.

What it does

Our Chrome extension works as a moderation tool and a reminder. It is able to give specifically chosen Hadiths based on what website you are on. For example, if you are on a website used for entertainment, our extension would give a reminder with a Hadith related to the website you are on. Another feature our extension has is being able to help you reflect before responding to a posts if it is harmful in any way. For example, if you were to say hateful things on X, our extension would flag it and stop you from posting. Then it would provide the reason for why it was flagged. It also gives you a revised and appropriate response with a related Hadith.

How we built it

We build this using React, vite, and Tailwind CSS with VS Code being our IDE. We used ChatGPT and other OpenAI tools in moderation, only using it mainly for UI and Frontend development. We mostly coded the entire Backend and functionality of the extension manually. We also used Open Source API's like the AlAdhan API for calculating Prayer times based on Location.

So What

Adolescence is when lifelong habits are formed. While research shows that screen time alone doesn't fully explain outcomes, the quality of online interactions and digital habits does matter. Tawazun helps Muslim youth build healthier habits by encouraging moments of reflection before they browse or post, promoting intentional online behavior that can last well into adulthood.

Challenges we ran into

One Major Challenge was sourcing our Hadiths. We wanted to make sure these Hadiths were trustworthy and also appropriate for people trying to improve themselves and their Deen. We also had to confirm that we had hadiths that related to every major category that you could view on the internet (Ex: Shopping, Entertainment, Gaming, ect...).

Accomplishments that we're proud of

We were proud of being able to create a Chrome extension under the 24-hour period with zero experience in extension making. Two features that really make us wonder how we did it are the Hadith pop-up feature that is related to what you are doing. The other feature is being able to stop and help you reconsider and revise posts.

What we learned

We learned how to make a Chrome extension from scratch and using a unfamiliar coding language which is Tailwind CSS despite normally using React for styling.

What's next for Tawazun

We want to expand this into a Mobile app and possibly a complete OS app. We want it to be more refined by making it easier and more straightforward for parents and youth combined.

Built With

• github
• openai
• react
• vite
• vscode