Giter Club home page Giter Club logo

safeweb's Introduction

GitHub code size in bytes GitHub issues Languages

Table of Contents

- Introduction 
- Problem it solves
- Tech Stack
- Screengrabs
- Scalability
- Setup Guide
- Contribution Guidelines
- License

๐Ÿ’™ Introduction

SafeWeb is a browser extension that aims to promote healthy computer habits by helping users build the habit of following the 20-20-20 rule. With its customizable settings and user-friendly design, SafeWeb is a great addition to any computer user's toolkit.

๐Ÿ’ก Problem it solves

I developed SafeWeb because I realize the negative effects of prolonged computer use on my vision and overall health. Studies have shown that regularly taking short breaks can reduce the risk of developing computer vision syndrome, which can lead to dry eyes, headaches, and blurred vision. [Reference Study]

However, I found it challenging to remember to take these breaks regularly. That's why I created SafeWeb, a browser extension that displays a friendly reminder after 20 minutes of continuous computer use, encouraging users to take a 20-second break and look at an object 20 feet away. With SafeWeb, I am able to take care of my health while still being productive on my computer.

๐Ÿ“ Tech Stack

JavaScript API - Chrome Extension API

๐Ÿ“ท Screengrabs

Toggle Popup of the Extension Main Tab

๐ŸŒบ Scalability

The project can be scaled to fulfill huge possibilities. The current scalable paths comprise of :

  • Multi-language support: SafeWeb currently supports one language, but adding support for multiple languages could expand its reach to a wider audience, especially those who do not speak the language currently supported.

  • Gamification: Adding game-like features, such as points, badges, and leaderboards, could encourage users to take regular breaks and follow the 20-20-20 rule. This would make the experience more engaging and potentially increase user retention.

  • Analytics: Collecting usage data and analyzing it could provide insights into user behavior and help improve the effectiveness of SafeWeb. This could also be useful for identifying user pain points and improving the user experience.

  • Accessibility features: SafeWeb could be designed with accessibility features, such as text-to-speech and screen reader support, to make it more accessible to users with disabilities.

๐Ÿ”จ Setup Guide

To start with setting up the Local Project Environment:

git clone https://github.com/chinmaychahar/SafeWeb.git

Navigate to chrome://extensions/

Toggle the developer mode on.

Click on 'Load Unpacked'

Select the complete cloned folder and get started.

๐Ÿค Contribution Guidelines

Kindly follow the below guidelines if you wish to contribute to the project:

  1. Fork this repository and clone it
git clone https://github.com/chinmaychahar/SafeWeb.git
  1. Add a reference(remote) to the original repository
git remote add upstream https://github.com/chinmaychahar/SafeWeb.git
  1. Check the remotes for this repository
git remote -v
  1. Always take a pull from the upstream repository to your master branch to keep it at par with the main project(updated repository)
git pull upstream main
  1. Create a new branch
git checkout -b <your_branch_name>
  1. Perfom desired changes to the code base and track your changes
git add .
git status
  1. Commit your changes
git commit -m "Relevant message"
  1. Push the committed changes in your feature branch to your remote repo
git push -u origin <your_branch_name>
  1. To create a pull request, click on compare and pull requests

  2. Add appropriate title and description to your pull request explaining your changes. Click on Create Pull Request

๐Ÿ“œ License

GNU General Public License v3.0

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.