Profile Information

Name: Ahmed Amine Hassou
IRC nickname on libera.chat IRC (optional): AmineH
Web Profile: Aminehassou
Resume (optional): Link
Location (country or state): Morocco
Typical working hours (include your timezone): 4:00 PM to 4:00 AM (UTC+0)

Synopsis

This project's main goals are the following:

• Refactor all React class components into functional components : There are currently 25 class components that need to be refactored into functional components. Certain components will require more effort to refactor than others. Components that use a lot of deprecated class lifecycle methods will be harder to refactor. There is also a possible issue with class components that have complex state management. Since functional components only use hooks to store state, that might be more involved work here to make sure things render in the correct order. Although redux hooks can help take care of this too.
• Replace the remaining jquery code in the codebase with vanilla JS code: The main feature of the dashboard that still uses jquery is the surveys feature. As part of this rewrite, I will need to replace all jquery code in the Survey.js and SurveyAdmin.js files with vanilla JS. There's a few issues I may face while doing this, one of the bigger ones being the UI library currently being used by the survey system is a jquery library. Meaning we will need to find a good replacement for it. So far, the best candidate i've found for this is SortableJS. This is an open-source JS library that adds easy implementation for list reordering. This is most likely good enough for us since jqueryUI was mainly used to allow for reordering of survey elements in the admin panel. This library would also be more lightweight than jquery-UI because it has minimal features and is more up-to-date (the majority of jqueryUI assets have been deprecated since 2021)
• Update the dashboard's React version from version 17 to version 18: This is the most error-prone change that will be done. Updating to react 18 can cause a lot of issues with lifecycle methods (if strict mode is turned on) and will also require a replacement for the testing library we currently use (Enzyme) since it does not support React 18

these changes will greatly increase the code quality on the front-end side of the codebase. In addition, if we decide to use strict mode after the react upgrade, a lot of components will have to be rewritten to adhere to strict mode's "double render" test. As a result of this, components will need to have better clean-up logic. Allowing for more efficient re-renders and easier to catch bugs.

• Possible Mentor(s): Sage Ross
• Have you contacted your mentors already? Yes

Deliverables

Midterm Evaluation

• Refactoring class components into functional components should be almost done
• Replacing remaining jquery code with vanilla JS code should be done.

Final Evaluation

• Class component refactoring should be finished
• Upgrade react to Version 18

Timeline

Community bonding period

The main goal for this period will be to get more familiar with the codebase as whole through communicating with my mentor. The main hurdle that I can overcome through this period will be the actual react 18 upgrade. Since this upgrade will most likely affect a large portion of the codebase. Talking to my mentor about how to handle the upgrade and which issues to look out for will be important.

May 29 - June 12

• Start working on the component refactor. I will most likely start with smaller components first so I can get more comfortable with the refactoring process. Then move on into bigger components in the later weeks.

June 13 - June 20

• More work on component refactor
• Start work on replacing remaining jquery with vanilla JS. I will pick one of the two survey files to start with, and make progressive changes, replacing jquery with different DOM manipulation methods available in JavaScript (Document.querySelector() as an example)

June 21 - June 28

• More work on component refactor
• More work on jquery replacement

June 29 - July 5

• Finish up jquery replacement
• Start taking steps to setup for the react 18 upgrade. This will require a lot of trial and error. Especially when dealing with unsupported dependencies or odd rendering issues with strict mode.

July 6 - July 14 (Midterm evaluation deadline)

• Take feedback given from the Midterm evaluation and apply it to my work

July 15 - July 28

• More react 18 setup (refactoring unsafe lifecycle methods, cleaning up code)

July 29 - August 4

• Finish up component refactor
• More react 18 setup (look into component testing replacement for enzyme, since it’s unsupported)

August 5 - August 18

• Upgrading to react 18 and making any necessary bug fixes

August 19 - August 25

• More bug fixes

August 26 - September 4 (Final evaluation deadline)

• Take in final feedback and make final changes.

Participation

I plan to use slack as my main point of contact. I've been active in the Wiki Edu Dashbord slack for a while now and have been in contact with Sage Ross prior to the start of the application period.
As a secondary point of contact, I can be contacted through email.
I will also be available to contact through Github regarding any issues or pull requests that I make throughout the coding period.

About Me

• Education (in progress):
  • University: Undergraduate at Arizona State University
  • Year of study: Junior Year
  • Degree: Software Engineering

• How did you hear about this program?
  • I heard about this program through the Y Combinator HN forums.
• Will you have any other time commitments, such as school work, another job, planned vacation, etc, during the duration of the program?
  • No, I will be on summer break for the entirety of the program duration
• 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)?
  • No, I have not applied for outreachy, I have only applied for GSOC with the wikimedia organization
• What does making this project happen mean to you?
  • One of my favorite things to do is create software that can be used by other people. It’s why I applied for this program in the first place. This has been my first real experience with OSS and it has been great! I feel like working on this project will help me learn a lot and will also be very fun. As an added benefit, I am a big fan of what the Wikimedia foundation does and the idea that the code I’m writing can help people who use Wikimedia's tools and services is really cool.

Past Experience

• Please add links to any feature or bug fix you have written for a Wikimedia project during the application phase.

Pull Requests

Issues

• Describe any relevant projects that you've worked on previously and what knowledge you gained from working on them.
  • Devgator: Created a landing page for a web agency using ReactJS, NextJS, HTML/CSS, SCSS, Bootstrap. This was the first real project I worked on that wasn't a personal project. Meaning I had set deadlines to meet and a quality level to reach. This taught me a lot about how to manage time and how to work with my tech stack in a more efficient manner.
  • My Gaming Backlog: This was a passion project of mine that set out to solve an issue I was personally facing which is my ever-growing video game backlog. I built this website using Python/Flask, Javascript, MySQL, Bootstrap, IGDB API. This project was very ambitious for me at the time because it held a large database using mySQL and a pretty sophisticated Flask backend. I learned a lot from this project. I learned how to write using vanilla javascript (no frameworks!) and how to manage code quality. Learning how to write maintainable code was also great too (I worked on this project for a few months on-and-off)