The Linux Foundation Projects
Skip to main content
Blog | Mentorship | Software Discovery Tool

Mentorship: Finalize React-frontend

By | August 30, 2024

This blog is written by Apurv Sonawane, Open Mainframe Project 2024 Summer Mentee

Overview of the Project: 

The project centers around developing the front end for the Software Discovery Tool of the OpenMainFrame organization. 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.

 

My 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:

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.

Progress So Far:

The journey of developing the frontend for the Software Discovery Tool has been a comprehensive and rewarding experience. My initial focus was understanding the existing Software Discovery Tool (SDT) application and the various pages it encompassed. This included delving into the codebase inherited from previous mentees, which provided a solid foundation to build upon.

One of the first tangible improvements was made in Figma, where I refined the color combinations, removed the search page from the Documentation page, and updated the footer design to create a more cohesive and user-friendly interface. Additionally, I addressed minor issues such as removing a redundant comma from OS_Software_List.json (#71), which was successfully merged into the main branch.

To enhance the overall styling of the application, I integrated Tailwind CSS. This allowed for a more consistent and modern design language throughout the project. Following this, I refactored essential components such as the navbar, search bar, footer, and carousel to align with the updated Figma designs. These efforts also included cleaning up and restructuring the codebase, removing unnecessary packages and dependencies, and streamlining the project for better clarity and performance.

Functionality and user experience were key areas of focus. I implemented React routing to enable seamless navigation between different screens, fixed the image border issue on the landing page, and addressed various display issues in the navbar and footer images. I also introduced a new FAQ section, which involved creating a new component and removing outdated elements, to enhance information accessibility for users.

A significant milestone was the connection of the frontend with the backend API. This involved understanding the HomeController API functions, adding a search and search exact feature, and configuring the search bar and related checkboxes. Additionally, I added CORS support for the Flask backend, which was crucial for smooth integration between the frontend and backend systems.

To ensure proper organization and ongoing development, I created a new branch for the frontend code, regularly pushing the completed code. This structured approach helped maintain a clean and manageable codebase.

Throughout the process, I maintained regular communication with my mentors, Elizabeth Joseph and Divya Goswami, and actively participated in Slack discussions to assist others facing setup and troubleshooting issues. This collaborative environment has been instrumental in overcoming challenges and ensuring continuous progress.

Currently, the application is functional and can be used effectively, but there are still enhancements to be made. In the coming weeks, I plan to implement additional features such as pagination and filters, which will further improve the user interface and overall functionality.

Overall, the project is progressing well, with a solid foundation in place and ongoing enhancements to both the user interface and functionality.

 

Stay tuned

Mentees will be blogging about their experiences. Stay tuned here and the Open Mainframe Project social channels for updates.