Epilogue: Signing off
Final Report GSoC'23⌗
…And now it’s a wrap!!
Yes my GSoC Journey has come to an end, and I am very elated to say that I have successfully completed my project. I have learnt a lot of new things and I am very grateful to my mentors for helping me out throughout the project.
For those, who are new here, let me give you a brief overview of my project.
Project Overview⌗
Name: Varun Shrivastava
Project Name: Improve the functionality of VideoCutTool
Organization Name: Wikimedia Foundation
My Proposal: Improve the functionality of VideoCutTool - Code Quality/Code Health
My Contributions: Gerrit
My GSoC Tasks/Activity: Phabricator
My Blogs: GSoC Blogs
Mentors: Sohom Datta, Gopa Vasanth
Project Description⌗
Let me quote the project description from the official GSoC project task:
VideoCutTool is a tool to edit videos in Wikimedia Commons. It’s widely used by the volunteers to edit videos on the fly and re-upload back to commons in simple few clicks instead of downloading video from commons and using external softwares to edit and re-upload.
The tool is built using Node, Express, React, PostgreSQL and uses FFmpeg for video processing. So my proposal aims to improve the tool by stabilizing the tool and fixing bugs.
So What Did I Really Do?⌗
Well I did a lot of things, but I won’t bore you out with all of them. For detailed information, you can check out my GSoC Blogs.
Since my proposal(as you saw on the title), aimed at improving the code quality/health, and improving the developer experience. So you won’t see my contributions (majorly) reflecting on the UI. Anyways let me give you a brief overview of some of the things I did.
1. Some Minor UI Improvements⌗
I did some minor UI improvements during the start, which included:
a. Making the notifications more informative⌗
So I made the notifications more verbose, by firstly updating the routes in the server side, to send the appropriate messages to the client side. Since we support internationalization( we use our own in-house package, called @wikimedia/react.i18 ), so I had to make sure that the messages are sent in the appropriate language.
b. Adding a volume slider⌗
Initially the tool didn’t have a volume slider, so I added a volume slider, which would allow the user to edit the volume of the video (like if the user wants to reduce the volume by some percent, or mute the video, etc).
2. Migrating from Create React App to Vite⌗
This was my first major task, and it was a bit challenging. So initially the tool was built using Create React App, but since my proposal aimed to reduce the build time of the client, so we decided to migrate to Vite. And so I had to make sure that the tool works fine after the migration, and also make sure that the tool is faster than before.
3. Handling the huge traffic on the tool⌗
So, when we magnify the scope of a project to a larger scale, we need to make sure that the tool is able to handle the traffic.
Before I could even begin with this, the tool had some bugs regarding sending data to the respective client. So firstly, I fixed it by sending the data to respective socket id (which asked the payload for), and not to all the clients. This kind of reduced the load on the server, and also fixed the bug.
Then for handling the traffic, I introduced a queue system, which would queue the requests, and process them one by one. This would ensure that the server doesn’t crash, and also the requests are processed in the order they were received. I used BullMQ (which is a Redis based queue system) for this, and it worked like a charm.
4. Adding tests⌗
At last I added some tests to the tool, which would ensure that the tool works fine. I added tests for the server side, and also for the client side. I used Vitest for testing the client side, which basically spanned across unit testing.
Server side testing was a bit challenging, since the tool uses FFmpeg for video processing, and FFmpeg is not available on the CI/CD environment. So I had to mock the FFmpeg commands, and then test the server side.
5. Setting up CI/CD⌗
Oh, and also, I set up the CI/CD for the tool, which would ensure that the tool is built and tested on every commit. Initially our codebase was hosted on Gerrit, and the Wikimedia Foundation uses Zuul for CI, which used node-16 for testing the codebase. But since we migrated to node-18, so I had to make sure that CI should be able to test the codebase on node-18, which was kind of challenging.
But then we decided to migrate our codebase to Gitlab, and write a custom script for running the tests and building. So there’s that.
Also for CD, I set up the beta server( we have a beta version of our tool, link here ), and so now whenever we push to the main branch, the code is automatically deployed to the beta server, and for reflecting this on prod, it gets synced with beta server every 15 days.
Major Contributions⌗
What’s Next?⌗
Well, I am not sure what’s next. I will be contributing to the tool, and will be fixing bugs, and adding new features. So if you are interested, you can check out the project, and contribute to it. I also plan to contribute more on other Wikimedia projects.
Acknowledgements⌗
I would like to thank my mentors Sohom, Gopa and Sudhanshu, for their constant support and guidance. I would also like to thank the Wikimedia Foundation for giving me this opportunity, and for organizing GSoC. Also my co-contributor Punith for helping me out throughout the project.
Special Thanks to org admins Sohom, Gopa, and Srishti, for helping me out with the project, and for organizing the GSoC meetups.
Here’s a snapshot of one such meet
I’m the one with green t-shirt (with my name written on my tile :-)).
Say Hi to Sohom, Gopa and Punith.
Conclusion⌗
So that’s it, I hope you enjoyed reading my blogs, and I hope you learnt something new. With this my GSoC journey comes to an end. Feel free to contact me, if you have any doubts, or if you want to discuss something.
Until next time, see ya!!