KWoC’21 | Project Report
About KWoC
Kharagpur Winter of Code is a 5-week long online program for students who are new to open source software development. The program not only helps students to get involved in open source but also prepares them for many open-source summer programs; Google Summer of Code is one of them.
Selecting Projects
KWoC features multiple project repositories from various domains with different technologies. It was a tough bet to select one. I decided to stick with the ones that aligned my area of interest and the technologies I was familiar with. My task was to implement new and core features related to the project or to make changes in the UI and enhance it further. Choosing a repository was a difficult task, after that the things got easy
The following is the list of repositories I finalized to contribute to:
Contributions
1. Feedify
Feedify is a simple course feedback system built using Reactjs that helps organizations and teachers to create feedback for their courses or services.
Tech-Stacks: Reactjs, CSS
Issue : Keep sidebar hidden by default in Mobile View
PR: This was a simple UI issue that I fixed using a package named react-responsive using media queries. I set the query such that when the screen is resized to mobile view, the sidebar gets hidden by default.
2. KWoC-Frontend
Frontend Repo for KWoC 21, build using React. This is the official repository of KWoC’ 21 used extensively throughout the program.
Tech-Stack: Reactjs, SCSS
Issue : Detailed and Searchable FAQ page
PR: This issue needed a lot of work. To create and render a dynamic and searchable list, I used Fuse.js, an NPM package built for this job. Initially all the FAQs were being rendered using markdown file as HTML using the react-markdown package, which was great, however to implement the solution, I created a JSON file to store all the FAQs as objects and then use Fuse.js to solve the problem. I used a package called html-react-parser and enclosed all the links with anchor tags in the JSON file, such that when we render we use this parser and the links get rendered as links.
3. Medi-Care
MediCare is a one-stop location to discuss different medical milestones, AI Disease prediction system, locate nearby hospitals to get proper medical care, and finally, a translator to get the whole web app in the language one is comfortable with and hence dissolve any communication barrier. This solution with shorten the gap between the people around the world in search of good healthcare and pave a path in the journey of recovery.
Tech-Stack: React.js, Python
Issue : Redesign the navbar
PR: This was a fairly simple issue. The navabar needed to be fixed to top and it’s designs needed to be enhanced. Easily resolved with some CSS code.
Overall Experience
It was a wonderful, fun, and learning experience that I had during the entire course of the program. I learned a lot and gained crucial skills through this time. The mentors were really supportive and guided us all the time. Overall it was an enlightening and fun journey that gave me wonderful insights into Open Source.