My Red Hat Open Source Contest 2021 journey

Hello 👋

In this article, I would be sharing my journey in the Red Hat Open Source Contest. I would be showcasing what I worked on, what I learned throughout the journey, and challenges-faced.

But before I start there might be a question in your mind.

• What is Red Hat Open Source Contest ❓

Red Hat Open Source Contest is organized by World's biggest open source company Red Hat . This year it started in April and ended on the 1st of July. You can select an open-source project of your choice and contribute to it. You get feedback on your code and it even gets included in a real project.

Also, you get to contribute to open source under the supervision of an experienced mentor from Red Hat. if you ever get stuck while contributing your mentors are always there to help you out.
While contributing you will learn a lot about various technologies and you will learn about various factors involved while building a product. it would also improve your communication skills.

💡 Selecting projects is one of the most important parts, while selecting projects make sure you select a project in a domain you are interested in.

I was quite interested in web development. so I was looking for web development projects and I found out Fodger's DHT which is a Decentralized peer to peer cloud storage platform. You can use Fodger's DHT to store your photos 📷 , videos🎥 , and other data 📁.

If I could describe the project in one word it would be pied piper : )

This was an idea and project of Prajith Kesava Prasad Who was also my mentor. Previously, I have done web development in javascript, but the world of python was a little bit new to me. Thanks to my mentor for helping me and introducing a whole new world of python. he helped me a lot while solving issues, I learned a lot from my mentor.

Currently, Fodger's DHT is in the stage of Implementation and was able to handle only one file at a request, so my first task was to make new API endpoints so that it could handle multiple requests. I solved this by introducing new endpoints in the backend. so every time a new file is uploaded it would send shards of the file to new endpoints of other nodes.

ohk now the problem of files was solved but.. suppose even if the user uploaded an image or a file how would the user know it got uploaded? we didn't have a gallery for that.

so we need to redesign and reimplement the upload flow for the user. this was one of the major updates for the project. it Included

• new animated side navigation.
• new entirely redesigned upload flow.
• new image gallery for showing uploaded images. it was easy to loop through the folder and display the files. but we do need a display them properly so users can really enjoy the app. we do need a feature to full screen an image, next image, and previous image. later I implemented this feature using Lightbox

here is a sneak peek of what it looks like now

fun fact those images we click by Prajith Kesava Prasad

not only that I did add a preview dialog so users can preview files before uploading them.

now since the upload part was done!! Now after these updates we do need a UX/UI through the app, but also the homepage should explain the idea of Fodger's DHT . this was my next task. Initially, the idea was to go with Partilce js to make a list of nodes, then insert images in them and display them. but particle js don't have support to multiple images. Then we shifted to Ts particles the community support for ts particles was so good that the maintainer of Ts particles Matteo Bruni helped us out. and later I was able to implement that. later we added animations also. but the home page has too many things on it. so wasn't up to the mark. Later while having our project discussion, I told my mentor about it. and we came with a completely new implementation of the home page.

Since almost every part of the project was updated only the signup and signing part was left so it also got redesigned and reimplemented.

So, Now Fodger's DHT is almost ready for users with its design and awesome features.

Here is a list of the Issues and solutions I have provided.

• Update homepage with new design :: new homepage ui
• Implement a new UI for signup/sign :: Sign in and Sign Up ui implemented
• Upload feature :: Upload page redesigned and re implemented
• Develop API endpoints to send shards of the file to multiple nodes in the network :: API endpoints to send file to multiple nodes in the network

During my whole journey while contributing to the project I got to learn a lot about Python and flask. Plus as a developer, my front-end and backend skills were tested and improved a lot. Redesigning the entire project writing CSS for the project. and the upload feature was one of the challenging parts.

In the end, my grip on Font end improved, I end up learning more advanced git (no more afraid of rebasing and merge conflicts 😅) My code is more readable now.

My whole experience of Red Hat Open Source Contest in one word !! Subarashī (wonderful !!)

Do not forget to visit the project repo and Give it is a star Fodger's DHT
if you wanted to start your open source journey, you can also participate in Red Hat Open Source Contest
If you have any other doubt related to RHOSC please leave a comment. I would be glad to resolve them.