codeuino/codebadge-backend

codebadge-backend's Issues

Document CodeBadge Features

What you will need to know?

Communication & Presentation Skills - Beginner level

Document CodeBadge Features

CodeBadge will be a newly created platform to Codeuino and all of its features and setup instructions need to be documented well in order to facilitate the usability. You'll need to follow up with other contributors/maintainers of CodeBadge as well as thoroughly go through the complete code base and document everything in Markdown format under 'CodeBadge Docs' section(a new section that'll be created by you) on Codeuino Docs.

Requirements

• Communication & Presentation Skills - Beginner level

Steps to Follow

• Claim this issue: Comment below. If someone else has claimed it, ask if they've opened a pull request already and if they're stuck -- maybe you can help them solve a problem or move it along!
• Install CodeBadge on your system go through readme.md in development branch for this purpose
• After installing CodeBadge install dependencies of backend and frontend, go through readme.md inside both the folders
  Link to readme https://github.com/codeuino/Codebadge/blob/master/README.md
• To run the project follow the given step in readme.md for both frontend and backend.
• Checkout to a different feature branch in git and start with the coding part.
• Make sure to commit your work daily and create a single PR for all your commits, per feature.

Acceptance Criteria

• Code is short, clean and properly indented.
• Unused code/comments/variables should not be lying in the code unnecessarily exploiting memory.
• Minimal number of re-iterations in order to improve efficiency and keep the commit history clean.
• Best practices should be used in case of multiple approaches, mentors are always there to help you for this 👍

Rejection Criteria

• Not following/Violating Code of Conduct can lead to rejection.
• Coding etiquettes must be taken care of, for eg, always committing code in a different feature branch, same PR is edited in case of re-iteration of code, etc.

Expected Outcome

An Admin Dashboard tab inside CodeBadge platform which won't be visible to general members/contributors of the community but only to org admin(s), showing various kind of analytics as to how the organization is performing/growing as well as features to create/edit 'CodeBadges'.

How to excel fast in the community?

• Share the issues you encounter along the way and help others solve theirs.
• Chime in below in a comment to cooperate with others who are also working on this task.
• Report back at the above issue once you succeed, to encourage others and share what worked for you!

Resources & References (Where to Start)

You'll need to go through the docs of Markdown CheatSheet and push your code to this repository to be able to see it at Codeuino Docs.

Extras

Just follow the readme whenever you are stuck . Visit Codeuino's Website in case of any doubts.

Add Reconition for transparancy in upload page

If you upload a picture like a Icon that has transparency around the image it will not see it and replace it with white. It would be a good idea to add support that if a area is transparent it will be transparent after upload.

Add more Special Badges

What you will need to know

• Art Design, JSON and some understanding of how the current badge assignment system works.
• HTML, CSS and JS.

Add more Special Badges

As of now, Codebadge has 2 types of badges that can be assigned to a user. A predefined badge and special badge.
A special badge is assigned to an exclusive contributor/group of contributors., it depicts some special achievement they've made in their respective organization.. Examples of special badges are "Top Contributor", "Top Contributor this Week", "Top Contributor this Month", "Top Contributor of this Year", and so on.

Following #33 we can now add badges to CodeBadge. Currently we only have 4 special badges.
This task would require you add more special badges.

Requirements

• A brief idea of JSON and how Codebadge assigns predefined badges.
• Experience with JS.

Steps to Follow

• Claim this issue: Comment below. If someone else has claimed it, ask if they've opened a pull request already and if they're stuck -- maybe you can help them solve a problem or move it along!
• Install CodeBadge on your system go through readme.md in development branch for this purpose.
• Checkout to a different feature branch in git and add your edits.
  Make sure to commit your work daily and create a single PR for all your commits, per feature.

Acceptance Criteria

Code is short, clean and properly indented.
The Best practices should be used in case of multiple approaches, mentors are always there to help you for this 👍

Rejection Criteria

Not following/Violating Code of Conduct can lead to rejection.
Coding etiquettes must be taken care of, for eg, always committing code in a different feature branch, same PR is edited in case of re-iteration of code, etc.

Expected Outcome

Atleast one functional and useful special badge added.

How to excel fast in the community?

Share the issues you encounter along the way and help others solve theirs.
Chime in below in a comment to cooperate with others who are also working on this task.
Report back at the above issue once you succeed, to encourage others and share what worked for you!

Resources & References (Where to Start)

Head over to badges.json and specialBadges.js and see how the special badges are defined.

Extras

Just follow the readme whenever you are stuck . Visit Codeuino's Website in case of any doubts.

Add shape tool to codebadge project

What you will need to know?

HTML, CSS and JavaScript

Add shape tool to codebadge project

You need to add a shape tool to out codebadge illustrator. If the task of integration of HTML Canvas is completed, you can work on this task.

Expected Outcome

At the route /newbadge, the shape tool must be added which can be available for various colour fills.
Shapes expected:-

1. rectangle
2. eclipse
3. round corner rectangles.

Step by step

• Setup Codebadge project by following installation steps in the readme.
• Check if canvas task is completed or not. If not first proceed with canvas task.
• Once canvas task is done you can proceed with this task.
• You need to draw shapes on click. You can use vanilla javascript or p5.js for doing this.
• You need to take input of width and height for rectangle and eclipse.
• width and height shall work at on change event rather than load.

Resources & References (Where to Start)

You can go through HTML Canvas tutorial and edit its code. You can refer this website for sample The Marauders Canvas. Commit your code on Codebadge development branch.You can go through HTML Canvas tutorial and edit its code. Refer this for the sample code.

Extras

Just follow the readme whenever you are stuck. Visit Codeuino's Website in case of any doubts.

Brainstorming ideas for Front End and structure of the project

Points finalized for now
1)Login Signup form for org maintainers.
2)Dashboard with the name of the contributors and color of their badge and also the following details written above in the idea.
3)A notification board (a link will be provided on the dashboard) that will update every week and will save the contributor’s name whose badge is faded.
4)The name selected from the notification board will open an email dashboard panel where admin can select the predefined email template for asking the contributor. We can use MailChimp to create email templates which can be later on exported as HTML and CSS for further use in our app.
5)We can have cards dedicated to each contributor. Upon clicking on the card, further details like their contribution history and period of inactivity (leading to fading of cards) will appear.

Integrate HTML canvas for illustrator environment

What you will need to know?

Basics of HTML Canvas, CSS.

Integrate HTML canvas for illustrator environment

Create a new route in codebadge project for new badge creation. The route shall be directed to a new page which shall have an HTML Canvas integrated where the user can create their badges. This canvas must be centrally aligned and must be white.

Steps by step

• install codebadge project. by following steps:-

1. clone the repository
2. in the folder, run npm install to set up the repository and then npm run serve to run the code,

• once you have installed, create a new view in the view folder with name newBadge
• create a new file newBadge.vue.
• integrate canvas. To will need to add script tag and change dom properties of canvas such as context, height and width.

Expected Outcome

The route /newBadge shall be made and must have an HTML canvas integrated. for example, you can see the screenshot provided in the GitHub issue above.

Resources & References (Where to Start)

You can go through HTML Canvas tutorial and edit its code. You can refer this website for sample The Marauders Canvas. Commit your code on Codebadge development branch. Refer sample drawing app made in simple HTML, css and javascript for help.

Extras

Just follow the readme whenever you are stuck. Visit Codeuino's Website in case of any doubts.

Add eraser tool to codebadge project

What you will need to know?

HTML, CSS and JavaScript

Add eraser tool to codebadge project

If the task of integration of HTML Canvas and pencil tool are completed, you can work on this task.

Expected Outcome

At the route /newBadge, the eraser tool must be added and should be available for various thickness.

Resources & References (Where to Start)

You can go through HTML Canvas tutorial and edit its code. You can refer this website for sample The Marauders Canvas. Commit your code on Codebadge development branch.You can go through HTML Canvas tutorial and edit its code.

Extras

Just follow the readme whenever you are stuck. Visit Codeuino's Slack Channel in case of any doubts.

Update Readme

Description of the problem

There is no described Readme for this project for now

How to solve

Please write a described readme like the DONUT project

Expected Outcome

An explained readme so that user can know how to set up the project

Assigning this issue to @sarthak77

Illustrator for Codebadge

Problem

I was working on OpenCV and fortunately, I got an idea that how this project can be restarted. here are some initials what I tried to do:-

I traced the outlines of this sticker using OpenCV which created an image which is like a sketch of the sticker. I tried it on various stickers and it works well for almost all.
The biggest issue due to which the project halted was how we will provide the user with the template and let the user edit it.

Solution

Creating an Illustrator which will provide the facility to both create a new badge from scratch, upload an image of a sticker which he might have even draw on a plain sheet of paper(as done in the above image) or use pre-used sketches or templates which were created. He can edit his/her badge as per his colour requirement and get it downloaded as an image or PSD or pdf.

Requirements

Machine Learning using Python, Image processing, Javascript, Html Canvas

Making a colour pick tool

I was working with images in python when I decided to make a colour detection tool. This would help a user know all the colours associated with the image. So I was thinking if I could incorporate this idea in the current project that the organization is working in. ( I have shared the screenshot of the tool I had made. )

Add pencil tool to codebadge project

What you will need to know?

HTML, CSS and JavaScript

Add pencil tool to codebadge project

If the task of integration of HTML Canvas is completed, you can work on this task.

Expected Outcome

At the route /newBadge, the pencil tool must be added which can be available for various colours and various thickness. For sample, outcome visits the marauder's canvas mentioned in the resources.

Resources & References (Where to Start)

You can go through HTML Canvas tutorial and edit its code. You can refer this website for sample The Marauders Canvas. Commit your code on Codebadge development branch.You can go through HTML Canvas tutorial and edit its code.

Extras

Just follow the readme whenever you are stuck. Visit Codeuino's Slack Channel in case of any doubts.

Add new templates for Codebadge

🤔 What you will need to know

Nothing. This issue is meant to welcome you to Open Source :) We are happy to walk you through the process.

Add template designs for Codebadge illustrator

Presently the codebadge project is in the development phase. In this project, we are providing users to create badges to be awarded to the contributors on there work for the organization. we are going to design our own illustrator so that organisation can design badges as per there requirement. We need some template issues to be added so that we can make the user experience with the software better. You can contribute to this project by adding some template designs via image upload either of the existing badge or hand-drawn on a plain white sheet of paper.

Requirements

• Designing skills

Step By Step 🔢

• 🙋‍♀️ Claim this issue: Comment below. If someone else has claimed it, ask if they've opened a pull request already and if they're stuck -- maybe you can help them solve a problem or move it along!
• 📝 Install CodeBadge on your system go through readme.md in development branch for this purpose
• After installing CodeBadge install dependencies of backend and frontend, go through readme.md inside both the folders
  Link to readme https://github.com/codeuino/Codebadge/blob/master/README.md
• To run the project follow the given step in readme.md for both frontend and backend.
• Look for samples in the template folder.
• Draw a badge on a plain white sheet of paper(not ruled).
• Get the design verified by the mentors.
• If the design is verified go to upload section in the navbar after login
• Select the image you want to upload as a template
• Give the template a name
• Upload the template.

Acceptance Criteria smile

• Badge must is not of same design already present in templates.
• Must be relevant to some technology.
• Must not already be used by any other organisation/company.

Rejection Criteria

If the given template is repeated. But not to worry some mentor will help you in getting this feature implemented. +1.
Caution:- If the design of two participants are found to be copied they both will be reported and will be disqualified from the task.

Expected Outcome

Learning some basic Designing skills of Adobe Photoshop.

🤝 Share the issues you encounter along the way and help others solve theirs.
💬 Chime in below in a comment to cooperate with others who are also working on this task.

✋ Report back at the above issue once you succeed, to encourage others and share what worked for you!

Resources & References (Where to Start)

You can refer pinterest for more design ideas.

Extras

Just follow the readme whenever you are stuck goto
https://codeuino.slack.com/ to ask your doubts.

Create a new logo for codebadge project

🤔 What you will need to know

Nothing. This issue is meant to welcome you to Open Source :) We are happy to walk you through the process.

Create a new logo for codebadge project

Presently the codebadge project is in the development phase. In this project, we are providing users to create badges to be awarded to the contributors on there work for the organization. we are going to design our own illustrator so that organisation can design badges as per there requirement. We need to an awesome logo for this project. Design a logo as per the project idea and it also suits the organization and project goal.
Use Adobe photoshop as our illustrator project is still under development phase.

Requirements

• Designing skills

Step By Step 🔢

• 🙋‍♀️ Claim this issue: Comment below. If someone else has claimed it, ask if they've opened a pull request already and if they're stuck -- maybe you can help them solve a problem or move it along!
• 📝 Install CodeBadge on your system go through readme.md in development branch for this purpose
• After installing CodeBadge install dependencies of backend and frontend, go through readme.md inside both the folders
  Link to readme https://github.com/codeuino/Codebadge/blob/master/README.md
• To run the project follow the given step in readme.md for both frontend and backend.
• Look for samples in the template folder.
• Draw a logo and export it as jpg/png/SVG/PSD.
• Get the design verified by the mentors.
• Improve as per mentor's guidance.

Acceptance Criteria smile

• Badge must is not of same design already present in templates.
• Must be relevant to some technology.
• Must not already be used by any other organisation/company.

Rejection Criteria

If the given template is repeated. But not to worry some mentor will help you in getting this feature implemented. +1.
Caution:- If the design of two participants are found to be copied they both will be reported and will be disqualified from the task.

Expected Outcome

Learning some basic Designing skills of Adobe Photoshop.

🤝 Share the issues you encounter along the way and help others solve theirs.
💬 Chime in below in a comment to cooperate with others who are also working on this task.

✋ Report back at the above issue once you succeed, to encourage others and share what worked for you!

Resources & References (Where to Start)

You can refer pinterest for more design ideas.

Extras

Just follow the readme whenever you are stuck goto
https://codeuino.slack.com/ to ask your doubts.

Add more predefined badges

What you will need to know

Art Design, JSON and some understanding of how the current badge assignment system works.

Add more Predefined Badges

As of now, Codebadge has 2 types of badges that can be assigned to a user. A predefined badge and special badge.
A predefined badge is assigned to everyone, it depicts the progress they've made with their respective organizations based on the their commit history. Examples of predefined badges are "Baby Steps", "Beginner", "Intermediate", "Expert", and so on.

Following #33 we can now add badges to CodeBadge. Currently we only have 1 predefined badge, which is a default placeholder.
This task would require you to modify the current placeholder and add more predefined badges.

Requirements

A brief idea of JSON and how Codebadge assigns predefined badges.

Steps to Follow

• Claim this issue: Comment below. If someone else has claimed it, ask if they've opened a pull request already and if they're stuck -- maybe you can help them solve a problem or move it along!
• Install CodeBadge on your system go through readme.md in development branch for this purpose.
• Checkout to a different feature branch in git and add your JSON edits.
  Make sure to commit your work daily and create a single PR for all your commits, per feature.

Acceptance Criteria

Code is short, clean and properly indented.
The Best practices should be used in case of multiple approaches, mentors are always there to help you for this 👍

Rejection Criteria

Not following/Violating Code of Conduct can lead to rejection.
Coding etiquettes must be taken care of, for eg, always committing code in a different feature branch, same PR is edited in case of re-iteration of code, etc.

Expected Outcome

Atleast 2 badges added which are suitable for the progress they depict.

How to excel fast in the community?

Share the issues you encounter along the way and help others solve theirs.
Chime in below in a comment to cooperate with others who are also working on this task.
Report back at the above issue once you succeed, to encourage others and share what worked for you!

Resources & References (Where to Start)

Head over to badges.json and see how the predefined badges are made.

Extras

Just follow the readme whenever you are stuck . Visit Codeuino's Website in case of any doubts.

Add padding feature to pencil and shape tool to codebadge project

What you will need to know?

HTML, CSS and JavaScript

Add padding feature to pencil and shape tool to codebadge project

You need to add a padding feature to pencil and shape tool to our codebadge illustrator. If the task of integration of shape and pencil tool task is completed, you can work on this task.

Step by step

• Setup Codebadge project by following installation steps in the readme.
• Check if canvas task is completed or not. If not first proceed with canvas task.
• Once mentioned task is done you can proceed with this task.
• You need to draw shapes with padding on click. You can use vanilla javascript or p5.js for doing this.
• You need to take input of padding from the user.
• padding shall work at onchange event rather than load.

Expected Outcome

At the route /newbadge, the padding with shape and pencil tool must be added which can be available for various colour fills with user input padding.

Resources & References (Where to Start)

You can go through HTML Canvas tutorial and edit its code. You can refer this website for sample The Marauders Canvas. Commit your code on Codebadge development branch.You can go through HTML Canvas tutorial and edit its code. Refer this for the sample code.

Extras

Just follow the readme whenever you are stuck. Visit Codeuino's Website in case of any doubts.

User Authentication via GitHub

What you will need to know?

Javascript - Beginner to Intermediate level (How to use requests and response using AJAX/Fetch asynchronously)

Authenticate users via their GitHub Account login

Any user to the CodeBadge platform should be able to login/signup via his/her GitHub account directly. This shall be the only method to log in the user since we need to track user's GitHub stats anyways. You'll need to create a single page for signup/login which will redirect to Github's API and ask for user's access via his GitHub account and authorize CodeBadge as an OAuth app linked to his GitHub account.

Requirements

• HTML, CSS, Javascript - Beginner/Intermediate level

Steps to Follow

• Claim this issue: Comment below. If someone else has claimed it, ask if they've opened a pull request already and if they're stuck -- maybe you can help them solve a problem or move it along!
• Install CodeBadge on your system go through readme.md in development branch for this purpose
• After installing CodeBadge install dependencies of backend and frontend, go through readme.md inside both the folders
  Link to readme https://github.com/codeuino/Codebadge/blob/master/README.md
• To run the project follow the given step in readme.md for both frontend and backend.
• Checkout to a different feature branch in git and start with the coding part.
• Make sure to commit your work daily and create a single PR for all your commits, per feature.

Acceptance Criteria

• Code is short, clean and properly indented.
• Unused code/comments/variables should not be lying in the code unnecessarily exploiting memory.
• Minimal number of re-iterations in order to improve efficiency and keep the commit history clean.
• Best practices should be used in case of multiple approaches, mentors are always there to help you for this 👍

Rejection Criteria

• Not following/Violating Code of Conduct can lead to rejection.
• Coding etiquettes must be taken care of, for eg, always committing code in a different feature branch, same PR is edited in case of re-iteration of code, etc.

Expected Outcome

A single page for signup/login which says Login/Register Via GitHub and logs in the user if he's already signed in to CodeBadge platform before or registers him as a new user if he's coming there for the first time. User data can be stored in a local database(preferably, a local MongoDB instance) for now.

How to excel fast in the community

• Share the issues you encounter along the way and help others solve theirs.
• Chime in below in a comment to cooperate with others who are also working on this task.
• Report back at the above issue once you succeed, to encourage others and share what worked for you!

Resources & References (Where to Start)

You'll need to go through the docs of Authorizing OAuth apps via GitHub.

Extras

Just follow the readme whenever you are stuck . Visit Codeuino's Website in case of any doubts.

Write Unit Tests for CodeBadge

What you will need to know?

Any Unit testing framework for JavaScript - Beginner/Intermediate level

Write Unit Tests for CodeBadge

We can never be doubly sure of our code without automating the unit tests which check the sanity of the code. Although, BDD shall be the preferred coding approach, here we'll have to follow TDD approach. Thus, you'll have to write unit tests for each function used inside every .js file. For this, although you can use any famous Unit Testing framework for JavaScript, but recommended framework is Mocha, along with Chai as it's assertion library. The sanity checks and testing logic shall b well taken care of since passing of unit tests will only decise, whether or not code is to be merged into master.
All tests shall pass and code coverage should be >=80%. The test coverage report can be generated using Istanbul library.

Requirements

• Any Unit testing framework for JavaScript - Beginner/Intermediate level

Steps to Follow

• Claim this issue: Comment below. If someone else has claimed it, ask if they've opened a pull request already and if they're stuck -- maybe you can help them solve a problem or move it along!
• Install CodeBadge on your system go through readme.md in development branch for this purpose
• After installing CodeBadge install dependencies of backend and frontend, go through readme.md inside both the folders
  Link to readme https://github.com/codeuino/Codebadge/blob/master/README.md
• To run the project follow the given step in readme.md for both frontend and backend.
• Checkout to a different feature branch in git and start with the coding part.
• Make sure to commit your work daily and create a single PR for all your commits, per feature.

Acceptance Criteria

• Code is short, clean and properly indented.
• Unused code/comments/variables should not be lying in the code unnecessarily exploiting memory.
• Minimal number of re-iterations in order to improve efficiency and keep the commit history clean.
• Best practices should be used in case of multiple approaches, mentors are always there to help you for this 👍

Rejection Criteria

• Not following/Violating Code of Conduct can lead to rejection.
• Coding etiquettes must be taken care of, for eg, always committing code in a different feature branch, same PR is edited in case of re-iteration of code, etc.

Expected Outcome

A directory named as /test should be created in the root directory which will include all the .js test files. Each test should be named same as the name of file for which tests are written along with suffixing -spec in the filename. For eg, test file for signup.js should be named as signup-spec.js.

How to excel fast in the community?

• Share the issues you encounter along the way and help others solve theirs.
• Chime in below in a comment to cooperate with others who are also working on this task.
• Report back at the above issue once you succeed, to encourage others and share what worked for you!

Resources & References (Where to Start)

You'll need to go through the docs of Mocha framework, along with Chai as the assertion library to be used. Istanbul can be used for test coverage reporting.

Extras

Just follow the readme whenever you are stuck . Visit Codeuino's Website in case of any doubts.

Daily Contributors Tracking & Awarding Special Badges

What you will need to know?

Javascript - Beginner to Intermediate level (How to use requests and response using AJAX/Fetch asynchronously)

Track daily contributors using official GitHub API

You are required to track daily progress, Contributor wise, Repository wise as well as Organization wise. The data fetched should be sorted in a decreasing manner w.r.t number of merged commits to master branch for the respective repositories. According to this data, the top contributors should be awarded with some special badges which make them stand out from others on Codebadge platform. These badges should be displayed in front of their usernames everywhere it appears.

Requirements

• HTML, CSS, Javascript - Beginner/Intermediate level

Steps to Follow

• Claim this issue: Comment below. If someone else has claimed it, ask if they've opened a pull request already and if they're stuck -- maybe you can help them solve a problem or move it along!
• Install CodeBadge on your system go through readme.md in development branch for this purpose
• After installing CodeBadge install dependencies of backend and frontend, go through readme.md inside both the folders
  Link to readme https://github.com/codeuino/Codebadge/blob/master/README.md
• To run the project follow the given step in readme.md for both frontend and backend.
• Checkout to a different feature branch in git and start with the coding part.
• Make sure to commit your work daily and create a single PR for all your commits, per feature.

Acceptance Criteria

• Code is short, clean and properly indented.
• Unused code/comments/variables should not be lying in the code unnecessarily exploiting memory.
• Minimal number of re-iterations in order to improve efficiency and keep the commit history clean.
• Best practices should be used in case of multiple approaches, mentors are always there to help you for this 👍

Rejection Criteria

• Not following/Violating Code of Conduct can lead to rejection.
• Coding etiquettes must be taken care of, for eg, always committing code in a different feature branch, same PR is edited in case of re-iteration of code, etc.

Expected Outcome

A 'Contributor Tracking' tab should be created indicating all the top contributors list, highlighted along with their special badges.

How to excel fast in the community

• Share the issues you encounter along the way and help others solve theirs.
• Chime in below in a comment to cooperate with others who are also working on this task.
• Report back at the above issue once you succeed, to encourage others and share what worked for you!

Resources & References (Where to Start)

You'll need to go through the docs of official GitHub API and the respective endpoints.

Extras

Just follow the readme whenever you are stuck . Visit Codeuino's Website in case of any doubts.

Template Upload Issue

Only the sketch of the first template upload is previewed, even after uploading new templates with different template names until we restart the server.
Solution :- To avoid the use of back button of the browser, image must be previewed on the same page.

Implement login signup dashboard system for the github user on codebadge.

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

As of now, all the codebadge requests are handled at frontend using cronjobs. We need to port all the frontend computation for badge calculation to the backend.

Describe the solution you'd like

Implemented backend for the above-mentioned problems.

• login
• signup
• fetching github user details
• fetching github organization details
• fetching github organization members

Additional context

Working on it

Create a new UI for upload route

What you will need to know?

HTML, CSS, JavaScript,Vuejs.

Design UI for codebadge Illustrator

We are willing t an illustrator for codebadge project. Your task is to design a UI design for new badge template upload route located on /upload. Alse needs to add button on /home which will redirect the user to /upload.

Pages you will need to update

1. https://github.com/codeuino/Codebadge/blob/master/src/views/Upload.vue
2. https://github.com/codeuino/Codebadge/blob/master/src/views/HomeView.vue

Expected Outcome

Create an attractive UI for /upload route using Vuejs.

Resources & References (Where to Start)

You can go through CodeBadge project commit your code on Codebadge development branch

Some reference material
https://vuejs.org/v2/guide/components.html
https://vuejs.org/v2/guide/components-props.html
https://bootstrap-vue.js.org/

Extras

Just follow the readme whenever you are stuck. Visit Codeuino's Slack Channel in case of any doubts.s Website](https://codeuino.slack.com/) in case of any doubts.

Create a codebadge bot

Create a Codebadge bot

Create a GitHub bot which can interact at GitHub interface.

How to solve

The Github bot will fulfil work as follows:-

• Display badge updates
• Pull request and issue template matching and informing through a comment.
• When a bot gets installed the admin gets redirected to admin panel of codebadge where he will need to fill required details.

Expected Outcome

Bot interacting at GitHub working as a GitHub interface.

Design UI for codebadge illustrator

What you will need to know?

HTML, CSS, JavaScript,Vuejs.

Design UI for codebadge Illustrator

We are willing to design an illustrator for codebadge project. Your task is to design a UI template for codebadge project.

Expected Outcome

Design an attractive UI for codebadge illustrator with tools as we have in Photoshop illustrator and shall have a share button along with side login/user image.

Resources & References (Where to Start)

You can go through CodeBadge project commit your code on Codebadge development branch

Some reference material
https://vuejs.org/v2/guide/components.html
https://vuejs.org/v2/guide/components-props.html

Extras

Just follow the readme whenever you are stuck. Visit Codeuino's Slack Channel in case of any doubts.s Website](https://codeuino.slack.com/) in case of any doubts.

Create an Admin Dashboard

What you will need to know?

Javascript - Intermediate/Advance level (How to use requests and response using AJAX/Fetch asynchronously)

Create an Admin Dashboard

Admin Dashboard inside CodeBadge platform will be a place where all the management work takes place by Organization Admins. This shall be a new tab which would be visible only to the organization admin(s) (which can be identified while fetching the user roles for user contribution tracking from official GitHub API). This should give admin the access to various major features such as creating/editing/deleting badges which are to be awarded to the top contributors. Along with this, admin should have access to complete organization analytics such as monthly contribution rate, last active date of users, all-time contributions, etc. Same provided API would help you in providing all this kind of analytical data. You can use ChartsJS library for representation of these analytics.

Requirements

• HTML, CSS, Javascript - Intermediate/Advance level

Steps to Follow

• Claim this issue: Comment below. If someone else has claimed it, ask if they've opened a pull request already and if they're stuck -- maybe you can help them solve a problem or move it along!
• Install CodeBadge on your system go through readme.md in development branch for this purpose
• After installing CodeBadge install dependencies of backend and frontend, go through readme.md inside both the folders
  Link to readme https://github.com/codeuino/Codebadge/blob/master/README.md
• To run the project follow the given step in readme.md for both frontend and backend.
• Checkout to a different feature branch in git and start with the coding part.
• Make sure to commit your work daily and create a single PR for all your commits, per feature.

Acceptance Criteria

• Code is short, clean and properly indented.
• Unused code/comments/variables should not be lying in the code unnecessarily exploiting memory.
• Minimal number of re-iterations in order to improve efficiency and keep the commit history clean.
• Best practices should be used in case of multiple approaches, mentors are always there to help you for this 👍

Rejection Criteria

• Not following/Violating Code of Conduct can lead to rejection.
• Coding etiquettes must be taken care of, for eg, always committing code in a different feature branch, same PR is edited in case of re-iteration of code, etc.

Expected Outcome

An Admin Dashboard tab inside CodeBadge platform which won't be visible to general members/contributors of the community but only to org admin(s), showing various kind of analytics as to how the organization is performing/growing as well as features to create/edit 'CodeBadges'.

How to excel fast in the community

• Share the issues you encounter along the way and help others solve theirs.
• Chime in below in a comment to cooperate with others who are also working on this task.
• Report back at the above issue once you succeed, to encourage others and share what worked for you!

Resources & References (Where to Start)

You'll need to go through the docs of official GitHub API for fetching various analytics and ChartsJS library for pictorial representation of the same data.

Extras

Just follow the readme whenever you are stuck . Visit Codeuino's Website in case of any doubts.