Written by Apurv Sonawane, recent graduate from Veermata Jijabai Technological Institute
Introduction
Hello! I’m Apurv Sonawane and I recently graduated with a Bachelor of Technology in Electronics Engineering from Veermata Jijabai Technological Institute, Mumbai. My journey into the world of open source began two years ago, and it’s been an incredibly rewarding experience. I’ve had the opportunity to contribute to a variety of organizations, each offering unique challenges and learning opportunities.
My passion for open source stems from the collaborative spirit and the chance to make a tangible impact on projects that matter. One day, while browsing the Linux Foundation Mentorship Program site, a project titled “Finalize the React-Frontend” by the Open Mainframe Project caught my eye. As someone who thrives on crafting seamless user interfaces and improving user experiences, I knew this was the perfect opportunity to leverage my skills.
Watch my final presentation here:
Overview of the Project:
The project centers around developing the front end for the Software Discovery Tool. This tool is designed to help developers find the best open-source software that meets their needs. By consolidating extensive research into a single, simplified search tool, the Software Discovery Tool allows developers to search through open-source software for zArchitecture/s390x for any Z operating system from any source, any repository, anywhere, all in one place.
The Software Discovery Tool offers several key benefits:
- Time and Resource Efficiency: It saves developers time and resources by providing a centralized location to find the software they need.
- Expert Maintenance: The tool is maintained by a team of open source experts, ensuring high quality and reliability.
- Standardized Backend: It features a standard backend, allowing developers to easily add their own software.
This project is ideal for developers looking for an easy yet impactful project to work on. It offers an opportunity to give back to the open source community and assist others in their journey.
I along with my co-mentee, Deveshi Dwivedi was selected for this project. Our role in this project involves developing the frontend for the Software Discovery Tool, enhancing the onboarding documentation, and updating data sources. The goal is to create a user-friendly interface that simplifies the software discovery process, making it more accessible and efficient for developers.
Pre-application task:
The OpenMainFrame organization consistently attracts the highest number of applications each year during the LFX mentorship program. The project I contributed to, in particular, received over 700 applications, making it the most sought-after among all the projects. Securing a spot in this highly competitive environment was no small feat—it required determination, skill, and a deep passion for open-source development.
One of the first tasks I undertook to gain an edge over other applicants for the mentorship program was to set up the Software Discovery Tool locally on my system. Given that I was (and still am) using Windows instead of Linux, this task proved to be quite challenging. Several commands and instructions were missing from the installation guide, so I had to figure things out on my own. Despite these hurdles, I received constant support from my mentors, Elizabeth Joseph and Divya Goswami, who guided me through the process. With their help, I was successfully able to set up the project on my local system.
The next task involved delving into documentation tools such as Read the Docs and Sphinx. I maintained a repository to showcase my proficiency in this area and worked on enhancing the documentation for the Software Discovery Tool. The comprehensive and well-structured documentation I created is now accessible here. This effort not only improved my understanding of the project but also ensured that future contributors will have a smoother onboarding experience.
Another significant task I completed was refactoring the Figma wireframe developed by previous mentees of the project. This involved reviewing the existing designs, making necessary improvements, and ensuring that the wireframe aligned with our current project goals and user experience standards. The Figma project can be found here
Throughout this period, I maintained regular communication with both of my mentors and was active on Slack, helping others who faced issues with the setup of the Software Discovery Tool. This constant interaction not only helped me learn from their experiences but also fostered a collaborative and supportive environment within the team.
Wrapping Up: Final Milestones in Developing the Software Discovery Tool
As my mentorship program comes to a close, I’m reflecting on the progress made in developing the frontend for the Software Discovery Tool (SDT). This journey has been both challenging and enriching, filled with opportunities to learn and contribute meaningfully to the project.
Building Upon the Foundation
My first task was to immerse myself in the existing SDT application, understanding the architecture and codebase handed down from previous mentees. This deep dive was crucial, as it provided the foundation upon which all subsequent improvements were built.
UI/UX Enhancements
A major focus of my work was improving the user interface and experience. Starting with Figma, I revamped the color scheme, removed the search page from the Documentation section, and redesigned the footer for a more cohesive look. These changes were aimed at enhancing the visual appeal and usability of the tool.
Codebase Refinement and Styling
To modernize the styling across the application, I integrated Tailwind CSS. This change not only streamlined the design but also improved the consistency of the user interface. I then undertook a comprehensive refactor of key components, including the navbar, search bar, footer, and carousel, aligning them with the updated Figma designs.
Alongside these visual updates, I cleaned up the codebase by removing redundant packages and dependencies. This effort was vital for improving the clarity and performance of the project, ensuring that the SDT frontend was both efficient and maintainable.
Enhancing Functionality
Functionality was another key area of focus. I implemented React routing to facilitate seamless navigation between different screens, addressed image border issues on the landing page, and fixed various display glitches in the navbar and footer. A significant addition was the new FAQ section, which I designed to improve information accessibility for users.
Enabling CORS for Backend
To connect react frontend to the Flask backend, I enabled Cross-Origin Resource Sharing (CORS). Since browsers block requests from different origins by default, I used the flask-cors extension to configure my Flask server to allow these cross-origin requests. This setup allowed frontend, running on a different port, to communicate seamlessly with the Flask server, enabling smooth data exchange between the two.
Structured Development
To maintain organization and manage ongoing development, I created a dedicated branch for the frontend code, where I consistently pushed updates. This approach helped keep the project well-structured and manageable, facilitating easier collaboration and further development.
Post Midterm: Final Stretch and Deployments
After the midterm evaluations, the focus shifted to completing and fine-tuning the frontend for the Software Discovery Tool (SDT). Here’s a breakdown of the final tasks that brought the project to its current state.
Codebase and API Integration
I started by creating a new branch specifically for the frontend code, ensuring a clean and organized repository. My next challenge was to thoroughly understand the HomeController API functions, which was essential for integrating the frontend with the backend. This led to the successful addition of the search and search exact features, which were then connected to the frontend, enhancing the tool’s core functionality.
UI Enhancements and Features
Styling improvements were a continuous effort, especially for the search results, which I refined to offer a more polished user experience. I also incorporated these search results directly into the landing page, ensuring that users could access relevant information right from the start.
To improve navigation, I implemented pagination, allowing users to customize the number of packages displayed per page. This was complemented by the addition of a scroll-to-top button, making it easier to navigate through longer lists of results. Furthermore, I introduced a checkbox that toggles the visibility of package descriptions, giving users control over the amount of information displayed.
Continuous Deployment and Testing
Recognizing the importance of continuous deployment, I created a new repository dedicated to this purpose and deployed the current version of the SDT on Vercel for testing. This deployment allowed for real-time feedback and testing, ensuring the tool was stable and user-friendly. Additionally, I added a link to the documentation in the navbar and enhanced its design to improve accessibility.
Final Adjustments and Collaboration
I worked on enhancing the search functionality by ensuring that homepage content is removed when a search query is executed, creating a more focused user experience. I also improved the responsiveness of the navbar and footer, ensuring that the tool functions smoothly across different devices.
Resolving CORS issues was another critical task that enabled seamless communication between the frontend and backend. I also contributed to the documentation by removing redundant sections, adding a data source section, and outlining steps for setting up the React frontend locally. These updates were crucial for maintaining a clear and accessible guide for future contributors.
Collaboration played a key role in the final stages of the project. I assisted Deveshi with the local setup, reviewed her draft PR, and suggested necessary changes. I also updated the documentation to the latest version and deployed it temporarily using my account to ensure that everything was up-to-date.
Ongoing Work and Final Touches
While the main tasks have been completed, some ongoing efforts include removing the Apache dependency and making the ibm-validated section consistent with other sources in the package_build file. Additionally, I fixed the navbar logo link to redirect correctly to the home page and enabled the Flask backend to run locally, which was crucial for a smooth development environment. Minor tweaks were made to facilitate the deployment of the application, ensuring it runs as expected in various environments.
Conclusion: A Journey of Growth and Learning
My journey as a Frontend Developer during this mentorship program has been an exhilarating adventure, marked by continuous learning, personal growth, and the joy of crafting user-centered digital experiences. Each step, from understanding user needs to collaborating with a diverse and talented team, has brought me closer to my goal of creating meaningful and impactful digital solutions.
I’m deeply grateful to have had such a supportive and patient team by my side throughout this journey. Their guidance and encouragement have been instrumental in helping me navigate challenges and grow as a developer. This mentorship has not only equipped me with new skills and knowledge but also reinforced the importance of resilience, collaboration, and continuous improvement. I look forward to applying these lessons in my future endeavors and continuing to contribute to projects that make a difference.
Stay tuned here and the Open Mainframe Project social channels for more mentee blogs and videos.
- Follow us on X at @Openmfproject
- Connect with our LinkedIn page
- Subscribe to our Youtube Channel
- Sign up to get our newsletter
