🟢 Add a contributor random generator React component that displays on the webpage

[XanderRubio]

This issue aims to create a random generator that thanks users from our open-source project on the live page. We were inspired by the promote-open-source-projectand you can see a similar implementation in action on the Rythm.js (randomly highlighted contributor on the demo page)🎉

To implement this feature in our React project, please consider the following guidelines:

• Placement: Think about where to best display the thank you message on the website so that it is clearly visible to users visiting the page. 🤔
• Fetching Contributors: Start by fetching the contributors' names. One approach could be to fetch them from the Conductors.md file. Explore ways to retrieve this information dynamically. 📥
• UI Design: The design of the contribution component is open to your creativity. Feel free to design it in a way that aligns with the overall look and feel of the website. The component should include the contributor's GitHub avatar image and a link to their GitHub account. 🎨
• Random Generation: Ensure that the generator regenerates to show a new contributor every time the web page is refreshed. This will provide a fresh experience for users. 🔀
• React Component: As our project is built with React, you will need to create a new React component specifically for this feature. Make sure to follow React best practices and consider the component's reusability and maintainability. ⚛️

🚨Please develop and work on this feature on the branch feature-random-contribution🚨

By implementing this random generator, we can express our gratitude to the contributors of our open-source project and create a positive and engaging experience for users. This will be especially useful when there are hundreds of contributors who have shared their Beofre I Die text and images.🙏

A Working example that can be viewed to reverse engineer and apply to this project ⬇️💻

https://github.com/BeforeIDieCode/BeforeIDieAchievements/assets/120526253/e2501202-51d8-4b6a-aa13-615cd3763386

[Jyotipal29]

@XanderRubio i want to work on this issue . could you please assign this to me

[XanderRubio]

Hi @Jyotipal29,

Thank you for your interest in this issue and your enthusiasm to work on the random generator React component! Assigning this issue to you now. Have a great day and I look forward to seeing your work😇

Xander

[Jyotipal29]

Hello @XanderRubio for fetching the user did u mean Contributors.md file or just guide me where can i find Conductors.md file

[XanderRubio]

Hi @Jyotipal29. Great question! For the time being, a record of all the contributors for this project will always exist in the CONTRIBUTORS.md. I'm thinking long term for this project if we decide to integrate a database feature then not all the contributors will be listed in the Contributors.json. I haven't thought about this before. Thank you for asking. What makes sense from your perspective as the idea of this project will be to have hundreds of thousands of contributors, and this will mean storing this information more easily in a database than having it all in a JSON file. Hmm. give me your thoughts on what is easier for now to fetch the contributors info from either the CONTRIBUTORS.md or the Contributors.json. I would like your insight Jyoti. Have a nice day!

Xander

[Jyotipal29]

Hello @XanderRubio for now i have fetched contributors from contributors.json file.

[XanderRubio]

Hello @XanderRubio for now i have fetched contributors from contributors.json file.

Thank you! I'm excited to see how you're contributing to this component, @Jyotipal29. I appreciate your time🙏🏻!

[XanderRubio]

Currently, this issue has been closed thanks to the contribution of @Jyotipal29 from pull request #57. Additionally a new issue #86 will be implementing the random generator component to be displayed on the site.