What I did
After creating the project creation UI, I used my experience in contributing to the UI to improve the contributing document. I updated any references to tools such as Node.js and Jest with links to the webpages for these tools.
Goals
I think I mostly achieved my goals. The form has its data fields updated as they change. Although this data is not sent anywhere currently, with the way it is set up it should not take too much more effort for the form UI that I have created to perform its function. I would have liked to have aimed higher, but with the project still in a preliminary phase it is difficult to integrate the difference components together without them all being present.
How I did it
It was difficult to get the UI to look close to what I wanted, since I had to integrate what already exists and its CSS styling with my own additions. However, I managed to get it done by using the existing CSS stylesheet with my own component.
Since I had free rein over what I could use, within the limits of what already existed for the project (using React), I decided to use Material UI components to create the UI.
For the text input fields I used the TextField components, which was fairly straightforward. For the date field, I used MUI X DatePicker component. Validating dates manually is difficult to do, so the DatePicker component was perfect for this use. It also allowed for a more intuitive way to select a date than a simple text input. All of this was contained within Items in a a vertical Stack component container in order to arrange the inputs. In the App level, I placed the existing upload interface as well as my project creation form UI within a reverse horizontal Stack component.
What did I learn
I learned that open-source project creation can be an slow process. Waiting for code reviews and approval for changes can take a long time. With larger communities for a project, it would probably be a faster process since the community would be more organized, with more contributors to conduct code reviews.
I also learned a bit more about the Material UI library. I had previously learned about the library through previous projects but have never created a UI of my own using it. I had to chance to build my own UI from scratch using the library and found it very simple to use and find documentation for.
How did I leverage the community?
After I created the project creation UI, I asked in the community Slack channel if there were any further issues I could work on to add to my contributions. One contributor filed a few issues which I could work on. This is how I managed to start working on the issue to update the contribution document.
Top comments (0)