Page MenuHomePhabricator

Convert Campaign pages to React
Open, Needs TriagePublic

Description

Profile Information

Name: Anuradha
Location (country or state) : Delhi, India
Typical working hours (include your timezone): 11:00 AM to 16:00 PM (+5:30 UTC)

Synopsis

Campaign/ tabs rendered server-side using Rails templates, which is very similar to the courses view for an individual course, but for courses, all the tabs are rendered client-side in React
So, it'd be helpful to move all of the campaign's views to a similar React-based architecture so as to improve user experience and it would also help in #1lib1ref campaign
The main task of this internship would be to convert all Campaigns/ tabs to React. The latter task would be to add some features so as to allow actions on multiple courses of a campaign at once.
Possible Mentor(s)
@Ragesoss , @KhyatiS14
Have you contacted your mentors already?
Yes, I have connected with mentors via Slack and Zulip.

Deliverables

The design of the campaign's view is very similar to the course's view for an individual course, but for courses, all the tabs (Home, Articles, etc) are rendered client-side in React, due to which we're not able to add features.
Moving to single-architecture would improve user experience as they can easily navigate from tab to tab, preserving data between tabs after initial render, so that the page feels faster.
Campaign pages will be nicer, and the architecture more consistent, if we use React pretty much everywhere and get progressively closer to a single-page app. Moreover, it will enable the filtering of the courses/campaigns, sorting courses into related campaigns or allow actions on multiple courses of a campaign at once to improve the user experience or the Dashboard.
The basic flow of the project would be to first realize the react components based on the haml files. The HTML components can be as it is translated to react components, using reusable components already present wherever possible. After that, try to map what data is required for that view from the haml file to JSON builder file. Json builder is just a format of data to be sent via JSON response for a request. React components will use that JSON data for rendering.
This involves converting:

  1. Campaign overview
  2. Campaign course tab
  3. Campaign articles tab
  4. Campaign user tab

and eventually, all campaign tabs from Haml to React

Timeline

5 November 2019

  • Application deadline

6 November 2019 - 26 November 2019

  • Continue making contributions to WikiEduDashboard
  • Get more hands-on experience with Ruby on Rails and React

26 November 2019 - 3 December 2019

  • Community Bonding Period

3 December 2019 - 10 December 2019 (Week 1)

  • Understanding the various tabs of the campaign overview, how they function and how can some functionality be improved or added.
    • Understanding how data is mapped from JBuilder to the Haml file and preparing the template of components from Haml.
    • Understanding the ORES data flow model to extract data for features like ref_added etc.
    • Working to understand and implement tools like Wikimedia Toolforge pageviews.

10 December 2019 - 18 December 2019 (Week 2 and Week 3)

  • Working on understanding the Campaign "Courses" tab
    • Collecting the common components for every tab in Campaign and working on them(ref_added, views)
    • Working on the features "Courses" and it's sorting and distribution.

19 December 2019 - 29 December 2019 (Week 4 )

  • Working on the Campaign "Articles" tab
    • Understanding how sorting of Title works and working on that feature(the logic is already cleared from the above feature "Courses")
    • Working on the "char added" feature and how the courses are aligned properly.
    • I would also like to work on introducing the feature of filtering no. of articles based on various courses.

17 December 2019

  • Initial feedback by mentors

30 December 2019 - 13 January 2019 (Week 5 and Week 6)

  • Working on the Campaign "User" tabs
    • Work on improving the individual User interface
    • Identifying features that are visible, unique to individual users which are not presented initially when the "student" tab is clicked and working on adding another column for easier clarification

14 January 2019 - 27 January 2019 (Week 7 and Week 8)

  • Working on the Campaign "ORES" tabs
    • Understanding the implementation of the graph
    • Implementing other statistics based graph to easily understand the impact of a particular campaign.
    • I would like to research on many such graphs for an individual campaign to highlight the impact and importance of a particular campaign.

29 January 2019

  • Mid-point feedback due

28 January 2019 - 10 February 2019 (Week 9 and Week 10)

  • Working on the Campaign "Alerts" tabs
    • Introduce Campaign Alert feature according to an individual course to better understand tasks that are pending etc.
    • Try to further understand the alert type and try to determine the new alert type that can help to filter smoother according to the relevance of the user.

11 February 2019 - 24 February 2019 (Week 11 and Week 12)

  • Working on the final Campaign "Home" tab
      • FIxing the user interface of the home tab according to a particular Campaign
    • Introduce more statistical data and initial information regarding a particular campaign for a user to easily navigate the campaign.

25 February 2019- 3 March 2019 (Week 13)

  • Testing and bug fixing
  • Buffer period
  • Code submission
  • Final feedback

Participation

I will use GitHub to publish all my code and get feedback from my mentors. I am also available and constantly connected with my mentors on the slack channel of Wikimedia Education Dashboard. I can communicate via email too.

About Me

Introduction
I was working as a data-analyst and web-developer in a startup named "iTech Mission" that worked on data provided by the United Nations, However, after the completion of the internship, I did not continue further because of the work environment which was not very learning. I have learned most of the coding from coding courses online or implemented them via personal projects to clarify further information and knowledge regarding the course material. I am an active member of many open-source organizations such as Women who code, women in machine learning and data science and Girlscript, where I am also an organizer to help introduce new students to technology and science.
How did you hear about this program?
I heard about Outreachy while attending community talk by Women in Machine learning and data science.
Will you have any other time commitments, such as school work, another job, planned vacation, etc, during the duration of the program?
I do not have any prior time commitments during the duration of the program.
What does making this project happening mean to you?
I have always been an avid user of Wikipedia. While understanding and contributing to the Wikimedia education dashboard project, I realized how vast and dynamic Wikimedia is as an open-source society. It is constantly working on improving and introducing tools that can be used by the developer community. Being a part of a project which is used by thousands and millions of users for managing campaigns and courses, without any cost and working mainly to improve UI/UX for the user is something of an honor in itself. Therefore, if selected to work on the following project, it will possibly be one of my greatest achievements so far.

Past Experience

I started working in the field of open source earlier this year in the month of March. I started working for "Techtonica" which is an open-source platform to introduce communities that lack representation in technology, by creating course material related to technology such as Node.js, React for them.
The following are the Pull request for each of the contribution made by me:-
https://github.com/Techtonica/curriculum/pull/704
https://github.com/Techtonica/curriculum/pull/673
https://github.com/Techtonica/curriculum/pull/663
https://github.com/Techtonica/curriculum/pull/640
I was also a contributor to Mozilla and worked on Taskcluster application. The following are the list of the contribution made by me:-
https://github.com/taskcluster/taskcluster/pull/1520
https://github.com/taskcluster/taskcluster/pull/1446
While working with for open-source I was learning frontend end development and created a web application to populate and analyze the data of Sachin Tendulkar(one of the most famous and able batsmen of India and the world) to determine whether he is the greatest player of his time and contemporaries. The link to the project is provided below:-
https://sachin-greatest-player.firebaseapp.com/
While contributing to the Wikimedia education Dashboard, I made the following Contribution:-
https://github.com/WikiEducationFoundation/WikiEduDashboard/pull/3448
https://github.com/WikiEducationFoundation/WikiEduDashboard/pull/3425

Details

Due Date
Mon, Nov 4, 12:00 AM

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMon, Nov 4, 2:52 AM
Aklapper changed the task status from Open to Stalled.Mon, Nov 4, 8:31 AM

Hi @ANURADHAJHA99, thanks for taking the time to report this and welcome to Wikimedia Phabricator! This task has no assignee, no projects associated, and looks like a template was pasted without filing in any information (not sure why). Is this about Outreachy? Is this related to T233243 somehow? Please elaborate. Thanks :)

ANURADHAJHA99 changed the task status from Stalled to Open.Mon, Nov 4, 1:56 PM
ANURADHAJHA99 set Due Date to Mon, Nov 4, 12:00 AM.
ANURADHAJHA99 updated the task description. (Show Details)

Hello @Aklapper, sorry for the confusion. I was trying to edit the following project proposal for Outreachy project "Convert Campaign pages to React". I am still editing the template, I saved the changes to view the template. Thank you.

ANURADHAJHA99 added subscribers: KhyatiS14, Ragesoss.
ANURADHAJHA99 updated the task description. (Show Details)Tue, Nov 5, 1:10 PM
ANURADHAJHA99 updated the task description. (Show Details)
ANURADHAJHA99 updated the task description. (Show Details)Tue, Nov 5, 1:12 PM

Thanks for creating a proposal! As we are past the deadline, if you would like us to consider your proposal for review, please move it to the submitted column. Thank you!

ANURADHAJHA99 added a comment.EditedWed, Nov 6, 2:01 AM

@srishakatux I wanted to clarify, have I taken the correct measures as required? Thank you very much for guiding.

@ANURADHAJHA99: If you did what was asked for, then you did what was asked for, yes. :P