Intro...

This week, I worked on my second commit to a public open source repository. I felt a bit more comfortable after releasing my first committed branch and subsequent pull request last week, and I think this week went better. Sadly, I didn't get to work on a big well known repo this week as I couldn't find a free issue, but I was able to find a small project of a trip planning website that allowed me to revamp their UI design.

The issue ...

The issue I worked on contained changing the entire UI of a project. Having done some UI design classes as of recently, and working with Tailwind CSS for some side projects of my own, I felt comfortable approaching this issue.

The issue I contributed to can be found here: https://github.com/narasimha-1511/travel-planner-app/issues/1

The fix ...

To prepare the fix I had to setup the environment of the project. It was a React and Vite project with no CSS framework, just a basic HTML and CSS design.

The steps I took were as follows:

1. Reviewed the issue
2. Drafted up a design on Figma
3. Commented on the issue asking if my design was any good
4. After approval, forked and made a branch of the repo
5. Setup the Tailwind dependencies I needed
6. run the server / application
7. locate the files I would be working on

In order to prepare and actually make the fix, I had to locate the file I would be changing just like last week. At first I thought it was all one file, the App.jsx file in the components directory of the project, but it ended up being files of TripDetails.jsx TripForm.jsx TripList.jsx index.css app.css app.jsx, and my created tailwindconfig file.

Code ...

The code for my fix was a lot, as I practically redid the entire user interface for the project from scratch to match my Figma design proposal. I had to rework how every component displayed to the web and mobile views and it would be too much to even show here. The examples I can show are the before and after, with the differences being that before there were classNames of id's for the index.css and app.css files to make use of, and the after contains the inline styles used by me with tailwind CSS.

Code of App.jsx before the fix:

Code of App.jsx after the fix:

Previous Design:

Figma design proposal:

Final design implementation:

Final design mobile view:

In the new design you can see that I matched as closely as I could to the Figma, while also making necessary changes for viewability and scalability.

Difficulties ...

This project did not cause me any prior research and/or major difficulties as I am familiar with Figma, React, HTML, CSS and Tailwind CSS. I had never worked on a Vite project before, but that did not come as a hurdle to me and I was able to implement the necessary changes without issue. The biggest thing I faced was probably just avoiding the functionality of the code, and preserving the original feel of the application all while providing it with a fresh new interface

Maintainers ...

Overall I had very minimal interaction with the maintainer(s). It was a small repo so I am sure it is probably just the maintainer himself working on the project for now. In the future I would like to work on something bigger, possibly next week, but with a minor change this time. The maintainer seemed friendly from my little interactions with him, and I have submitted him a pull request to which I am still waiting on approval for as we are in very different time zones.

PR ...

My pull request for this week's post can be found here:
https://github.com/narasimha-1511/travel-planner-app/pull/2