==Profile Information
Name: Shashwat Khanna
Github: [TheTrio](https://github.com/TheTrio)
Location: India
Time Zone: IST (UTC+5.30)
Working hours: 3:00 PM to 3:00 AM (IST)
==Synopsis
> Wiki Education Dashboard is a complex web app for keeping track of contributions to Wikimedia projects. It's widely used by the global Wikimedia community for edit-a-thons, classroom wiki writing assignments, and a variety of other initiatives.
The dashboard currently supports a variety of methods to track articles within the “Article scoped program” event type - namely categories, PetScan, PagePile and templates. In a nutshell, all of these scoping methods make it easier to group and track a number of articles with a single condition, greatly reducing the effort for tracking related or similar articles. However, currently these tracking options are not obvious to find. This project aims to remedy that by incorporating these features into the course creation modal window itself - along with adding new features(like auto-complete,presets) to make entering these values easier.
===Possible Mentor(s)
Sage Ross
=== Have you contacted your mentors already?
Yes
==Deliverables
===Phase 1 Evaluation
- Do necessary user research for the interface/functionality
- Build a UI prototype for the new course creation modal
- Add core functionality to the UI prototype
- Add nice to haves like auto-complete, validation, and common examples for PetScan
- Write tests for the new interface
===Final Evaluation
- Improve the workflow for editing scoping methods after course creation
- Embed current scope settings in a more easy to find place
- Add a built-in graphical editor for the most common types of PetScan and PagePile queries to make them more accessible to users
- Write tests for the above features
==Timeline
====Community bonding period
Since this is a user focussed project, user research will play a very important role in determining the scope, extent and functionality of the changes. Here are some questions that will need answering
- Which scoping methods do most instructors use?
- Specifically for PetScan and PagePile based scoping, are there any common patterns to the queries?
- How many instructors are familiar with the interface of PagePile and PetScan?
- Is it obvious to instructors/students what the current scoping method is?
- (Open ended) What improvements/features would help instructors the most?
Getting to know the answers to these questions will likely involve a lot of back and forth with instructors and once we have the answers, we can finally start building a prototype.
====May 29 - June 12
Build an initial prototype for the application. For the time being, this will be limited to just the course creation modal. I have a few ideas for the design(found near the end of this proposal) but that might change drastically after the user research phase. Currently, I imagine the modal window will have a single page for each scoping method - explaining what it is, how it can be used, a few examples, and obviously a text field where the user can make their entry.
All of these can be built as a generic react component which takes in props to control the text shown. During this period, the main goal will be to perfect the UI as much as possible and leave additional functionality for later.
====June 13 - June 20
Implement the logic for actually tracking the filtered articles. This already exists on the backend - I’d only have to connect that to the new UI. Doing this should be more or less straightforward and I plan on having a basic but functional interface inside of the course creation modal for the various scoping methods.
====June 21 - June 28
During this period, I plan on adding features to make the addition of new filters easier. For now, I have the following ideas
- Auto-complete for templates and categories
- Error validation - stuff like checking for non-existing templates or categories
- Links to premade templates for PagePile and PetScan
====June 29 - July 5
Write feature tests for the functionality implemented so far to ensure that everything is working as expected. Also get user reviews on everything done so far.
====July 6 - July 14(mid-term evaluation)
During the evaluation period, I’ll address the feedback provided and continue to submit patches as required. I’ll also work on anything I wasn’t able to complete earlier.
====July 15 - July 28
At this point, the work on the course creation modal should mostly be over. Now my focus will shift on improving the experience of modifying scoping methods after the course has been created. This will likely involve the re-use of a lot of components built for the modal. The idea here is that the UI should be consistent for both during and after the course creation.
====29 July - August 4
During this week, I plan on finding ways to make the program and its scoping methods more visible - currently many instructors aren’t even aware of these features. The addition of these filters to the course creation modal should help. However, for existing courses or for those planning on changing the course type to Article Scoped Program after the fact, this doesn’t change anything.
I plan on adding some indicators to the UI which should help users figure out how to track a set of articles using these scoping methods. I don’t have any designs for this yet, but I imagine something on the Home page for instructors confused about why their program doesn’t have any edits(or shows no articles) - this would ideally be present even if the program already has some filters so that users can directly go to the page where they can edit the scoping methods(which was built during the previous week)
====5 August - August 18
During this period, I plan on working on a visual editor which makes it easy to customize and change the most common types of PagePile or PetScan queries. I’m still not sure if this is required - it will depend upon whether there’s any pattern to the queries that is very common - which is something we can only conclude after having done the user research. Regardless, I think a few things will almost certainly be helpful - stuff like articles belonging(or not) to certain categories(and ability to set the depth) and templates.
====19 August - August 25
Polish everything in the interface after consulting with users and my mentor. I also plan on writing the remaining tests during this phase, along with finishing any pending work.
====26 August - September 4(Final Evaluation)
Address all feedback and write a report highlighting all the work that I have done over the course of the last 3 or so months.
===Participation
I am active on both Slack and email. I’ll use Github for code reviews and related discussions. I plan on regularly meeting with my mentor to discuss my progress and get feedback on the work done so far.
===About Me
====Education (In Progress)
College: Indian Institute of Information Technology(IIIT), Pune
Year of Study: 3rd year
Field of Study: Computer Science Engineering
====How did you hear about this program?
I have been into programming for a long time. I mostly created projects which were useful to me. Working with others on a project excited me, but I mostly collaborated with my friends. After getting into college I came to know about Google Summer of Code from my seniors. One of my friends got selected for GSOC last year, and after talking with him, I looked at the program with greater interest.
====Will you have any other time commitments, such as school work, another job, planned vacation, etc, during the duration of the program?
My current semester ends in the 2nd week of May. I have another internship(remote) up until July 1st week - which means there will be an overlap of around a month after the coding period has officially started. I don’t think this will impact my project and have already informed my mentor about the same.
====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 only plan on applying to Google Summer of Code with Wikimedia Foundation.
====What does making this project happen mean to you?
I’ve already participated in GSoC with the dashboard once last year. I had a lot of fun working alongside my mentors Sage and Dhruv. I learnt a lot and explored a lot of different technologies, but at the same time, I knew that most users would never even realize something had changed - apart from maybe experiencing an improvement in loading times. Since my project was more developer oriented, only those working on the dashboard would be able to tell that something major had changed.
Which is why I’m excited about this project - it presents a user focused problem, and solving it requires not just code but having a conversation with the people actually using the dashboard. Having never done user research in the past, I’m greatly looking forward to it and hope to make a change in the way users interact with the dashboard.
===Past Experience
====Contributions to Wiki Education Dashboard
I’ve contributed to the dashboard extensively over the past year or so. All of my contributions can be found [[ https://github.com/WikiEducationFoundation/WikiEduDashboard/pulls?q=is%3Apr+author%3ATheTrio+ | here ]]. Below I list some major contributions which I made somewhat recently.
| Pull Request | Title |
| ----- | ----- |
| [[ https://github.com/WikiEducationFoundation/WikiEduDashboard/pull/5250 | #5250 ]] | upgrade i18n to version 4 |
| [[ https://github.com/WikiEducationFoundation/WikiEduDashboard/pull/5228 | #5228 ]] | refresh stale data on tab switch |
| [[ https://github.com/WikiEducationFoundation/WikiEduDashboard/pull/5243 | #5243 ]] | Add pagination to articles page |
| [[ https://github.com/WikiEducationFoundation/WikiEduDashboard/pull/5267 | #5267 ]] | Optimize survey results |
| [[ https://github.com/WikiEducationFoundation/WikiEduDashboard/pull/5231 | #5231 ]] | speed up rendering of Articles Tab |
====Past projects
I have worked on several personal projects covering various different tech stacks and technologies. I'll list the ones related to this internship below. More of my projects can be found [[ https://thetrio.vercel.app/projects/ | here ]]
=====[[ https://github.com/TheTrio/DearDiary | Dear Diary ]]
This was my first full-stack web application. I created it mainly because I couldn't find a good free alternative to write my diary entries on. It is written (as you might expect) using vanilla JS for the front end, and node for the backend. Because of this, I think I have a good understanding of how Javascript works and can work around so many of its quirks. It was also here where I learned stuff like docker, authentication, using a shell, etc.
=====[[ https://github.com/rushitote/chat-app | Slick Chat ]]
This was my first major React project. It was a basic chat client, allowing users to generate chat rooms, where they could invite and talk with their friends. This project dealt with a variety of technologies that were new to me, including WebSockets, routing, state management, and SQL databases. It is here where I discovered a lot of the stuff which is useful for this project - given that it's also built with React.
====Coding Skills
- Proficient in Java, Javascript, and Python. Moderately comfortable in C/C++ (which I use primarily for college)
- Wrote a fair bit of Ruby for the Dashboard
- Have written a lot of vanilla CSS
- Experienced in building complex interfaces using React
- Have worked with Node alongside Express for the back-end.
- Have used Linux for a couple of years now and am pretty comfortable with it
- Used git for version control.
====Other open-source projects I’ve worked on
1. [[ https://github.com/prettierlichess/prettierlichess/pulls?q=is%3Apr+author%3ATheTrio+is%3Aclosed | PrettierLichess]] - Prettier Lichess is a browser extension which adds custom styling to the lichess website.
2. [[ https://github.com/jrnxf/thokr/pull/7 | Thokr]] - Thokr is a terminal based type racer built using Rust.
3. [[ https://github.com/SysSn13/leetcode-rating-predictor/pull/6 | Leetcode Rating Predictor]] - basically what the name says. Has a browser extension and a web interface.
And of course, I have contributed to the dashboard :-)
===UI Mockups
Here's how I imagine the UI to look
{F36924446}
{F36924445}
{F36924444}
{F36924443}
{F36924442}