I finally merged one more PR for hacktoberfest. If you are following my hacktoberfest series on dev.to, you would know that so far I have merged 2 PRs and this is my 3rd PR. On top of that, this will be my first actual programming PR.

Issue

I was initially looking for some proper backend issues, but did not find anything that I really liked, eventually I settled with this frontend issue where there was some issue with the responsiveness of the navbar of the page. The issue was on the mobile screen, where the user dropdown list would clip out of the screen. Also there was an ask to move the theme icon from the flex list to the top left corner of the screen.

Development

I am not a front end developer so this was quite challenging for me to do, I had to setup the nextjs environment on my machine and get the app running. Well this was not really difficult because this was just a couple of npm commands, But when I tried to run the app, I realized that there were a couple of environment variables that I forgot to setup. The env contained links to supabase project which was used for user management and some more dependancies. I tried to see what I can do in the readme.md but there was no mention for this. After some time I decided to ask this question on the issue. I got a reply pretty soon. It turns out that the documentation for these env variables was contained in learn.md. This was my first time encountering a file called learn.md. I felt so stupid.

It completed the setup by following the learn.md file. Then comes the development part, the tailwind and css which I hate the most in computer programming. If possible I would not wanna work with css in my life again. This was actually a pretty small change, but my inexperience in tailwind and css made this extremely challenging for me.

I finally raised a PR, which got merged pretty quickly without any issues. I was pretty relieved that there were no remarks on comments on my code changes because I did not wanted to touch front end again.

Conclusion

This was my first actual development issue and I learned a couple of things. First, look at the general structure of the repository and make sure you know what files you can use for help. For example I did not even knew that learn.md existed. Second, this is very specific, but download the tailwind extension on visual studio if you are working with tailwind on visual studio, this is a life saver, especially if you are not used to/ new to tailwind.