Profile Information
Name: Pratham Vaidya
Github : prathamVaidya
IRC nickname on libera.chat IRC: prathamVaidya
Web Profile: prathamvaidya.in
Resume : Pratham's Resume
Location: India
Time Zone: IST (UTC+5:30)
Working hours & Availability: 09:00 AM to 09:00 PM (IST)
Synopsis
Summary
Programs and Events Dashboard is a part of the WikiEduDashboard project that is used to organize and manage Wikimedia related events, edit-a-thons, and education programs for the global Wikimedia community. The process of creating training modules on the Programs and Events Dashboard is complicated and requires users to create .json format training module pages on meta.wikimedia.org. These JSON pages are then imported into the Programs and Events Dashboard's database.
The proposed solution is to create a Training Management System on the Wiki Dashboard itself. This system can be used to create, and update training content for the Programs and Events Dashboard and the Wiki Education Platform in a very user-friendly way. The system should maintain backward compatibility and support all the features of the existing JSON method. It should also synchronize with the wiki pages to enable edits and revision contributions to the training content by outside open-source contributors.
Possible Mentor(s)
Sage Ross
Have you contacted your mentors already?
Yes
Project Size
Large (350 hours)
Technical Details and UI Mockups
This section covers all important technical details and User Interface designs better to understand the technical approach and the defined timeline. I have created the system design, flows, and UI designs by doing a thorough analysis of the codebase and carefully studying the user behaviour and their expectations from this proposed system.
1. Training Management System Design
The new proposed training management system will have features to create/update library, modules and slides from within the dashboard. The existing system use wikimedia pages as the source for the training content for Programs and Events Dashboard. With the new dashboard training manager all the changes can be directly made from the dashboard itself but the translation of training content depends hugely on community contributions. To allow open source contributors to edit and add translation we have to sync back the updated training data from dashboard database to wikimedia source page using the mediawiki APIs. Normally, we can edit any wiki source page using the wiki EDIT API with the user's Wikipedia account but the training json data on wikimedia is created as a UserPage with JSON files along with normal wiki pages. User Pages are special pages that can only be edited by the owner. If the training content can only be edited by the owner, then syncing back to wiki is not possible.
After weighing the pros and cons of several potential flows, I've arrived at the most practical and optimal flow for the training management system.
Here is the design:
This system has two parts:
1. Migration of JSON pages to Dashboard Database (One Time Procedure)
The structured JSON training content includes a 'wiki_page' field that either links to an existing wiki page or contains embedded content within fields such as 'introduction', 'description', and 'content'. During the processing phase, training content with a designated wiki page will be stored directly into the database, while content lacking a wiki page will be automatically generated into a new wiki page and then saved to the database. Ultimately, each piece of training content will be associated with its own distinct wiki page.
2. New System Workflow
- Now when the training content is on Wiki Pages so open-source contributors can directly edit and translate the training content.
- Dashboard users who have access to the training manager can also create edits. These edits will be created on the wiki page from their Wikipedia account using Edit API.
- Now because the training content can be edited from two different sources there will be merge conflicts. To solve that, when the edits will be made to the wiki page by the outside contributors. Their changes will require to be approved using the dashboard. (We can also make it automatic without any review, requires a discussion)
- Dashboard users will have the option to either approve a new edit or roll back to a previous revision. This final edit will be updated in the database and rollback can be done on wiki page in case of rollback.
- This new training management system will have the benefits of improved UI/UX and also outside contributions for edits and translations.
- This new system is fully compatible with both modes "Wiki Education Dashboard" and "Programs and Events Dashboard".
- Preferably, this system will require user wiki account access for creating edits from their account. However, if such access is unavailable, anonymous edits can also be accommodated.
2. React Frontend for Training Management System
I have read the code of WikiEduDashboard in detail to understand the working of the codebase. I was specially interested in understanding how react is closely integrated with ruby server side rendered HAML Pages. The current training system is also integrating React components into the HAML page to enable interactive features.
My Proposed Training Management System is divided into 4 pages:
Page 1 : Library Listing Page
This page is similar to existing training page except for the difference that it also shows edit options and unpublished libraries. The existing training index page is rendered from training_controller#index, _all_modules.html.haml. We can update this HAML page to show the new options to the user based on its user role.
Library / Module / Slide Manager Page
- These 3 new pages will be created. These all have very similar features and will share almost all same functionality and components.
- It has many interactive features which will require react. We can add the required components in javascripts/components/training.
- The primary data that is "library data" for library manager page can be pre-populated using our new controller training_manager_controller#library_manager and similarly for other module and slide page.
- For other features like fetching edits and choosing revision, creating new library/modules/slide it'll need separate APIs.
Page 2 : Library Manager Page
- Used to create/update library content and its modules.
- Similar page for Module and Slide except they don't have group category option.
Three Panel View
Notice the right side panel, this panel separates translatable content from the structure of the training module. It has three modes of data representation :
- Visual Editor : It will contain input elements for the title, quiz, and also a WYSIWYM content editor for editing the content of slides/module/library. This content editor should support visual editing and also markdown code editing.
- Web View : It can be used for previewing the training module and the output will be close to how users see training content.
- Code Editor: This will show the library, module, or slide structure in code format as JSON and YAML. Please don't confuse this with the above Visual Editor, this is used to edit the overall structure through code and the Visual Editor Code feature provides markdown editing to only edit content. (This feature can be optionally removed if not needed, although it can prove beneficial for users accustomed to editing JSON for training content)
- In Dashboard Translation: Though in the UI designs, I have added a language dropdown option from where dashboard user's can choose the language of the content they wish to edit and utilize it for translations. It's better to use the translation feature provided by mediawiki and let contributors give translations from wiki page itself. I have not included this feature as a deliverable or in the plan but this can be accommodated if necessary.
All these 3 editor views will share a common state which means changing data in any view will change the state of the other two views. This will give users multiple options to edit the content.
Library Manager : Add Module Dialog
- Click on Add Module and this dialog will appear.
- It has 2 options to add a module. Import from JSON and create new. A similar component will be used to add slides.
Library Manager : Review Edits
- When a library, module or slide page is opened, it will check for any edits on its wiki page from outside opensource contributors.
- User is required to take an action to continue any further editing. User can choose to approve an edit or rollback to a previous revision.
- The review dialog only shows edits between last dashboard made edit and most recent wiki edit for reduced complexity.
- Rolling back to more earlier revisions can be done by going to the wiki page itself.
- Click "View Diff" will redirect to wiki compare page.
Page 3 : Module Manager Page
Page 4 : Slide Manager Page
Slide Manager Page with Assessment Mode
- Mark a slide as an assessment to enable easy-to-use quiz UI.
3. APIs
This is a rough list of all the main APIs required.
Libraries
| Method | Endpoint | Parameters / Body | Description |
|---|---|---|---|
| GET | /libraries | published=true | Retrieve published libraries |
| GET | /library/slug-name | lang=hi | Retrieve a library by slug and language |
| POST | /library | {status, name, intro, slug, wiki_url} | Create a library |
| PUT | /library/slug-name | {status, name, intro, slug, wiki_url} | Update a library and create edit on wiki page |
| POST | /library/choose_revision | {library_id, revision_id} | API performs required rollbacks and database update depending on selected revision |
| GET | /library/revisions/slug-name | Get any available revisions between last dashboard edit and last wiki edit | |
Modules
| Method | Endpoint | Parameters / Body | Description |
|---|---|---|---|
| GET | /module/slug-name | lang=hi | Retrieve a module by slug |
| POST | /module | {name, slug, content, wiki_url} | Create a module |
| PUT | /module/slug-name | {name, slug, content, lang, wiki_url} | Update a module and create edit on wiki page |
| POST | /module/choose_revision | {module_id, revision_id} | API performs required rollbacks and database update depending on selected revision |
| GET | /module/revisions/slug-name | Get any available revisions between last dashboard edit and last wiki edit | |
Slides
| Method | Endpoint | Parameters / Body | Description |
|---|---|---|---|
| GET | /slide/slug-name | lang=hi | Retrieve a slide by slug |
| POST | /slide | {name, slug, content, wiki_url} | Create a slide |
| PUT | /slide/slug-name | {name, slug, content, lang, wiki_url} | Update a slide and create edit on wiki page |
| POST | /slide/choose_revision | {slide_id, revision_id} | API performs required rollbacks and database update depending on selected revision |
| GET | /slide/revisions/slug-name | Get any available revisions between last dashboard edit and last wiki edit | |
4. Database Changes
Original Database Schema:
Proposed Database Changes:
- Added status enum in training_library for PUBLISHED / UNPUBLISHED values. This is required because now the list of Published libraries will not be fetched from any Wikimedia page.
- Moved translations from column to a separate table. This is an optimization so that an increase in total number of translations for content does not slow down accessing and updating operation on the table.
- Added wiki_revision_id in training_libraries, training_modules, and training_slides table which contains revision id from which current content is stored.
- Added user_id in training_libraries to store the library creator's user id.
5. Visual Editor (TinyMCE)
The Code Editor is one of the essential parts of the Training Management System. The training content is stored in wikitext format within Wiki Pages, and since users are already familiar with wikitext editing, I want to use wikitext editor for editing. However, understanding the current system is storing the content by parsing wikitext into markdown and assignment fields separately and then storing it in the database. This data format is already utilized by the training view part of the dashboard. So I'll not change it and stick with the markdown format itself. The system also needs to update the changes back to the wiki now, so it will require a new markdown to wikitext parser as well.
Here is the diagram demonstrating the current and proposed editor data flow:
The first system only requires 2 parsers but the new system will require 4 parsers.
Wikitext to Markdown Parser (SERVER) : It is used when retrieving content from wiki to store in database. (IMPLEMENTED /lib/wiki_edits.rb)
Mardown to HTML Parser (CLIENT): Used client side for rendering HTML. (IMPLEMENTED /javascripts/utils/markdown_it.js)
Markdown to Wikitext Parser (SERVER): Used when editing wiki from the dashboard. I believe It is not used anywhere but I saw an implementation of this parser in lib/wikitext.rb library. I have to test if it's working or not.
HTML to Mardown Parser (CLIENT): Used client side to parse back the edited HTML(during Visual Editing) back to markdown for sending to the server. Requires implementation.
Currently, Tiny MCE library is used for editing functionality. It provides visual editing, HTML Source code editing. We need markdown editing for our Editor. Tiny MCE can support markdown source code editing with some custom implementation of its source editor. I will also improve the editor's UI, upgrade tinymce-react library to latest v5 and overall improve the editor so that it can be later used anywhere.
6. Deletion of Library
- The Training content is referenced in many places like the course timeline. Deleting a piece of training library can result in unexpected breakdowns. To delete a complete training library its children's modules and their children's slides should be deleted. I propose only adding a soft delete feature for admins to delete the complete training library.
- In the Library Manager Page, the user can find a list of modules each having a delete button. When clicked, the action will only allow deletion if the module has no references other than with its parent library and children slides.
- The function to count total references needs more research.
Deliverables
Mid-Term evaluation
The deliverables will primarily include the Training Management System with the following features:
- Migration Script
- User can VIEW / CREATE / UPDATE new Libraries, Modules and Slides
- Improved TinyMCE Content Visual / Code Editor that supports markdown and wiki dashboard extension tags for image and video.
- Web Preview (Supporting Preview for Library, Module, and Slide without Assessment)
- Code Editor (Supporting JSON and YAML Editing)
- Working synced state functionality between the Three Panels.
- Backend APIs for basic CRUD operations. (API Discussed above)
- Database Changes
Final evaluation
- Slide Assessment UI
- Review Dialog Box
- Feature to Import revisions from wiki source. (Translations and Edits)
- Edit / Rollback to wiki page feature
- Authorization of users to use training system
- Image / Video Upload feature in TinyMCE Editor
- Feature to delete training library
Timeline
May 1 - May 26 (Community bonding period)
- Update UI Mockups as per discussions.
- Discussion regarding Dashboard to Wikimedia Data Syncing.
- Research how to add Markdown editing support, image and video upload in TinyMCE Editor.
- Reviewing changes that will be made to the Database during the project.
- Data migration strategy to follow.
May 27 - June 3 (Week 1)
- Perform database changes.
- Write migration script for moving wikimedia JSON pages to the database.
- Perform migrations.
June 4 - June 10 (Week 2)
- Creating Library APIs
- Updating Training Library Listing Page to support editing, published / unpublished status, and add authorization.
- Writing and updating Tests
June 11 - June 17 (Week 3)
- Setting up redux, stores, and shared state.
- Design and Develop Create / Update Library Page.
- Design components: Draggable Item Container, Modal Dialog with form fields and validations, and smaller components (No API Integration).
- Develop right side Three Panel View Structure.
June 18 - June 24 (Week 4)
- Improve TinyMCE editor UI, upgrade to latest v5 and add Markdown code editing feature.
- Develop Visual Editor including form fields and integrating the upgraded TinyMCE Editor that supports Visual editing and Code Editing.
June 25 - July 1 (Week 5)
- Develop Code Editor mode in Three Panel View to allow editing using JSON and YAML code. (JSON is used on Wikimedia pages and YAML is also used in database and local training data format)
- Working on implementing shared state between Panels.
- Testing after integration with dummy data without API integration.
July 2 - July 8 (Week 6 and Mid-Term Evaluation)
- Developing Web Preview Mode in Three Panel View.
- Rendered Preview should be as close to the real rendered view for better user experience.
- Writing Unit Tests.
July 9 - July 15 (Week 7)
- Write or update Markdown to Wikitext Parser.
- Create Module and Slide APIs.
July 16 - July 22 (Week 8)
- Develop Create / Update Module and Slide Manage Page. (Because all the complex components are already made, they can be reused here)
- Integrate Library, Module and Slide APIs.
- Manage Frontend Routing between pages.
July 23 - July 30 (Week 9)
- Create Review Edits Dialog Box UI
- Create API to get revisions from wiki page
- Create API to choose a revision, rollback wiki page.
- Writing Tests
July 31 - August 6 (Week 10)
- Develop Slide Assessment feature on Slide Page
- Add Image / Video Upload Feature in TinyMCE Editor
- Writing Tests and Documentation
August 07 - August 13 (Week 11)
- Migrating Data of translations from old column structure to separate translation table. (Check Database changes section)
- Add Permissions and Authorization logic in APIs and Training Manager
- Feature to delete training library
- Testing and Fixing the Bugs
- Writing Tests and Documentation
- Prepare for feature release
August 14 - August 20 (Week 12 and Final Evaluation)
- Buffer Period
- Test for concurrency related issues. (Example: cases like if two different users try to edit the same training content from dashboard it will lead to merge conflicts)
- Testing and Fixing the Bugs
- Writing Tests and Documentation
I have tried fitting the schedule in the 12-week period but the schedule may require an extension.
Participation
I am active on Zulip, 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: Institute of Engineering and Technology, Resora, India
Year of Study: 4th year
Field: Computer Science Engineering
How did you hear about this program?
I have been contributing to open source for a long time, initially, I started by creating my projects in the open source domain to solve problems that I have encountered. Later I moved to contributing to bigger projects to learn more from the experienced community and create a bigger impact. Last year I heard about GSOC from the internet and submitted my proposal for an exciting project in an organization but my proposal was not selected. I communicated and got helpful feedback from the mentor and I have used it in creating this proposal.
I believe this can provide me with a good opportunity to dive into deep open source and create a bigger impact.
Will you have any other time commitments, such as school work, another job, planned vacation, etc, during the duration of the program?
I will have my final semester exams planned somewhere in July for a week. I'll give extra hours on other days to compensate for the week.
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 the Wikimedia Foundation.
What does making this project happen mean to you?
I have already been contributing to the wikiEduDashboard Repository for a considerable period, where I have merged feature PRs and addressed bug patches under the guidance of Rage Soss. As I am in my final year, I have encountered challenges in securing interviews due to the recession and my third-tier college. However, one of the most valuable pieces of feedback I received from a mentor was to not lose hope and to leverage this time to work on projects that have a greater impact on the world.
The Wiki Education Dashboard is widely utilized by students, instructors, and trainers, and presents an excellent opportunity for learning and growth. Through my involvement in its development, I anticipate acquiring valuable skills and making substantial contributions to its enhancement. My contributions to open-source projects and successful participation in GSOC will serve as proof of my knowledge and dedication to my future endeavors, motivating me to give my very best.
Regardless of the outcome of the selection process, I remain committed to continued contribution to the project whenever my availability permits.
Past Experience
SDE 1 (MERN Developer) | Applore Technologies | Aug 2022 - Feb 2023
- Architected a secure and scalable system, implementing JWT authentication, group video conferencing feature, and course syllabus management system (admin panel) for E-Learning Software “Mentostar”.
- Engineered a seamless course order system, including course management APIs, a cart handler with complex order logic, and payment integration. Automated tasks through cron jobs for system maintenance and reliability.
- Enhanced user communication with a notification module and facilitated mentor verification through a systematic flow. Implemented a payroll management system for automated compensation based on engagement.
SDE Intern (MERN Developer) | Applore Technologies | May 2022 - July 2022
- Implemented role and permission-based authorization system using NodeJS, ensuring secure access control and data protection. This granular system allows for precise control over user actions and data manipulation.
- Developed a comprehensive flow for the Surveyor Management System: “Habitus platform”, incorporating ticketing, citation, and polygon systems. This involved creating structured processes for issue tracking, resolution, and geospatial data representation.
- Achieved substantial optimization of an intricate data fetching API, specializing in retrieving extensive records. Significantly reduced response time from 4 seconds to 0.5 seconds, demonstrating an impressive 87.5% improvement in efficiency, earning Employee of the Month recognition.
SDE Intern (Web Developer) | Pricemate Online Services Pvt. Ltd | Sep 2021 - Dec 2021
- Engineered an intricate reward and wallet system in PHP, incorporating features such as fund transfers, money-sending capabilities, and seamless redemption processes, ensuring a secure and efficient financial ecosystem within the “DiscountKhojo E-Commerce” platform.
- Implemented core functionalities in PHP, including a dynamic product catalog, coupon system, and a QR management system that intricately links offline printed coupons to specific shops, enhancing the platform's versatility and usability.
- Established a robust internal logic in PHP for seamless data retrieval from the WooCommerce database, optimizing queries and ensuring synchronized and efficient data access for the DiscountKhojo ECommerce platform.
Contributions to Wiki Education Dashboard
| Pull Request | Title | Status |
|---|---|---|
| #5545 | feat: Implement email notifications for instructors | Merged |
| #5540 | Improvements in debian setup script | Merged |
| #5722 | Sort by training modules in Student Overview | Merged |
| #5735 | Added new eslint rule to disallow string literals | Merged |
| #5734 | Added i18n in remaining texts | Merged |
| #5732 | Added label, accessibility tags & attrs | Merged |
| #5719 | Minor UI/UX Improvements | Merged |
| #5678 | fix: Issue #5543 Handle case if no campaign is available when creating program | Merged |
| #5539 | Fixed Bug #4234 | Merged |
| #5741 | Improved Article Finder Searchbar with added Autocomplete | Open |
| #5737 | Refactored Checkbox, TextAreaInput, WikiSelect, TextInput, CourseForm | Open |
| #5723 | Feature 5693 - Training Data in Editors CSV | Open |
| #5718 | feat: validate on-wiki edits in training module | Open |
View status of all my PRs here
My Projects
Superbook - AI Notes & Book Writer (View)
This project, an award-winning endeavor in the esteemed 'Hackout' hackathon, remains actively maintained by me even beyond the event. Superbook allows users to write personalized books using LLMs. These personalized books are generated according to the user's age, interests, and prerequisite knowledge on the subject. The project is built in React and NodeJS.
Kunji - 1 minute Authentication Service (View)
I created this Free and Open Source Authentication Service which allows developers to implement authentication and authorization systems in their new or existing project within a minute. Suitable for MVP, side projects, or hackathon apps. It's built in Typescript, React, Nodejs and I have written React and NodeJS Package to easily integrate Kunji into React frontend and NodeJS backend. I am going to release it soon and also plan to support more languages, libraries, and frameworks in the future.
Urivu - Freelance Project
It is a business listing website targeting UAE businesses. It has 100k+ registered businesses. I built the project in Typescript, Nodejs, and React as a freelance contractor.
I completed two internships and subsequently held the position of SDE-1 for a significant period after my internships, during which I undertook numerous complex projects. Additionally, I have embarked on many other exciting projects, which can be explored further on my portfolio website.
Skills
- Experienced in using React and NodeJS.
- Good Knowledge of databases MySQL, MongoDB, and Redis.
- Proficient in C++, Typescript, Javascript.
- Experience in Deployments and Managing servers.
- Worked on complex applications in React and Javascript/Typescript.
- Learned Ruby on Rails for this project and can work on fairly any task.
- GIT, Github, Linux, Shell Script, Python
Other Contributions
Automattic/Mongoose: ORM Library used in NodeJS for data modeling mongodb models.
LokeshKumar-Dev/Rdj.exe : Music Player App
kunji-react-library: It handles kunji authentication and state automatically to simplify authentication and user management in your applications. The library provides two main components: KunjiProvider and useKunji hook, making it easy to integrate authentication features into your React projects.
kunji-node: It is a Node.js library designed to verify tokens issued by the Kunji authorization server. It comes with AuthMiddleware that can be easily integrated into your Node.js applications to secure routes and endpoints.