Add the Random Generator Component to be displayed into the webpage

[Angeltheesoto]

PROBLEM:

Can you import it into the app.js file for it to be viewed in action on the web page? Thanks! I quickly tested it out on my local React server, and I see we need to play around with the styling of it. Can you add this and adjust the styling please😎

You will find this component here in the randomcontributor

Additional details from when this component was originally created in issue #36:

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. ⚛️

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

[XanderRubio]

Hi @Angeltheesoto! Thank you for sharing. At the moment, contributor @negar-75 is currently working on enhancing the header and the dummy_images, and the website presentation by working on issue #45. In the meantime, I have another issue you can help with that a contributor has worked on before by building out the component for it, but it now needs to be implemented into the app. JSX file to see properly.

I will go ahead and create that issue and assign it to you by editing this current issue. Thank you for spotting the issue with the header and being willing to open an issue and contribute. You are always welcome to open issues, and please keep doing so!

[Angeltheesoto]

@XanderRubio Sounds good, thank you for assigning the issue to me and I'll start working on it.

[XanderRubio]

@XanderRubio Sounds good, thank you for assigning the issue to me and I'll start working on it.

@Angeltheesoto Make sure you update your working branch on your local development to fetch the code for the random contributor component. And let me know if you need additional clarification and feel free to place the random contributor generator where you believe it looks best on the site. And we will go from there 👍🏻.