===Profile Information
**Name:** Ujjwal Pathak
**Web Profile:** https://ujjwalpathaak.github.io/portfolio
**GitHub:** https://github.com/ujjwalpathaak
**Linkedin:** https://www.linkedin.com/in/ujjwalpathaak
**Location:** Noida, India
**Typical working hours:** 6:00 PM to 8:00 PM and 10:00 PM to 2:00 AM IST (UTC+5:30)
===Synopsis
====**[ Programs & Events Dashboard ] Improve the training module creation and update process**
Programs & Events Dashboard ( https://outreachdashboard.wmflabs.org ) is used to organize events like edit-a-thons and other newcomer-focused wiki programs while being focused on the global Wikimedia community.
It has a feature of adding training modules ( which are fetched from http://meta.wikimedia.org ). These modules are helpful as teaching materials, for making quizzes in workshops, or for sharing information with others.
The current process of creating new training content is tedious. We need to generate .json files or /pages to list libraries, modules, and slides. Each slide's JSON object includes a link to a Wikimedia page with the actual content ( written in wiki text ).
Slides can have text, images, videos, and multiple-choice questions (MCQs), each using a dedicated template designed to work with wiki text.
**Structure of training contentThis project aims to simplify the creation of libraries, modules, and slides. Users will be able to create them directly from the dashboard, using a user-friendly interface, instead of having to create pages on Wikimedia. This approach will not only increase efficiency but will also encourage more engagement with the content creation process.
As mentioned earlier, the modules are fetched from Wikimedia. Currently, I am assuming that the newly generated training content will be saved directly into the database. The decision regarding whether to add the same data to Wikimedia will be discussed during the research phase.
=====**Possible Mentor(s) - **
- Library@Ragesoss
=====**Have you contacted your mentors already? - **
Yes
- Module 1- - -
- Slide 1=Deliverables
- Sl=== Client-Side vs Server-Side 2Components
- M- I think that the workflow should start from .haml pages ( training/_all_module 2s.html.haml )
- Slide 1- The new components should be rendered client-sided for better interaction with Redux for state management.
- Slide 2
This project aims to simplify the creation of libraries, modules, and slides. Users will be able to create them directly from the dashboard, using a user-friendly interface, instead of having to create pages on Wikimedia. This approach will not only increase efficiency but will also encourage more engagement with the content creation process.
As mentioned earlier, the modules are fetched from Wikimedia. Currently, I am assuming that the newly generated training content will be saved directly into the database. The decision regarding whether to add the same data to Wikimedia will be discussed- And these components should be called from .haml pages.
- training_module.html.haml already renders it's resulting webpage both client-sided and server-sided.
- I could use something similar
**Alternative Approach: **
- If this approach is not feasible I could initiate the workflow from "My Dashboard" instead of the training page.
- So all logic remains client-side.
- Decision to be made during the research phase.
**Possible Mentor(s) - ** @Ragesoss
**Have you contacted your mentors already?===Editing Functionality
- Currently, we need to change the data on Wikimedia pages to make edits to the training content.
- This new approach won't be fetching data from there, so this should be a separate functionality.
**Edit Button:**
- Add an edit button in the UI to modify newly created content.
- When clicked, - ** Yespopulate the component previously used for creating that data with the current data that is to be edited.
- Taking inspiration from the edit block interface in the course timeline view.
- Users can make changes and then trigger the workflow to update the content with the new changes.
===Deliverables===Translation Challenges
The training pages are rendered server-side.- Currently, To have better interaction with Redux for state management, I plan to make these new components client-sided and call them from .haml pagestranslations are managed by the Translate extension ( https://www.mediawiki.org/wiki/Extension:Translate ).
This is already done in training_module.html.haml where the resulting webpage is rendered both client-sided and server-sided. I’ll study more about this in the research phase- As the data is not present on Wikimedia we won't be able to get translations.
- The solution to this problem is to be discussed - during the research phase.
- Incorporation into existing timeline if feasible or considered for implementation during an extended period if complex.
Alternatively, another approach to address this issue could be to start the workflow from a client component, maybe from My Dashboard directly. However, I thought that the option of creating new training content directly from the training page would be more intuitive. This can be finalized in the research phase as well===YAML vs Wikitext for Slides
- We get our data from the new components but how do we deal with it?
=====The YAML way
- https://dashboard.wikiedu.org/ uses YAML files to store the data.
- We can create same .yml files from .json before sending the data to inflate the table.
- Using YAML could be a problem in making Wikimedia pages out of these new modules as they support Wikitext.
- It would require new controllers to convert YAML to Wikitext.
=====The Wikitext way
- If we use Wikitext to create the data we could somehow use it to store data on Wikimedia.
- This can be done before converting it to Ruby hash and sending it to inflate the tables.
To enable users to edit the newly created content, I will create an edit button in the UI. When clicked, the button populates the component used to create new data with the data the user wants to edit. After making the changes user can trigger the workflow to update the content with the new changes.**I think this could be thought about after deciding whether the data should be uploaded to Wikimedia or not.**
A potential challenge arising from the absence of data on Wikimedia is how we obtain translations for our data. Presently, the Translate extension (https://www.mediawiki.org/wiki/Extension:Translate) manages the translations. This aspect of the project may also be explored during the research phase.
If the possible solution is not too complex, it could be incorporated into the existing timeline or considered for implementation during the extended period.==Timeline
====Timeline
=**May 1 - May 26** ( Week 0 )
- Community Bonding Period
- Learn more about how to implement the proposed changes
- Discuss how to implement certain features of the project ( mentioned before the timeline )
- Further refine the approach to ensure all project objectives are met
=====**May 27 - June 2** ( Week 1 )
- Finalize how to set up different parts of the UI to make creating new training material simple, easy, and intuitive
- Create UI mockups according to the dashboard's style guide
=====**June 3 - June 9** ( Week 2 )
- Start making UI components based on the mockups
- New components will be built using the Modal component, predefined classes, and existing child components to ensure consistency throughout the dashboard.
=====**June 10 - June 16** ( Week 3 )
- Continue making UI components
- Add basic functionality like state management ensuring their readiness for integration with the core logic
- Make the components responsive across various screen sizes
=====**June 17 - June 23** ( Week 4 )
- Create new routes and write API calls for the addition of libraries and modules
- Start writing new controllers and add functionality to the existing ones (Any Other Info section)
- Check whether the current logic could save this new data with minor adjustments. Otherwise, write new logic to save data in the databaseManually test whether new libraries and modules are being handled as expected
=====**June 24 - June 30** ( Week 5 )
- Start making- Finalize the same changes as libraries and modules for text slidestrategy for managing slides if there are still a few remaining aspects to address
- This would require a bit more effort and investigation as I’ll need to create a map between the user input and the data generated so that the ability to add images is compatible with being stored in the database
**July 1 - July 7** ( Week 6 )this is the most tricky functionality to implement
- Start working on the edit functionality for libraries and modules - write routes and API callsI’ll need to create a map between the user input and the data generated so that the ability to add images is compatible with being stored in the database
=====**July 1 - July 7** ( Week 6 )
- Write new controllers to handle the upd- Continue working on the implementation of old dataslides
=====**July 8 - July 14** ( Week 7 )
- Midterm evaluation
- Buffer time for previous weeks
- Conduct manual testing to pinpoint potential areas where the code could break
=====**July 15 - July 21** ( Week 8 )
- Make revisions based on the feedback I receive
- Start integrating quiz slides, similar to how other slides were handledworking on the edit functionality for libraries and modules - write routes and API calls
- Write new controllers to handle the updation of old data
=====**July 22 - July 28** ( Week 9 )
- Continue integrating quiz slides and work on- Expland the edit feature for quizunctionality to slides
=====**July 29 - Aug 4** ( Week 10 )
- Do manual testing to identify edge cases and make patches
- Buffer time for previous weeks or any functionality that might have gone unnoticed
=====**Aug 5 - Aug 11** ( Week 11 )
- Start writing tests to define the expected behavior and help in future modifications and maintainability
- Make revisions based on the feedback I receive
=====**Aug 12 - Aug 18** ( Week 12 )
- Refactor and optimize the code to improve readability
- Document the code, functionality, and usage for reference and future maintenance
- Prepare for final evaluation by ensuring all project requirements are met
**Note:**NOTE: This timeline is created wrt to the __standard 12-week program__. If more time is needed to add more features & use cases, the timeline will be extended for a few more weeks.
==- - -
=Participation
- I have been actively communicating my issues and doubts with @Ragesoss through //**Slack**// and //**GitHub//**//, and I will continue to do so.
- I would be glad to help other contributors and users solve their issues.
- The entire process will be documented in **biweekly** progress reports.
- I will be available via ////**Slack//**//, ////**Zulip//**//, ////**Email//**//, or //**Video Call sessions**// as needed.
===About Me
=====**Your education (in progress)**
- **University: **Jaypee University of Information Technology, Solan.
- **Course:** B.Tech in Computer Science Engineering
- **Year of Study: **Third Year
=====**How did you hear about this program?**
I learned about GSOC from one of my college friends who was in the "writing a proposal" stage himself for GSOC 23’. I thought the process was fascinating and thus made the decision to try it out for myself in 2024.
=====**Will you have any other time commitments, such as school work, another job, planned vacation, etc, during the duration of the program?**
During the duration of the program, I won't have any significant commitments. I’ll have my exams in the first week of June and then I'll be on summer break from my college till the end of July. After July, I intend to allocate 5-6 hours on weekdays after my college classes and 7-8 hours on weekends for GSOC. Moreover, as my college schedule isn't too demanding, I'll have time available between my college hours as well.
=====**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 to Google Summer of Code with the Wikimedia Foundation.
=====**What does making this project happen mean to you?**
This was the first time I tried contributing to any open-source project. The jump from making personal projects & participating in hackathons to contributing to a large-scale project which real users use was surely a learning curve for me, and I enjoyed every part of it. I have been contributing to the Dashboard since November last year and I am grateful for this opportunity. I promise to keep putting in effort and staying dedicated to this project.
===Past Experience- - -
=Past Experience
===Internships
=====Culinda Inc
- **Role:** Full-Stack Intern
- **Responsibilities:**
- Transitioned web scraping bots from **Selenium** to **Puppeteer**.
- Set up scheduled **cron jobs** for automation.
I have been a Full-Stack intern at Exponance Twirltree LLP and Culinda Inc, contributing to both frontend and backend development. Particularly at Culinda, I transitioned web scraping bots from Selenium to Puppeteer and set up scheduled cron jobs. This allowed for the automation of the job application process, enabling it to run seamlessly without requiring user interaction. Additionally, I integrated OpenAI to retrieve answers to recruitment questions, streamlining the application process further - Integrated **OpenAI** for retrieving answers to recruitment questions.
- Streamlined the job application process without requiring user interaction.
Besides my internships, I've also worked on a few personal projects.=====Exponance Twirltree LLP
# **Pintastic**- **Role:** Full-Stack Intern
- **Responsibilities:**
- Contributed to both frontend and backend development tasks.
- Developed Staff Attendance System by designing and building **RESTful APIs **reducing manual work.
- Enhanced system security by integrating **JWT** authentication and an access control system minimizing unauthorized access.
===Personal Projects.
=====**Pintastic** [[ https://youtu.be/2HxrzRNN_80 | Video Link ]]
- It is a pin-sharing social media site like Pinterest
- Developed using **Next.js**, **Firebase**, and **TypeScript**.
- Users can explore and like pins shared by other users and add their pins.
- I also added a **Chrome Extension** to make the process of adding pins from other websites easy and efficient.
# =====**Interviewlabs** [[ https://youtu.be/QgEe9TQnHuM | Video Link ]]
- It is a platform designed for conducting C++ coding interviews online.
- Developed using **React.js**, **Express.js**, **WebRTC**, **Docker**, and **Socket.io**
- It provides communication between interviewers and candidates through **video calls** and **real-time collaborative IDE**.
#===== **JUIT Webkiosk API** [[ https://github.com/ujjwalpathaak/JUIT-WEBKIOSK-API | GitHub Link ]]
- It is a **web scraper** designed to get academic data from the JUIT Webkiosk student portal.
- It fetches information such as attendance records, grades, and other informational data about students and their performance in academics
- The API initiates sessions using the student’s credentials, retrieves cookies for it, and uses them to **replicate API requests ** using **requests -response **to the backend. It then receives HTML responses containing valuable information, which is extracted using **cheerio **for further use.
**Here's a list of my contributions to the Dashboard**=== Skills
- https://github.com/WikiEducationFoundation/WikiEduDashboard/pull/5541 //A bug that occurred when a user tried to select a time before selecting the date while creating a new course.**Languages:** C++, Through thisJavaScript, I got a bit familiar with the codebase and how specs work on the dashboard.//TypeScript
- https://github.com/WikiEducationFoundation/WikiEduDashboard/pull/5538 //This Issue took multiple PRs to convert all dashboard icons from Font Files to SVGs.**Frontend:** HTML, CSS, Next.js, React.js, This was a small PR converting all inline icons and testing my method of extracting SVGs from Font files.Redux, //Tailwind CSS
- https://github.com/WikiEducationFoundation/WikiEduDashboard/pull/5542 //A few more icons were converted and one component was converted to a functional component//**Backend:** Node.js, FastAPI, Express.js, MongoDB, Socket.io
- https://github.com/WikiEducationFoundation/WikiEduDashboard/pull/5562 //This was the final and the biggest PR for the issue- **Others:** Git, GitHub, Linux, Docker, all the remaining icons were successfully converted.APIs, I learned about how server-side rendering works and spent time reading and navigating through a significant amount of front-end code.//Web Scraping
===**Contributions to the Dashboard**
- https://github.com/WikiEducationFoundation/WikiEduDashboard/pull/5544 //This was a UI addition that gave advice related to selecting a username before users were directed to Wikipedia to create their accounts.//===== Pull Request [[ https://github.com/WikiEducationFoundation/WikiEduDashboard/pull/5541| #5541 ]]
- https://github.com/WikiEducationFoundation/WikiEduDashboard/pull/5583 //Simplified program deletion by providing a way to delete the program from the campaign itself and started exploring the backend code. Created child controllers for course deletion and learned about how routes and controllers work.//Addressed a bug occurring when users tried to select a time before selecting the date while creating a new course.
- https://github.com/WikiEducationFoundation/WikiEduDashboard/pull/5638 **( open )** //A feature where users were prompted to indicate if they plan to add more instructors and send reminder emails. I started to get comfortable with Ruby and learned about how the database is structured, how alerts function, how emails are handled, and about periodic checks that are run to check for specific cases.//Gained familiarity with the codebase and how tests work on the dashboard.
===== Pull Request [[ https://github.com/WikiEducationFoundation/WikiEduDashboard/pull/5538| #5538 ]]
- Converted dashboard icons from Font Files to SVGs.
- Tested the method of extracting SVGs from Font files.
===Any Other Info=====Pull Request [[ https://github.com/WikiEducationFoundation/WikiEduDashboard/pull/5542| #5542 ]]
I went through the code responsible for creating training modules, here's a basic summary of my understanding -
**Current flow of data**- Continued conversion of icons to SVG format.
{F42599348}- Converted one component to a functional component.
===== Pull Request [[ https://github.com/WikiEducationFoundation/WikiEduDashboard/pull/5562| #5562 ]]
**Proposed flow of data**- Completed the conversion of all remaining icons to SVG format.
{F42599359}- Learned about server-side rendering and navigated through significant front-end code.
=====Pull Request [[ https://github.com/WikiEducationFoundation/WikiEduDashboard/pull/5544| #5544 ]]
I think that the workflow to add new libraries, modules, and slides could be added to the training page itself. It could use some inspiration from the workflow of adding new blocks in a timeline- Added a UI feature providing advice on selecting a username before users are directed to Wikipedia to create their accounts.
**I tried making a prototype on Figma of how this workflow can be implemented. Have a look at it here: ** [[ https://www.figma.com/proto/TDI6Qh3JcmE8qpghyw8Nwd/Improve-the-training-module-creation-and-update-process?type=design&node-id=1-4&t=5dFp6luGPehh0Nn8-1&scaling=scale-down&page-id=0%3A1&starting-point-node-id=1%3A4&mode=design | Link to prototype on Figma ]]=====Pull Request [[ https://github.com/WikiEducationFoundation/WikiEduDashboard/pull/5583| #5583 ]]
- Simplified program deletion by enabling deletion from the campaign itself.
- Started exploring the backend code and created child controllers for course deletion.
- Learned about routes and controllers.
=====Pull Request [[ https://github.com/WikiEducationFoundation/WikiEduDashboard/pull/5638| #5638 ]] (open)
- Working on a feature to prompt users to indicate if they plan to add more instructors and send reminder emails.
- Gaining comfort with Ruby and understanding database structure, alert mechanisms, email handling, and periodic checks.
- - -
=Any Other Info
=====**Current flow of data**
{F42599348, width=600}
=====**Proposed flow of data**
{F42599359, width=600}
Here are a few screenshots from===**Prototype on Figma: ** [[ https://www.figma.com/proto/TDI6Qh3JcmE8qpghyw8Nwd/Improve-the-training-module-creation-and-update-process?type=design&node-id=1-4&t=5dFp6luGPehh0Nn8-1&scaling=scale-down&page-id=0%3A1&starting-point-node-id=1%3A4&mode=design | Link to prototype on Figma ]].]]
=====Here are a few screenshots
{F42599387}626457, width=400}
{F42599390}626461, width=400}
{F42599383}626487, width=400}
{F42599378}626466, width=400}