garimasingh128 / profext Goto Github PK

👣 Profile Extension - A profile 🔎 search engine for accessing my all social media profile in one tap.👨‍💻👩‍. This chrome extension let's you track your profiles on any account in a single click.

License: MIT License

HTML 61.13% JavaScript 37.58% Dockerfile 1.29%

social-media-profile profile-search-engine profile-extension chrome-extension tap chrome-store student social-media-profiles javascript html-css

profext's Introduction

👣 Profile Extension

Gitter Channel: https://gitter.im/NWoC2020/Profext

A profile 🔎 search engine for accessing my all social media profile in one tap.👨‍💻👩‍. This chrome extension lets you track your profiles on any account in a single click.

Open Source Contests 👣

Student Code In 2020 👣
OPEN SOURCE CONTEST - STUDENT CODE IN
About Student Code In 💻
Student Code-in is a global program that helps students grow with “OPEN SOURCE”. It is a 2 months long Open-Source initiative that provides you the best platform to improve your skills and abilities by contributing to a vast variety of OPEN SOURCE Projects. In this, all the registered participants would get an exquisite opportunity to interact with the mentors and the Organizing Team.

⭐ Check out the website of Student Code In 2020

NJACK Winter of Code 2020 👣

OPEN SOURCE CONTEST - NWOC'20

About NWOC 💻

NWoC (NJACK Winter of Code) is a program by NJACK (The Official Computer Science Club of IIT Patna) that helps students understand the paradigm of Open Source contribution and gives them real world software development experience.

NOTE: All the contributions to be counted under NWoC should be made to the develop branch.

Mentors

GitHub Usernames	Domain
@garimasingh128	Full Stack + Documentation

📋 Table of Contents

➡️ Vision

➡️ Project Structure

➡️ Tech Stack

➡️ Setup Development Environment

➡️ Development Guidelines

➡️ Learning Resources

➡️ Simple things to keep in mind

➡️ System Requirements

➡️ Contributing

➡️ Owner

👩‍ Vision

Getting all your social media profiles under one button click so that you don't have to manually search and do the hassle of searching your profile handles while making your resume, filling job opportunities forms, registering for events, etc.

❤️ Inspiration

This is motivated by Traversy Media tutorial on Google Chrome Extention.

🤷 Project Structure

.
├── ...
├── images
│── icons, logo and screenshots
│── manifest
│── popup.html
|── popup.js
|── README
└── ...

🔆 Tech Stack

HTML
CSS
JavaScript

🚀 Steps to setup development environment

Clone the repo

git clone github.com/your_username/profext.git

Open the folder in your favorite code editor and start adding modifications.
Load the folder in chrome://extensions/ on chrome (Load unpacked)

💻 Development guidelines

Put all the code in one of the existing files in /src. If you add a new file, make a relevant modification to build.js.
Push all the code to your own branch. Once you are sure it is working, merge it with the dev branch. Let's maintain only the stable and released versions on the master branch.
Write a kick-ass, readable, and clean code.
Load the /build folder in chrome://extensions/ on chrome (Load unpacked)

📝 Learning Resources

Read these articles to get a quick grab on making Chrome extensions:

Resources to learn Git:

🧐 Simple things to keep in mind

The first step is to create a manifest file named manifest.json. This is a metadata file in JSON format that contains properties like your extension’s name, description, version number, and so on. In this file, we tell Chrome what the extension is going to do, and what permissions it requires.
To test if the extension works, visit chrome://extensions in your browser and ensure that the Developer mode checkbox in the top right-hand corner is checked.
Click Load unpacked extension and select the directory in which your extension files live. If the extension is valid, it will be active straight away so you can open a new tab to see your extension.
When your first Chrome extension looks nice and works as it should, it’s time to publish it to the Chrome Store. Simply follow this link to go to your Chrome Web Store dashboard (you’ll be asked to sign in to your Google account if you’re not). Then click the **Add new item** button, accept the terms and you will go to the page where you can upload your extension. Now compress the folder that contains your project and upload that ZIP file.
As a web developer, it’s very easy to create a Chrome extension in a short amount of time. All you need is some HTML, CSS, JavaScript, and basic knowledge of how to add functionality through some of the JavaScript APIs that Chrome exposes. Your initial setup can be published inside the Chrome Web Store within just 20 minutes. Building an extension that’s new, worthwhile or looks nice will take some more time. But it’s all up to you!

💻 System Requirements

Google Chrome
Git
Code Editor (Visual Studio Code, Sublime Text)

🏆 Contributing

Please read CONTRIBUTING.md for information on how to contribute to profext-extension.

💼 Code of Conduct

We want to facilitate a healthy and constructive community behavior by adopting and enforcing our code of conduct.

Please adhere towards our code-of-conduct.md.

👬 Owner


Garima Singh

Need help? Feel free to contact me @ [email protected]

Like This?? Star ⭐ this Repo.

Made By Garima Singh with ❤️

Garima Singh © 2020

❤️ Thanks to our awesome contributors.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_{Navpreet Kaur}
📖

_{Sundaram Dubey}
💻

_oshinsaini
📖

This project follows the all-contributors specification. Contributions of any kind welcome!

profext's People

Contributors

Stargazers

Watchers

profext's Issues

Create popup.js to add links to social media icons and Event listeners.

Complete popup.js to have a dynamic popup.

Link doesn't work (Code of Conduct.md and Contributing.md) In your Readme.md . Both the markdown file under Guideline folder . The link should be like this https://github.com/garimasingh128/profext/tree/master/Guidelines/

Add a bot to moderate the issue request and the feature request

Is your feature request related to a problem? Please describe.
This bot would help a first time contributor so that that contributor can follow this project's contribution guidelines.We can link our issue template, pull request template and code of conduct here.It will contain newIssue Welcome comment, newPR Welcome comment, firstPR welcome comment,etc.

We can use a GitHub App built with probot that welcomes new users when they open their first issue. You can use this welcome message to provide links to resources like the contributing guidelines, code of conduct, etc. It should be located in a .github/config.yml

Demo 1

Demo 2

Make the layout of popup.html as the design

Is your feature request related to a problem? Please describe.
Make the layout of popup.html as the design.

Describe the solution you'd like
The design folder is present in the root of the master branch. It has all the assets and inspirational designs.

Describe alternatives you've considered
You can add your own insights but don't modify it considerably.

Additional context
No

Create edit.html.

A form design which takes values from users for names and social media links.
A save button at the bottom with href to popup.html
The design should be as similar to popup.html as possible.

Edit popup.html to be dynamic.

Currently, popup.html has the links hardcoded.

Create an edit button.
Redirect to edit.html after clicking the button.
Remove existing hrefs in the accounts icons.

Adding more social media icons and corrections.

Add social media icons for the following:

Blog website
Medium
Bitbucket

Correct the color pallette of existing and new icons. For example: For Github use black and white icon instead of the already present green one.

{Question} About the functionality

How it is different than simple bookmarking? That is also one-click access to social media accounts.

Create edit.js file.

Add Input Form for users to easily update the links

Assign variables to name and social media links.
Assign values to these variables.
A save button which calls a function to update the links.

Modularisation of the whole project.

Put all JS Files and images in a directory and update the README as per the changes.

Make templates for Code of conduct, contributing and PR template.

Name them as following:

CODE_OF_CONDUCT.md
CONTRIBUTING.md
PULL_REQUEST_TEMPLATE.md

Add pull request template

Describe the solution you'd like
To ease the work of maintainer, add some checkbox in the PR request template so that a person creates pr after complying with organisations rules.

Additional context
Add any other context or screenshots about the feature request here.
It could look something like this:

-Have you followed the Contribution guide?
-Have you made corresponding changes to the documentation?
-Your submission doesn't break any existing feature.

Make the layout of spash_screen.html as the design

Is your feature request related to a problem? Please describe.
Make the layout of splash_screen.html as the design.

Describe the solution you'd like
The design folder is present in the root of the master branch. It has all the assets and inspirational designs.
The name is splash.png Use that. The html file is still not created. So, create that in the root of the project.

Describe alternatives you've considered
You can add your own insights but don't modify it considerably.

Additional context
No

We need a good design for the popup with good color combinations.

Try making a design for the existing HTML files in Figma or Adobe XD. You can also add some new features if you have any ideas. Make sure to use good color combinations.

Multiple people can be assigned to this. The best design would be chosen.

A splash screen can be added to improve the first user experience with the app.

Create a design for the splash screen and add it to the extension.

hosting

@garimasingh128 you don't have host the project so pls host it without hosting we able to see the how it looks like

Social Media Profile Launcher - Traversy Media

Hey,

Isn't it the extended version of Traversy Media's Social Media Profile Launcher?

I have also built one which can be found here: https://github.com/AnjaliSharma1234/SocialMediaProfileLauncher

You should give proper credits to the original owner.

Change in the edit.html file so that we can keep track of which field is going to be changed

Is your feature request related to a problem? Please describe.
As we can see in the screenshot attached there is difficulty for the user in keep tracking of which field in the form is going to be edited as the name of field and editing panel are bit too far.

Describe the solution you'd like
There must some kind of highlight in the name field when the user clicks on the input field.

Describe alternatives you've considered
Or else We can simply use placeholders to keep track of name and input field.
Additional context
Add any other context or screenshots about the feature request here.

Adding dark mode UI

Is your feature request related to a problem? Please describe.
No problem.

Describe the solution you'd like
Adding a dark mode button toggle would help a website look better according to user's choice.

Describe alternatives you've considered
Using different themes toggle.

Additional context
Can I work on this issue.

Contributors Image In Readme

I think it is a great feature to add contributors image in README file. It really motivate to contributors. It is dynamically order the contributors.

If you want to this feature on README so I want to do this issue @garimasingh128 !! 😄

Make the layout of edit.html as the design.

Is your feature request related to a problem? Please describe.
Make the layout of edit.html as the design.

Describe the solution you'd like
The design folder is present in the root of the master branch. It has all the assets and inspirational designs.
The name is form.png Use that

Describe alternatives you've considered
You can add your own insights but don't modify it considerably.

Additional context
No

Update README.md for the following changes.

Add the following to the README.md file:
Table of Contents

Goal
Current Progress
Installation
Usage
System Requirements
Learning Resources

Add some fun GIFs' wherever necessary to make it interesting.

Describe alternatives you've considered
There is no any alternatives for this issue.
Additional context
Fixing this issue helps every Bitbucket users to go to their profile easily.

garimasingh128 / profext Goto Github PK

profext's Introduction

👣 Profile Extension

Open Source Contests 👣

Student Code In 2020 👣

About Student Code In 💻

NJACK Winter of Code 2020 👣

About NWOC 💻

Mentors

📋 Table of Contents

👩‍ Vision

❤️ Inspiration

🤷 Project Structure

🔆 Tech Stack

🚀 Steps to setup development environment

💻 Development guidelines

📝 Learning Resources

🧐 Simple things to keep in mind

💻 System Requirements

🏆 Contributing

💼 Code of Conduct

👬 Owner

Like This?? Star ⭐ this Repo.

❤️ Thanks to our awesome contributors.

Contributors ✨

profext's People

Contributors

Stargazers

Watchers

Forkers

profext's Issues

Demo 1

Demo 2

Recommend Projects

Recommend Topics

Recommend Org