codeuino / codebadge-backend Goto Github PK
View Code? Open in Web Editor NEWLicense: GNU General Public License v3.0
License: GNU General Public License v3.0
Communication & Presentation Skills - Beginner level
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.
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'.
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.
Just follow the readme whenever you are stuck . Visit Codeuino's Website in case of any doubts.
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.
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.
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 π
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.
Atleast one functional and useful special badge added.
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!
Head over to badges.json and specialBadges.js and see how the special badges are defined.
Just follow the readme whenever you are stuck . Visit Codeuino's Website in case of any doubts.
HTML, CSS and JavaScript
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.
At the route /newbadge, the shape tool must be added which can be available for various colour fills.
Shapes expected:-
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.
Just follow the readme whenever you are stuck. Visit Codeuino's Website in case of any doubts.
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.
Basics of HTML Canvas, CSS.
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.
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,
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.
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.
Just follow the readme whenever you are stuck. Visit Codeuino's Website in case of any doubts.
HTML, CSS and JavaScript
If the task of integration of HTML Canvas and pencil tool are completed, you can work on this task.
At the route /newBadge, the eraser tool must be added and should be available for various thickness.
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.
Just follow the readme whenever you are stuck. Visit Codeuino's Slack Channel in case of any doubts.
There is no described Readme for this project for now
Please write a described readme like the DONUT project
An explained readme so that user can know how to set up the project
Assigning this issue to @sarthak77
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.
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.
Machine Learning using Python, Image processing, Javascript, Html Canvas
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. )
HTML, CSS and JavaScript
If the task of integration of HTML Canvas is completed, you can work on this task.
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.
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.
Just follow the readme whenever you are stuck. Visit Codeuino's Slack Channel in case of any doubts.
Nothing. This issue is meant to welcome you to Open Source :) We are happy to walk you through the process.
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.
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.
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!
You can refer pinterest for more design ideas.
Just follow the readme whenever you are stuck goto
https://codeuino.slack.com/ to ask your doubts.
Nothing. This issue is meant to welcome you to Open Source :) We are happy to walk you through the process.
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.
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.
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!
You can refer pinterest for more design ideas.
Just follow the readme whenever you are stuck goto
https://codeuino.slack.com/ to ask your doubts.
Art Design, JSON and some understanding of how the current badge assignment system works.
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.
A brief idea of JSON and how Codebadge assigns predefined badges.
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 π
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.
Atleast 2 badges added which are suitable for the progress they depict.
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!
Head over to badges.json and see how the predefined badges are made.
Just follow the readme whenever you are stuck . Visit Codeuino's Website in case of any doubts.
HTML, CSS and JavaScript
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.
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.
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.
Just follow the readme whenever you are stuck. Visit Codeuino's Website in case of any doubts.
Javascript - Beginner to Intermediate level (How to use requests and response using AJAX/Fetch asynchronously)
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.
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.
You'll need to go through the docs of Authorizing OAuth apps via GitHub.
Just follow the readme whenever you are stuck . Visit Codeuino's Website in case of any doubts.
Any Unit testing framework for JavaScript - Beginner/Intermediate level
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.
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.
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.
Just follow the readme whenever you are stuck . Visit Codeuino's Website in case of any doubts.
Javascript - Beginner to Intermediate level (How to use requests and response using AJAX/Fetch asynchronously)
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.
A 'Contributor Tracking' tab should be created indicating all the top contributors list, highlighted along with their special badges.
You'll need to go through the docs of official GitHub API and the respective endpoints.
Just follow the readme whenever you are stuck . Visit Codeuino's Website in case of any doubts.
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.
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.
Implemented backend for the above-mentioned problems.
Working on it
HTML, CSS, JavaScript,Vuejs.
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.
Create an attractive UI for /upload route using Vuejs.
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/
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 GitHub bot which can interact at GitHub interface.
The Github bot will fulfil work as follows:-
Bot interacting at GitHub working as a GitHub interface.
HTML, CSS, JavaScript,Vuejs.
We are willing to design an illustrator for codebadge project. Your task is to design a UI template for codebadge project.
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.
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
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.
Javascript - Intermediate/Advance level (How to use requests and response using AJAX/Fetch asynchronously)
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.
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'.
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.
Just follow the readme whenever you are stuck . Visit Codeuino's Website in case of any doubts.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.