===Profile Information
**Name**: Shivansh Bindal
**IRC nickname on Freenode**: shivanshbindal9
**Github**: https://github.com/shivanshbindal9
**E-mail**: shivanshbindal603@gmail.com
**Phone Number**: +91-8295729539 / +91-8168611280
**Location**: India
**Timezone**: India(UTC+5:30)
**Typical working hours**: 10 AM - 2 AM (UTC+5.30)
**Video Chat**: https://appear.in/shivanshbindal9
===Synopsis
This project involves updating the notification count on the set of icons in the header via a polling mechanism. A notification text appearing for a small time will be visible for a short duration of time based on user preference. Also, a visual cue indicating new notifications will be provided.
**MENTORS : Kosta Harlan @kostajh, Roan Kattouw @Catrope**
I have been an active member of the community since December and have been contributing to other sister projects of the WikiMedia foundation. After the announcement of the GSoC project ideas, I was deeply interested in the aforementioned project and I am also working on microtasks relevant to the project. I also have been in regular contact with mentor Kosta Harlan through E-mail as well as on phabricator.
===Deliverables
This project will involve making a polling mechanism i.e. a mechanism to call notification API periodically to check if there are any new notifications. Update the counter i.e. the notification count on the notification icons in the header.
**PHASE 1 (Deliverable before Phase 1 evaluation)**
**PHASE 2 (Deliverable before Phase 2 evaluation)**
**PHASE 3 (Deliverable before Phase 3 evaluation)**
=== Timeline
| **Period** | **Task** |
|------------ |-----------|
|6th May to 26th May |**Community bonding period** Understand the codebase of the Echo extension. The workflow of how the notifications are sent |
|27th May to 2nd June| Write Gadget or site js for making API calls periodically(polling).|
|3rd June to 9th June| Optimize the polling mechanism based on discussion with the mentors. Fix any possible bugs|
|10th June to 16th June| Change the notification count on the icons by comparing the notification count (unread)|
|17th June to 23rd June |Document the work done|
|24th June to 28th June|**Phase I evaluation** Submit a report of the tasks completed. Fix bugs, if any. |
|29th June to 7th July|.|
|8th July to 14th July|.|
|15th July to 21st July| .|
|22nd July to 26th July|**Phase II evaluation** Submit a report of work done. Fix bugs .|
|27th July to 4th August| .|
|5th August to 11th August|.|
|12th August to 19th August|.|
|20th August to 26th August |.|
|27th August to 2nd September|**Mentor submit final evaluation of the candidate** |
|--------------|-------------------|
===Participation
I will be available anytime through Email, Zulip or if required, a well-planned video session. I have been and will be in constant contact with Kosta Harlan and Roan Kattouw through E-mail as well as phabricator. I have been an active user of Github since my freshman year. I will continue contributing via Gerrit to our project. Apart from working on the project, I would be glad to help other contributors and users solve their issues and help the maintainers in reviewing Patches.
===About Me
**Current Education(in progress):**
- **University**: Indian Institute of Technology, Roorkee, India
- **Field of study**: Computer Science and Engineering
- **Current Year of the study**: Second Year
**How did you hear about this program?**
Our college has an active community of open source developers. Every year, many of our institute’s students get selected for Open Source Programs such as GSoC and Outreachy. I heard about this program from a senior of mine who himself completed his GSoC with OWASP.
**Will you have any other time commitments, such as school work, another job, planned vacation, etc, during the duration of the program?**
I will be having my semester examinations from 24 April to 4 May so I will be slightly inactive between 10 April and 4 May to prepare for my exams, which is way before the coding period.
During my summer break (5 May to 11 July) I can easily give 50+ hours per week to the project as I have no other commitments. I will be able to do about 35-40 hours a week when my college resumes (3-4 on weekdays and 10+ on weekends). But I intend to complete a major part of the project before my classes begin and thus I will easily able to cope up with the remaining work and deadlines.
**We advise all candidates eligible for Google Summer of Code and Outreachy to apply for both programs. Are you planning to apply to both programs and, if so, with what organization(s)?**
I am only applying for Google Summer of Code with Wikimedia organization.
**What does making this project happen mean to you?**
I was only recently introduced to the open source world and so far, I have found the developer community extremely supportive and helpful. There are a lot of open source projects that we make use of every day that makes our lives easier and help us learn new things. Wikipedia is the world's biggest digital encyclopedia and when I came to know that the project is open source, I was highly motivated to contribute to it.
Now, I have gotten a chance to contribute to the world’s biggest digital encyclopedia. I am grateful for this opportunity and assure you about my commitment and determination towards this project. Through this project, I will be getting a chance to apply my knowledge practically and also learn a lot of new things. Moreover, this project will not only give me the opportunity to work with the best developers around the world, but I'll also be able to give back something to the community and make learning easier for them.
===Past Experience
I have been a software enthusiast since my freshman year and since then I have worked on some projects which were truly a great learning experience for me. In my pursuit of acquiring web development skills, I started contributing to the open source community so that I can give my part back to the organizations whose products have been an asset to me.
Also, at my university I am an active member of [Information Management Group(IMG)](https://www.iitr.ac.in/campus_life/pages/Groups_and_Societies+IMG.html), which is solely responsible for maintaining the IIT Roorkee's intranet portal channeli and [IIT Roorkee's official website](https://www.iitr.ac.in/), and has worked on several projects from scratch, so I am well verse with the software development cycle i.e. from designing to coding to production to maintenance.
**Coding Skills:**
- Programming Languages and Frameworks:
- Fluent in HTML, CSS, Javascript, PHP, Python, C/C++.
- Sound knowledge of OOPs, MVC architecture.
- Proficient with Django(Python Framework), Django REST framework,
Django Channels, Websockets, Yii2(PHP Framework)
- Experienced with front-end frameworks such as React and Redux.
- Having moderate experience with MySQL and SQLite
- Development Environment:
- Ubuntu 18.04 LTS (preferable) or Windows 10
- Fully customized Visual Studio IDE.
- Vim(Fully customized) and Nano for small edits.
- Strong concepts of Git, can catch up with Mercurial and SVN if required.
- Other Interests:
- Shell Scripting
- Competitive Coding
Till now I have earned a great sense of understanding about the codebase and will continue to contribute to the project.
Also, I have made some pull requests to WikiMedia project MediaWiki Action API. Additionally, I have a decent knowledge of making templates and gadgets and using them.
- [#65 (merged)](https://github.com/wikimedia/MediaWiki-Action-API-Code-Samples/pull/65): expand autogenerator.js file to output Javascript files (completes **Microtask 2**).
- [#80 (merged)](https://github.com/wikimedia/MediaWiki-Action-API-Code-Samples/pull/80): make file names generic in modules.json file (solves issue #70).
- [#99 (merged)](https://github.com/wikimedia/MediaWiki-Action-API-Code-Samples/pull/99): add javascript files for remaining modules in modules.json file.
- [#114 (to be reviewed)](https://github.com/wikimedia/MediaWiki-Action-API-Code-Samples/pull/114): reorganize readme.
- [#70 (issue)](https://github.com/wikimedia/MediaWiki-Action-API-Code-Samples/issues/70) : filename attribute not generic in modules.json .
Along with working on this project I also contributed to other projects of WikiMedia Foundation enlisted in New_Developers guide of WikiMedia. The project to which I mainly contributed is WikiEduDashboard
- [#2314 (merged)](https://github.com/WikiEducationFoundation/WikiEduDashboard/pull/2314): modify javascript tests, add CSS file for single-select type and add react-select in course type selector.
- [#2321 (merged)](https://github.com/WikiEducationFoundation/WikiEduDashboard/pull/2321): improve the layout of the search bar in mobile phone screen (solves issue #2255).
- [#2331 (merged)](https://github.com/WikiEducationFoundation/WikiEduDashboard/pull/2331): add ruby spec for the added react-select component in home wiki project selector.
- [#2380 (merged)](https://github.com/WikiEducationFoundation/WikiEduDashboard/pull/2380): implement i18n in yes no selector, modify CSS and functionality of Select component in yes no selector.
- [#2410 (merged)](https://github.com/WikiEducationFoundation/WikiEduDashboard/pull/2410): solves on tab press issue in two components.
- [#2413 (merged)](https://github.com/WikiEducationFoundation/WikiEduDashboard/pull/2413): add react-select in home wiki language selector.
- [#2429 (merged)](https://github.com/WikiEducationFoundation/WikiEduDashboard/pull/2429): improve the styling of block type select alongside adding Select component.
- [#2430 (merged)](https://github.com/WikiEducationFoundation/WikiEduDashboard/pull/2430): add react-select in course level selector.
- [#2453 (merged)](https://github.com/WikiEducationFoundation/WikiEduDashboard/pull/2453): show due date only when the type is assignment (solves issue #2452).
- [#2452 (issue)](https://github.com/WikiEducationFoundation/WikiEduDashboard/issues/2452): due date visible once set irrespective of block type.
**OTHER PROJECTS:**
- **Static Site Generator**: Static Site Generator is a web-based app to facilitate the professors of our college to make single page conference website, portfolio by simple drag-drop and component selection. It uses Yii2(PHP framework) for the backend, React and Redux for the frontend, MySQL as database.
- **Water Breach Reporting APP**: This app implemented a system to report the water structure breaches to the government. It is a mobile app with backend in Django REST Framework. Blockchain, implemented in python, is also used to make transactions immutable. The source code can be found [here](https://github.com/shivanshbindal9/SIH_Reporting_App). This project was worked on as a part of Smart India Hackathon.
- **Stream**: Stream is a web app to stream music on a PC, while one can control the song using other PCs connected in a network. It is a React-Django application with webpack used as the module bundler for JavaScript code. For real-time communication between the stream and other users, WebSocket connections were deployed using Django channels.
===IMPLEMENTATION DETAILS
The Notification Badge(icons) "lazy-load" the javascript i.e. javascript is loaded when the icon in the header is clicked. Once the javascript is loaded the then we can see the change in the notification count and the new notifications.
Now, since there is lazy loading so all the javascript is loaded only after the icons are clicked. To update the count on the icons we'll need to make API calls. Now, "Gadgets" can be used to do the same i.e. to make API calls. Using the polling mechanism an API request that checks notifications of a user can be made after around 60 sec.
After this API request, we will check if there are any new notification by comparing the number of unread notifications. If there is any new notification then the count on notification icon will be changed by changing the HTML.
Also, in case of any new notification, a new API request is needed to be made that will be used to display notification text for short duration. This can be done by making a new API that shows only the relevant information of only the new notifications using mw.notify() library.
For providing the visual cue to users regarding new notifications a faintly coloured background around the icons can be used.