desyed / breakfree

Your online tool to help you with your social media addiction! 🪴

BreakFree 🪴

Your awesome tool to help you to break free from the shackles of social media addiction!

Introduction 👋

BreakFree is an application designed to address the growing concern of excessive social media consumption that impacts mental health, productivity, and overall well-being. With over 4 billion people worldwide spending an average of 2.5 hours daily on social media, it's time to take control of our digital lives. BreakFree empowers users to manage their social media usage, providing tools to set timers, track behavior, and focus on more productive tasks.

The Problem 🥵

The proliferation of social media has led to significant time spent online, causing mental health issues, reduced attention spans, and impaired work ethics. BreakFree recognizes this challenge and aims to help users regain control over their online habits.

The Solution ✨

BreakFree offers a comprehensive solution to combat excessive social media usage:

• Timer-based Approach: Users can set timers for specific social media applications and websites. Once the timer expires, access to those sites is blocked, encouraging responsible usage.

• Behavior Analysis: BreakFree tracks and analyzes users' time spent on various websites. Detailed analytics provide insights into daily and overall usage patterns, enabling users to make informed decisions.

App Walkthrough 🚶🏻

Onboarding:

1. Install the BreakFree extension.
2. Sign in with your email or Google account.

Creating Timers:

1. Select a website to set a timer for.
2. Define the duration of the timer.
3. The extension will automatically activate the timer when the selected website is visited.

Analytics Section:

• Visit the BreakFree website's analytics section to review progress with social media usage.

How BreakFree Helps 🤔

Social media addiction often stems from unchecked habits. BreakFree addresses this by:

• Empowering Control: Daily timers help users restrict time spent on social media, preventing impulsive usage.

• Behavior Insights: Analytics shed light on time spent across different websites, aiding users in understanding and curbing their digital habits.

Technologies Used ⚒️

• Frontend: ReactJS and TailwindCSS.
• Backend: Grafbase for GraphQL.
• User Authentication: Auth0.

Steps to run locally

To install the extension

• The extension is in the folder extension
• Go to Chrome browser
• Open Manage extensions
• Switch on the developer mode
• Click on Load unpacked
• Select the folder extension from this repo

To run the client app

• Go to client directory cd client
• Install dependencies npm i
• Run the app npm run dev