beforeidiecode/beforeidieachievements

🌟An open source project that helps developers make their first pull request and contribute to open source projects. 🚀🎯 Developers can contribute by sharing what they want to do before they die. 💡🔗

Before.I.Die.Code.mp4

→ come look at our good first issues

Read this in other languages

BeforeIDieAchievements

🌟 Welcome to BeforeIDieAchievements , an open source project that helps developers make their first pull request and contribute to open source projects. View the live Link.

🚀🎯 What is BeforeIDieAchievements?

BeforeIDieAchievements is a platform to assist developers in getting involved in an open-source project and documenting their life goals. Developers can share their aspirations with an image and text describing what they want to accomplish before they die. Share your life goals and aspirations with others, reflect on what truly matters to you in life, and connect with like-minded individuals. Leverage the power of community to achieve your dreams. Before I Die Code is a platform for documenting your life goals, learning how to contribute to an open source project and is A GREAT BEGINNER FRIENDLY PROJECT. You can learn more about this project from this MEDIUM article or visiting the about.md file.

💡🔗 How to Contribute

Thank you for your interest in contributing to our open source project! We welcome contributions from software engineers like you. Here's how you can get started:

1. Check the CONTRIBUTION_GUIDELINES: This file contains instructions on how to contribute to the project. It provides details on the specific requirements for adding your "Before I Die" image and text to our photo gallery. Make sure to follow these guidelines to ensure your contribution is accepted.
2. Enhance the project: Take a look at the open issues and ROADMAP for the project. These are areas where you can contribute and make a difference. Choose an issue or task that aligns with your skills and interests. You can start by commenting on the issue to express your interest in working on it.
3. Create your own issue: If you have ideas of your own to enhance the project, don't hesitate to create your own issue. Describe your idea and the improvements you would like to make. This allows others to collaborate with you and provide feedback. Together, we can continually sharpen and improve our skills.
4. Submit your contribution: Once you have made your changes or additions, submit your contribution following the guidelines provided in the CONTRIBUTION_GUIDELINES.

Remember, communication and collaboration are key in open source projects. Feel free to ask questions, seek clarification, or request assistance from the project maintainers or other contributors. We value your contributions and look forward to working with you to enhance this project. Happy contributing! .

Getting Started

To get started with BeforeIDieAchievements, simply fork the repository and start contributing! We welcome all first-time contributors and are happy to help you make your first pull request. Check out the CONTRIBUTION_GUIDELINES.

🎉 License

BeforeIDieAchievements is licensed under the MIT License. See the LICENSE file for more information.

Contributors

We would like to thank all the contributors who have helped make BeforeIDieAchievements possible. Check out the CONTRIBUTORS file to see a list of all the amazing people who have contributed to this project. Additionally, view the THANK_YOU videos for each one of our contributor's work being recognized.

Contact

If you have any questions or feedback about BeforeIDieAchievements, please feel free to contact us. We would love to hear from you! For the time being you can contact me on LinkedIn or find my contact details on my website.

Thank you for your interest in BeforeIDieAchievements. We hope you enjoy contributing to this project, documenting your life goals and starring this repository!

Code Stack

The project is built using the following technologies and framework:

React	HTML5	CSS3	JavaScript	Vercel

Addtionally the emjois used for the Markdown files for this repo were created by Tarikul Islam Anik who created the repository Animated Fluent Emojis to assist with using the Microsoft animated fluent emojis being available in one place and ready to use in your next project or README file. The link to the website.

beforeidieachievements's Issues

🎨 Automatically Center Contributor's Text in MasonryBox Component

Problem:
In the MasonryBox component of our open-source project, we want to ensure that the contributor's text is automatically centered, regardless of whether the text is long or short. Currently, the text is centered nicely for contributors with long text (see examples below), but not for those with short text.

And here are examples of contributors' text being short, and we want to create code and reform in to enhance and also display text even if it is short, centered automatically in proportion with the masornytext box.

Solution:
PLEASE NOTE THAT THE IMAGES ABOVE WERE IN 100% BROWSER VIEW. PLEASE VIEW IN 100% AND THEN REASSESS WHICH CONTRIBUTORS TEXT NEEDS TO BE CENTERED BECAUSE OF SHORT TEXT
You will need to work inside the MasonryBox folder and enhance the MasonryBox.jsx and MasonryBox.module.css
The solution should involve creating a dynamic style that takes into account the number of characters in the input text. If the text is below a certain length, the style should automatically center the "Before I Die" text and the contributor's text within the MasonryBox component. This revised version provides a clear title for the issue, separates the problem and solution sections, and includes direct links to the example images. It also clarifies the expected outcome and the files that need to be modified.

[Feature Request] Add a clickable contribution page that displays all members who have contributed to the project.

Description

Hello @XanderRubio , i've read the roadmap and i saw this feature idea. I would like to try and make this if possible.
I was wondering if i have the same idea of how to implement this as you.
Adding a button next to the current GitHub button on the homepage.
After clicking the button you will go to a new page where you see all the contributors.
Like the screenshot in a grid but ofcourse with the names of the contributor under it and maybe a link to their github page?

-Marciano

Screenshots

Checklist

• I have checked for duplicate issues
• I have read the Contribution Guidelines
• I am willing to work on this issue (optional)

[Feature Request] Add a Contributors Button to the Home Page 🎨

Description

Add a Contributors Button to the Home Page

We need to implement a new button on the home page that directs users to the Contributors page. Currently, users can only access this page by manually entering the URL https://before-i-die-achievements.vercel.app/Contributors.

Task Details

This issue is open to anyone interested in contributing to the project's UI. We suggest placing the new button near the existing GITHUB REPO button and maintaining a consistent style in terms of appearance and functionality. However, we encourage contributors to bring their own creative flair to the design.

Please ensure the new button is easily accessible, visually appealing, and seamlessly integrated into the existing layout.

Tips to get started

This is a React project so you will need to add a button on the Header.jsx and lead the call path so that it displays the Contributors Grid component. The routing path has already been created in the index.js file using react-router-dom.

Screenshots

Checklist

• I have checked for duplicate issues
• I have read the Contribution Guidelines
• I am willing to work on this issue (optional)

🟢 Enhance the CONTRIBUTION GUIDELINES documentation for step 5

There is a need for clarity in the contribution guidelines on sharing and writing meaningful text and images to represent contributors.

This issue is related to feedback from contributor @ccelest1, mentioning that there should be clearer contribution guidelinesabout what people should post in terms of what they want to do before they die to ensure the application and project continue developers in the direction of professional and managing in the value it creates for users and developers.

I think it's recommended to enhance the description of step 5 in the contribution guidelines. Please take a look at the image below to explain. ⬇️

This issue can draw inspiration for crafting the descriptive text from the following:

1. Reflect on Your Goals and Aspirations:

• Take time to contemplate and identify what you want to accomplish or experience in your lifetime.
• Consider both personal and professional goals, adventures, relationships, and personal growth.
• Reflect on what truly matters to you and what brings meaning and fulfillment to your life.

2. Thoughtful and Meaningful Expression:

• When sharing your goals and aspirations, be thoughtful in your choice of words and images.
• Craft your message in a way that conveys the significance and value of your aspirations.
• Share your motivations, the reasons behind your goals, and how they align with your values.
• Consider using imagery that represents the beauty of life, the diversity of experiences, and the joy of pursuing meaningful goals.

3. Consider the Audience:
   Keep in mind that your text and images will be shared publicly, so consider the impact on others.
   Be respectful and sensitive to different perspectives and experiences.
   Aim to inspire and uplift others with your goals and aspirations, rather than imposing them.
4. Share with Intention:

• Choose the appropriate platforms or channels to share your goals and aspirations.
• Consider sharing with supportive communities, friends, or family who can provide encouragement and support.
• Engage in meaningful conversations and discussions around your shared goals, fostering connections and mutual inspiration.

5. Regularly Review and Update:

• Revisit your goals periodically to ensure they still resonate with you and reflect your evolving aspirations.
• Regularly review your progress and make adjustments as needed.
• Celebrate milestones and share updates with your community, inspiring others through your journey.

Remember, sharing your goals and aspirations is a personal choice. Consider what feels right for you and how you can authentically express your desires while respecting the privacy and feelings of others.

Drawing inspiration from The Before I Die I Want to Project

🟢 Add a Maps page that pinpoints users to the location they identified in the JSON file.

Create a Map page with a UI design map to display Contributors' locations; you can use the Python library called "Leafmap". Currently, info on where Contributors are based is located in the Contributors.json file and is structured in the following way. We might need to adjust how the JSON file is structured when reaching the phase of creating code to iterate over the JSON file and pulling users' locations, which are structured by a city name, country name, and flag emoji.

**🔨We can break this open issue into smaller issues as it might require several moving parts to execute

From the GitHub Repository fpdf2 that is a great example ⬇️

When viewing the map by the open source project fpdf2, they have the ability to click on the user's GitHub link and specific contribution to the project⬇️

Current steps to execute for this project or better yet reverse engineer how the map in GitHub Repository fpdf2 was constructed.

• 1. Create a new page component: Create a new React component that will serve as the page for displaying the world map and contributor locations. You can use the create-react-app command to create a new component or create a new file manually.
• 2. Install the necessary dependencies: Install any necessary dependencies for displaying the map and markers, such as react-leaflet or google-maps-react.
• 3. Fetch the contributor data: Fetch the contributor data from the JSON file or API endpoint and store it in the component's state or props.
• 4. Display the map: Use the map library to display a map of the world on the page. You can use react-leaflet or google-maps-react to display the map.
• 5. Add markers for each contributor: Iterate over the contributor data and add a marker for each contributor's location on the map. You can use the Marker component from react-leaflet or google-maps-react to add markers.
• 6. Customize the markers: Customize the markers to display information about each contributor, such as their name, location, and contribution details. You can use the Popup component from react-leaflet or google-maps-react to display this information.
• 7. Style the page: Style the page to make it visually appealing and easy to use. You can use CSS or a CSS framework such as Bootstrap or Material UI to style the page.

From research, the two options with documentation from others would be using Leaflet for React or integrating Google Maps React. This doesn't mean it has to be done this way. If you have another solution to creating a map to display users' locations, go for it!

Resources:

GitHub Repository fpdf2 - That has in the README section at the bottom a Map function that shows where all the contributors are located

Example of the map by the open source project fpdf2 - This shows all the contributors involved in the project in addition to link to the GitHub profile and their specific(s) contribution to the project for a pull request.

YouTube video for using React and Leaflet - Additionally, this channel demonstrates several more videos on the topic to customize the layering and popups of the map.

Medium Article for using React and Leaflet

Digital Ocean article on using Google Maps and React

Issue and Pull Request Templates

Problem

I noticed that this repository is missing templates for PRs and Issues.

Disadvantage

This can make it difficult for people who are very new to open source to have difficulty with sharing their contribution ideas and submit them.

Possible Solution

Create Issue templates for specific issues like Documentation, Bugs, Feature requests, Security, etc.

• See this example

name: General Issue
description: This template can be used for any type of issue, including bug reports, feature requests, and questions.
labels: ["general"]

body:
  ---
  **Title:** Describe your issue in a clear and concise title.
  **Description:** Provide a detailed description of your issue, including steps to reproduce it and any relevant error messages.
  **Environment:** Include information about your environment, such as the operating system, browser version, and any relevant software versions.
  **Attachments:** If possible, attach any screenshots, screen recordings, or other files that may help to diagnose the issue.
  ---

For pull request templates, you can add comments on how to link issues that are addressed in the PRs, how to show the solution, and specific steps needed to ensure that contributors are submitting their PRs properly.

Here's an example:

# Description

Please include a summary of the changes and the related issue. Please also include relevant motivation and context. List any dependencies that are required for this change.

Fixes # (issue)

## Type of change

Please delete options that are not relevant.

- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
- [ ] This change requires a documentation update

# How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration

- [ ] Test A
- [ ] Test B

**Test Configuration**:
* Firmware version:
* Hardware:
* Toolchain:
* SDK:

# Checklist:

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream modules

Benefits

This would help new contributors develop good writing habits when raising an issue and filling out a PR form. For maintainers, these tools would help them review these requests and determine if they align with the project's purpose.

[BUG] heartBeat and typing sound effects does not work correctly

Description

in the footer component, the heartBeat and typing sound effects should work properly onMouseEnter and onMouseLeave but they don't.

Screenshots

No response

Any additional information?

No response

What browser are you seeing the problem on?

No response

Checklist

• I have checked for duplicate issues
• I have read the Contribution Guidelines
• I am willing to work on this issue (optional)

[Feature Request] Implementing lazy loadings for MasonryBox

Description

As the number of contributors grows ,the good approach to handle rendering these components is implementing lazy loading which every component in the point of view renders not all of them!

Screenshots

No response

Checklist

• I have checked for duplicate issues
• I have read the Contribution Guidelines
• I am willing to work on this issue (optional)

🔴 Note add a docker file

As a reminder, think of adding a YAML file for containerization with Docker.

Add the Random Generator Component to be displayed into the webpage

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 ⬇️💻

Example.mov

[Feature Request] Create button to direct to Contributor Page

Description

Please create a button on the website's main page to direct users to the Contributor Page.

Ideally, place the Contributors Button Below the Contributors button and title it CONTRIBUTORS MAP and also rename the CONTRIBUTORS button to CONTRIBUTORS LIST. For now, please keep it the same style as the other buttons. Thank you!

Screenshots

Please place the button here:

It will direct you to this page:

Checklist

• I have checked for duplicate issues
• I have read the Contribution Guidelines
• I am willing to work on this issue (optional)

auto translation for "before I die " title based on IP

🟢 Spanish Translation NEEDED for documentation

Spanish translation is needed for the following files:

• README
• CODE_OF_CONDUCT
• CONTRIBUTION-GUIDELINES.md
• LICENSE
• about.md

Please add these files in the empty Spanish section.

And please work off the branch spanish-translation for organization purposes.

Modeling after the GitHub Repository first-contributors

🟢 🎨 UI Design for the text box that displays contributors text

Problem:

Great feedback from the contributor @ccelest1 on how the rainbow text background can be distracting. It would be ideal if either people decide what color they can have for the background of the text or if it can be changed to a more neutral and pleasing color scheme. After thinking of this more, it would be ideal for theming the text box after the Before I Die Wall Project.

This requires UI research to see what displays are best, in addition to considering changing the use of the emojis. It could be better suited from a design view only to have the text "Before I Die..." and the contributors before I die text. This project can be modeled after the Before I Die Wall Project, where the textbox is of a similar black wall chalkboard with the following image and the idea of using various different randomized chalk text color for contributors' text they share for what they want to do before they die. Additionally, another thought is to customize the "Before I Die" bold text that is found in the CSS on line 165 of the MasonryBox.module.css and have that automatically be displayed and translated to a different language depending on where the contributor is contributing from. This would be another issue to create.

You would need to edit in the MasonryBox file editing the React.jsx and CSS.

Please work on the branch feature-48 for this issue.

Image of what a Before I Die Wall looks like ⬇️

For more ideas, view the Beofore I Die Toolkit material below ⬇️
Before I Die Guide.pdf
Before I Die column.pdf
Before I Die large title.pdf

Current layout ⬇️

Resources for ideas 📚:

• Chalkboard Repo potential idea

• Check out the codepen for this repo as the background of the chalkboard could be good to use for the text box instead of the blue and yellow rainbow box

[Feature Request] Please enhance the UI of our Random Contributor Component

Description

This is a longer design UI enhancement project.

Please enhance the UI of the show button that then displays a random contributor's name and clickable image to their GitHub account.

The idea here would be to rearrange this in regards to where it is displayed on the website and place it below the header component and above the MasonryLayout Component. The idea would be to have the text Thanking Our Before I Die Contributors and then showing a slick and professional UI card display of our contributors GitHub avatar and set it to use the random shuffle display algorithm that is seen when viewing the RandomContributors Component so it randomly acts as a slide show cycling every 5 seconds as an example.

Please see below this image of the potential idea. I've included it for you.I've included for you

Screenshots

Here is where the newly designed RandomContributors Component needs to go

Here is a potential rough sketch of how the RandomContriubtor could be presented. Note that please don't follow the font or exact designing. This is to get you thinking of how to present this component to highlight our contributors and should blend well with the rest of the site this far.

This section is being pushed up from the issue #190. And if it still needs to be assigned, you can work on both.

Checklist

• I have checked for duplicate issues
• I have read the Contribution Guidelines
• I am willing to work on this issue (optional)

[BUG] Overlapping Cards

Description

The Thank-you card is overlapping the profile card of contributers

Screenshots

Any additional information?

Apart from this bug in the header page the text section seems vague/empty in mobile mode

@XanderRubio Pls Review and assign these tasks to me and if possible make this hacktoberfest friendly

What browser are you seeing the problem on?

Chrome

Checklist

• I have checked for duplicate issues
• I have read the Contribution Guidelines
• I am willing to work on this issue (optional)

[Feature Request] Scroll back to top button

Description

Feature:

We could create a button that appears into view when the user reaches a certain point down the page. When the user clicks the button it will make the page scroll back to the top. This will let the user quickly go back to the top of the page without having to manually scroll.

Possible solutions:

Create a button tag with an onClick that takes in a "scrollToTop" function. Inside the scrollToTop function, defined in app.js, you can use the following:

window.scrollTo({ top: 0, behavior: smooth })

this will scroll the user back to the top.

Screenshots

No response

Checklist

• I have checked for duplicate issues
• I have read the Contribution Guidelines
• I am willing to work on this issue (optional)

1️⃣ Make your mark: Contribute to our project and help us create a platform for documenting life goals and aspirations!

We need more contributors to add their information to the JSON file and include two images that will then be seen on the Before I Die Code image gallery on the website. To contribute and start, first read the README and then begin following along on our CONTRIBUTIONS-GUIDELINES file. Let's get after it!!!!

🟢 Mandarin Chinese Translation NEEDED for Documentation

Mandarin_Chinese translation is needed for the following files:

• README
• CODE_OF_CONDUCT
• CONTRIBUTION-GUIDELINES.md
• LICENSE
• about.md

Please add these files in the empty Mandarin_Chinese section.

And please work off the branch mandarin-chinese-translation for organization purposes.

Modeling after the GitHub Repository first-contributors

Two new tabs are opened when click on profile

Click on any of the profile two tabs are opening

[Feature Request] 🎨Adding a Location Map Component Flyover feature inside the Masonry Box

Description

This will be the most challenging issue that currently is an open issue

The goal of this issue is to add a location map feature for each contributor in the MasonryBox component. When users click on a contributor's image, a map displaying the contributor's location should appear below their name and profile image. The map should have a Google Earth-like flyover effect when transitioning to the contributor's location.

To implement this feature, the following steps should be taken:

1. Create a separate LocationMap component that will display the map with the contributor's location.

2. Use a map library like Google Maps API with the Maps JavaScript API for rendering the map.

3. Use a geocoding API service like API Ninjas to convert the location value from the Contributors JSON data into latitude and longitude coordinates.

4. Integrate the LocationMap component into the MasonryLayout component.

You can either work on the existing feature-location-map branch or create a new branch if you prefer a different approach. The current implementation displays the Google Maps, but the latitude and longitude coordinates for each contributor need to be fetched and displayed correctly.

Please note you will need to get API keys for Google Maps and API Ninjas. We have created a .env.example file in the repository with the following content:

REACT_APP_GOOGLE_MAPS_API_KEY=
REACT_APP_API_NINJAS_KEY=

To set up the API keys, follow these steps:

• Copy the .env.example file to a new file named .env in your local project directory.
• Replace the placeholder values with your own API keys for Google Maps and API Ninjas.
• Make sure the .env file is added to the .gitignore file to prevent it from being accidentally committed to the repository.
• By following these instructions, you can set up the required API keys and work on the feature branch without any issues.

Screenshots

The current Implementation on the feature-location-map

The Data that is being returned

Issue of undefined

GOAL AND AIMING HIGH FOR THE FEATURE ⬇️⬇️

Screen.Recording.2023-09-20.at.01.30.43.mov

🎨 Enhance Masonry Box with Contributor's Name and GitHub Profile Link

Problem:
When a user clicks on a masonry box, we want to display the contributor's name and GitHub profile, making it clickable and directing to the user's GitHub profile.

Currently, when a user clicks on an image, only the text describing their life goal is displayed. We want to enhance this by displaying the contributor's image and name, making it easier for viewers to see who wrote the text and access their GitHub account. Contributors are encouraged to add neat CSS designs or enhancements as they see fit.

Solution:
To address this issue, the contributor should work within the MasonryBox.jsx file. Additionally, they will need to refine the process of fetching the contributor's GitHub avatar and link from the MasonryLayout.jsx file.
Consider including a small GitHub emblem for additional UI enhancement. The primary objective is to enable viewers to identify the author of the text below the Before I Die code and click on their image and/or name to be directed to their GitHub profile.

[BUG] Solving dependency errors to be able to run code

Description

This is an issue with the packackages.json, and we would love to have assistance on how to navigate and fix this error so that when cloning this repo for the first time and running npm i, the following screenshot doesn't show these errors, and additionally this issue is affecting the preview deployment from being built.

Screenshots

Checklist

• I have checked for duplicate issues
• I have read the Contribution Guidelines
• I am willing to work on this issue (optional)

Add Footer NEEDED 🟢

Webapplications is currently missing a footer. For the time being, this project is a single-page application. Degian and integrate a footer with the following message: Made with 💙 by the Before I Die Community and from here create a link that links back to this project repository for now.

Add animation to the heart by using font awesome open source-free icons. Font awesome.

An example of what one could do for the heart animation from the font-awesome website ⬇️

Screen.Recording.2023-08-22.at.21.11.25.mov

[Feature Request] Add coding icon to the footer and onMouse event for sound

Description

This issue aims to modify the footer by replacing the word Made with the code icon from Font Awesome. Please use the selected code icon and feel free to choose additional settings while ensuring the color remains consistent with the provided value FEEA3A or RGB 254,234,58.

Additionally, implement an audio feature that triggers a keyboard typing sound when the mouse hovers over the icon. The sound should resemble the noise made when typing on a keyboard during coding.

Lastly, update the text Before I Die Community in the footer to redirect to the Before I Die GitHub organization page.

Screenshots

Checklist

• I have checked for duplicate issues
• I have read the Contribution Guidelines
• I am willing to work on this issue (optional)

[Feature Request] Light and dark theme

Description

Light and dark theme

Feature:

We could create a simple light and dark mode for the user to toggle between.

Possible Solution:

• We can create two icons at the footer so it is not to distracting with all the other elements in the hero/header. We can use react icons to display a sun and moon as the buttons and highlight whichever is active.
• We can use localstorage to save the users preference for the light and dark mode. In order for the theme to be accessible across the whole application, we can utilize "useContext" that will wrap our app in the index.js file and provide a "theme" and "setTheme" as props in a context file. The context file can contain the following as a possible implementation:

import React, { useContext, useState } from "react";

const ThemeContext = React.createContext();

export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState(true);

  const toggleTheme = (isLight) => {
    setTheme(isLight);
    setLocalTheme(isLight)
  };

const setLocalTheme = async (value) => {
      try {
        await localStorage.setItem("theme", value.toString());
      } catch (err) {
        console.log("Error setting local theme: ", err);
      }
    };

  return (
    <ThemeContext.Provider value={{ theme, setTheme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

export const useTheme = () => {
  return useContext(ThemeContext);
};

• And then in the index.js we simply wrap our context like so:

import { ThemeProvider } from "./context/ThemeContext"; // new line

... morecode

<ThemeProvider> // new line
  <React.StrictMode>
     <RouterProvider router={router} />
  </React.StrictMode>
</ThemeProvider> // new line

... more code

• Now that our theme variable can be accessible throughout our whole application all we have to do is run the "toggleTheme" or "setTheme" to toggle the light/dark theme:

import { useTheme } from "./context/ThemeContext";

function ExampleComponent() {
     const { theme, setTheme, toggleTheme } = useTheme();

   ... more code
}

• As for the localstorage, we can initialize a default theme in the app.js like so:

  const initializeLocalStorage = async () => {
    try {
      const localTheme = await localStorage.getItem("theme");
      if (!localTheme) {
        localStorage.setItem("theme", JSON.stringify(theme));
      } else {
        const parsedTheme = JSON.parse(localTheme);
        setTheme(parsedTheme);
      }
    } catch (error) {
      console.log("Error initializing LocalStorage:", error);
    }
  };

  useEffect(() => {
    initializeLocalStorage();
  }, []);

• When changing the color of the application we can use css custom properties:

div[data-theme="light"] {
   color: "black",
   background-color: "white"
}

div[data-theme="dark"] {
   color: "white",
   background-color: "black"
}

• In the components where we want the styles to be applied, all we have to do is add the following:

import { useTheme } from "../../context/ThemeContext";

function ExampleComponent() {
const { theme, setTheme, toggleTheme } = useTheme();

... more code

<div data-theme={theme ? "light" : "dark"}> 
... more code
</div>
}

... more code

• In summary, this should allow the user to toggle the light/dark theme and save the following theme in the localstorage so that when the user leaves and returns to the application, they will still have their preferred theme.

Screenshots

No response

Checklist

• I have checked for duplicate issues
• I have read the Contribution Guidelines
• I am willing to work on this issue (optional)

[BUG] Can't tap on show random contributor button on small screens

Description

When viewing website on mobile devices the show random contributor button is inaccessible as the text "an open source project" is overlapping it giving a little padding to the text will resolve the issue.

Screenshots

Any additional information?

No response

What browser are you seeing the problem on?

No response

Checklist

• I have checked for duplicate issues
• I have read the Contribution Guidelines
• I am willing to work on this issue (optional)

[Feature Request] Add a randomization feature to the Contributor Page

Description

Description: When viewing the Contributor page that utilizes the Contributors Grid component, the contributors' cards should be displayed in a random order every time the page is visited or refreshed. This feature should be similar to the implementation in the MasonryLayout.jsx file on line 23, where the user array is shuffled using the following code snippet:

const shuffledUsers = users.sort(() => Math.random() - 0.5);

The goal is to apply a similar approach to randomize the order of the contributors' cards on the Contributor page.

Screenshots

Checklist

• I have checked for duplicate issues
• I have read the Contribution Guidelines
• I am willing to work on this issue (optional)

🟢 Create responsive screen adaptation to show up well during web screen change and mobile change

Ensure efficient screen adaptation for Before I Die Code on all devices. Fix header for logo, Github link, and avatar. Possible issues with Logo.gif and Nav.jsx component structure. Focus first on the adaptation of the web screen and then focus on the module screen. Ideally would like to create a milestone to adapt the code for React Native and make it mobile-friendly.

Would need to fix for web responsiveness:

• The header of the Logo.gif and Github avatar
• When USER is clicked on the image of a contributor to see their text, fix the text to adjust and adapt to the screen size

Current web responsive when reducing web screen⬇️

Needs.to.be.more.responsive.1.mov

FIx the contributor's text to be responsive ⬇️

FIx the contributor's text to be responsive ⬇️ VIDEO

VIDEO.text.responsiveness.mov

Current mobile responsive ⬇️

Mobile.responsiveness.mov

Would need to fix for mobile responsiveness:

• The header of the Logo.gif and Github avatar
• Would need to adjust the text "An Open Source Project"
• Fix the dummy images being displayed in the background behind "An Open Source Project"
• Reformat contributors bid_image and avatar image
• When clicking on each contributors photo, fix the display text of their answer for "Before I Die"

[Feature Request] Move a section of the header to improve UI

Description

Please level out the below section so that the Contributors Map at the bottom of the button lines up with the bottom of the dummy_image box. Please see the below image.

Screenshots

Checklist

• I have checked for duplicate issues
• I have read the Contribution Guidelines
• I am willing to work on this issue (optional)

the location of contributors is not shown in firefox and safari

Description

when I click on each contributors I couldn't see the map of theri location

Screenshots

Any additional information?

No response

What browser are you seeing the problem on?

No response

Checklist

• I have checked for duplicate issues
• I have read the Contribution Guidelines
• I am willing to work on this issue (optional)

[Feature Request] Change text font to be Chalk-3

Description

Please change the font of Before I Die... found in the MasonryBox component and use the Chalk-3 font.

Let me know if you have any questions!

Screenshots

Checklist

• I have checked for duplicate issues
• I have read the Contribution Guidelines
• I am willing to work on this issue (optional)

The avatar image should be as per the image size or else they are moving out of the image div

The avatar does not match the image appropriately.

@lucasfirmo62 Please take time and think what you want to do before die and share it

Hi @lucasfirmo62,

Please take time and think for yourself what you want to live and accomplish in your life and share that. Before I Die, Code is meant to help developers learn how to contribute to the open-source community and then learn and define for themselves what they want to do in life. I've already merged your previous text and bid image, but please go ahead and create a new pull request with this image and text updated to better represent you and the life you want to live for yourself. Thank you! Additionally, this helps ensure this project maintains a high standard of what developers share and shows professionalism. Thank you again for translating the French documents! Merci!!!

[Feature Request] Add footer to other two pages

Description

Please add the footer from the main to be displayed on the Contributor Map page and, additionally, the Contributors list page.

The footer component can be found here.

Please let me know if you have any questions, and please wait to ask to be assigned, then be assigednd then work on the addition and submit your pull request. Thank you!

Screenshots

Footer from main:

Place this footer on these two pages additionally:

Checklist

• I have checked for duplicate issues
• I have read the Contribution Guidelines
• I am willing to work on this issue (optional)

[Feature Request] RTL Language Support

Description

Unlike English and others, some languages are written from Right-To-Left (RTL), which can sometimes be challenging when translating.
On the main page, I noticed that it translated to my language which is in Hebrew but instead of putting the '...' after the sentence, it put it before.
I will now add a little adjustment that will include some of the RTL languages that were mentioned in #101.
Feel free to fix or add more in the future to support your own language.

Possible Solution:

Create an array that will hold the wanted RTL language codes in such a way that it is easy to concatenate.
in \src\Components\MasonryLayout\MasonryBox\MasonryBox.jsx line 48' .

 const RTL_LANGUAGES = ["ar", "he", "az", "dv", "ku", "fa", "ur"];
  const BIDText = (
    <span className={styles.boldText}>
      {RTL_LANGUAGES.includes(languages[ipObj.ipInfo?.country_code]) ?
        <div className={styles["bid-text"]}> ...{t("BEFORE-I-DIE")} </div> :
        <div> {t("BEFORE-I-DIE")}... </div>
      }
      <br />
    </span>
  );

Screenshots

Before changes:

After changes:

Checklist

• I have checked for duplicate issues
• I have read the Contribution Guidelines
• I am willing to work on this issue (optional)

🟢 Improve the font for Contributors text entered and title "Before I Die"

Enhance the user interface by changing the font of the Before I Die text that displays when clicking on a contributor's Before I Die image. See the image below ⬇️

This is a great opportunity for a contributor to use Google font and add this to change how the MasonaryBox.jsx uses a font for the "Before I Die" text and what users say inside this text box.

When selecting fonts for the user interface of your "Before I Die" code project, you may want to consider clear, legible fonts that evoke a sense of warmth and personal expression.

Here is a list of potential fonts to think about for use.

• Fira Code
• Source Code Pro
• DejaVu Sans Mono
• Consolas
• Monaco
• Arial
• Times New Roman
• Helvetica
• Cambria
• Garamond
• Quicksand
• Prensa
• ITC Lubalin Graph
• Amsi Pro
• Posterama

Experiment with this list or find a font that makes the text appear professional and clean and emulates the personal expression of contributors who share their Before I Die text.

Expand Language Support for "Before I Die" Based on User's IP Address

Description: This issue aims to enhance the "Before I Die Code" project by adding more translations for the text "Before I Die" based on the user's IP address. We currently have six languages in the locales folder, and we're using react-i18next for translations. Every time a pull request is closed, this list will be updated with the languages that have been added by contributors:

The following list represents the languages that are still missing and need a translation.json file added to our open-source code:

• nl - Dutch
• sv - Swedish
• no - Norwegian
• da - Danish
• fi - Finnish
• ru - Russian
• zh - Chinese
• ja - Japanese
• hi - Hindi
• ko - Korean
• ms - Malay
• id - Indonesian
• tl - Tagalog
• th - Thai
• vi - Vietnamese
• tr - Turkish
• el - Greek
• he - Hebrew
• ar - Arabic - added by contributor @sherikovic
• af - Afrikaans
• sw - Swahili
• pl - Polish
• ro - Romanian
• bg - Bulgarian
• uk - Ukrainian
• cs - Czech
• sk - Slovak
• hu - Hungarian
• sl - Slovenian
• hr - Croatian
• sr - Serbian
• bs - Bosnian
• mk - Macedonian
• sq - Albanian
• lt - Lithuanian
• lv - Latvian
• et - Estonian
• is - Icelandic
• fa - Persian
• ur - Urdu
• ps - Pashto
• bn - Bengali
• ne - Nepali
• si - Sinhalese
• my - Burmese
• km - Khmer
• lo - Lao
• mn - Mongolian
• dz - Dzongkha
• kk - Kazakh
• uz - Uzbek
• ky - Kyrgyz
• tg - Tajik
• tk - Turkmen
• ka - Georgian
• hy - Armenian
• az - Azerbaijani
  Steps to complete this issue:

1. Translate the text "Before I Die" into additional languages. This text is displayed when clicking on a contributor bid image ⬇️

2. Create a JSON file for each new translation, following the format:

{
  "BEFORE-I-DIE": "Translation in the target language"
}

3. Add the new language JSON files to the locales folder. Be sure to title this file translation.json
4. Update the i18n configuration to include the new languages. In the i18n configuration code, add the new language resources by importing the JSON files and including them in the resources object. For example:

import i18n from "i18next";
import { initReactI18next } from "react-i18next";

i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    resources: {
      en: {
        translation: require("./locales/en/translation.json"),
      },
      // Add new languages here
      newLanguageCode: {
        translation: require("./locales/newLanguageCode/translation.json"),
      },
    },
    lng: "en", // Set the default language
    fallbackLng: "en", // Fallback language if a translation is missing
    interpolation: {
      escapeValue: false, // React already escapes by default
    },
    returnNull: false,
  });

🟢 Hindi Translation NEEDED for Documentation

Hindi translation is needed for the following files:

• README #65
• CODE_OF_CONDUCT #153
• CONTRIBUTION-GUIDELINES.md being worked on by @abhinaba-dash
• LICENSE added from pull request #35
• about.md added from pull request #193

Please add these files in the empty Hindi section.

And please work off the branch hindi-translation for organization purposes.

Modeling after the GitHub Repository first-contributors

[Feature Request] Make The Scroll to top button a little smaller and transparent.

Description

Currently, the 'scroll to top' button occupies a considerable amount of space and overlaps BID images, especially on mobile devices it looks a bit off. Reducing its size and making it more transparent would give it a sleeker appearance and improve the user interface.

Screenshots

Now

After some small changes

Checklist

• I have checked for duplicate issues
• I have read the Contribution Guidelines
• I am willing to work on this issue (optional)

Make your mark: Contribute to our project and help us create a platform for documenting life goals and aspirations!

We need more contributors to add their information to the JSON file and include two images that will then be seen on the Before I Die Code image gallery on the website. To contribute and start, first read the README and then begin following along on our CONTRIBUTIONS-GUIDELINES file. Let's get after it!!!!

It is a mistake for this issue to ever be closed. Since we are collecting contributor's text and images of what they want to do before they die. This is a continually ongoing issue and should always be open.

All successful merges receive an invite to join the Before I Die Community.

🟢 Update the Contribution Guidelines to reflect the new CONTRIBUTORS.md

Need to add a to the CONTRIBUTION-GUIDELINES to mention that the CONTRIBUTORS.md needs to explain how there is only to be a maximum of seven contributors per each column and that when a contributors is contributing and sees already column displayed above that they need to then close the and create a new tag. Give an example of this with a code block.

🚨This explanation needs to be added to Step 8 of the CONTRIBUTION-GUIDELINES🚨

Consider adding this text:

To add a new row to the table in the given markdown file, follow these steps:

1. Copy the last row of the table, including the and tags.
2. Paste the copied row below the last row of the table.
3. Replace the content of the cells in the new row with the information of the new contributor.
4. Make sure to update the column number in the tags to match the number of columns in the table.

For example, if the last contributor was in column 7 and you want to add a new row with a new contributor, you would copy the last row of the table, paste it below the last row, and update the content of the cells with the information of the new contributor. You would also need to update the column number in the tags to 8, since you are adding a new column.

• take away the alt text from the code in CONTRIBUTORS.md
• add to the CONTRIBUTION-GUIDELINES

🟢 Arabic Translation NEEDED for Documentation

Arabic translation is needed for the following files:

• README
• CODE_OF_CONDUCT
• CONTRIBUTION-GUIDELINES.md
• LICENSE
• about.md

Please add these files in the empty Arabic section.

And please work off the branch arabic-translation for organization purposes.

Modeling after the GitHub Repository first-contributors

🟢 Clarify instructions for dummy images in contribution guidelines, enhance design 🎨

Problem🤔

Contributor @ccelest1 pointed out that the contribution guidelines do not provide clear instructions for dummy_images. For example there role and purpose. We should update the contribution guidelines to provide clearer instructions for what is the purpose of the dummy_images. This led us to think about expanding in the Contribution Guidelines what the dummy_images are and additionally, we can work on adding a section in the files to have users add high-quality images of dummy images to be later displayed on rotation when a user is viewing the website.

Current view of the static dummy images on the home page⬇️

Task⛏️🪚🔨
(https://github.com/BeforeIDieCode/BeforeIDieAchievements/tree/feature-dummy_image)

• Will need to define what the design of the dynamic dummy_images looks best on the home page. Currently there are ten images displayed
• Add into the contribution guidelines the purpose of the dummy_images and how user submit them, the image quality, image standards
• Develop the ability to have dummy_images display on rotation. This will need to be done in the BrickLayout file.

🌲 Please work on this issue on the branch [feature-dummy_image]

** IF NEEDED, WE CAN CREATE INDIVIDUAL ISSUES FOR EACH OF THE TASKS ABOVE

Please see the two code examples below ⬇️ for ideas on how to address the BrickLayout Component

1️⃣ To allow contributors to upload dummy images to your open source project and display 9 images at a time (as an example) in a randomized manner, you can modify the BrickLayout component as follows:

1. Pass the images uploaded by contributors as props to the BrickLayout component.
2. Use the useState hook to store the shuffled array of images.
3. Use the useEffect hook to shuffle the array of images whenever it changes.
4. Use the slice method to display only 9 images at a time.
5. Use the setInterval method to rotate the displayed images after a certain interval.

import React, { useState, useEffect } from "react";
import styles from "./BrickLayout.module.css";

const BrickLayout = ({ images }) => {
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCurrentIndex((currentIndex + 1) % images.length);
    }, getRandomInt(5000, 10000));
    return () => clearInterval(intervalId);
  }, [currentIndex, images]);

  const displayedImages = images.slice(currentIndex, currentIndex + 9);

  return (
    <div>
      <div className={styles["blur-circle-shape-two"]}></div>
      <div className={styles["brick-layout"]}>
        <div className={styles["brick-column"]}>
          {displayedImages.map((image, index) => (
            <img key={index} src={image} alt="" />
          ))}
        </div>
      </div>
    </div>
  );
};

export default BrickLayout;

// Function to get a random integer between min and max
const getRandomInt = (min, max) => {
  return Math.floor(Math.random() * (max - min + 1)) + min;
};

2️⃣ To make each image disappear and then reappear with another image in its place in different time sequences between 5-10 second intervals, you can modify the BrickLayout component as follows:

1. Pass the images uploaded by contributors as props to the BrickLayout component.
2. Use the useState hook to store the index of the current image.
3. Use the useEffect hook to change the index of the current image after a certain interval.
4. Use the setInterval method to change the index of the current image after a certain interval.
5. Use the slice method to display only 9 images at a time.

import React, { useState, useEffect } from "react";
import styles from "./BrickLayout.module.css";

const BrickLayout = ({ images }) => {
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCurrentIndex((currentIndex + 1) % images.length);
    }, getRandomInt(5000, 10000));
    return () => clearInterval(intervalId);
  }, [currentIndex, images]);

  const displayedImages = images.slice(currentIndex, currentIndex + 9);

  return (
    <div>
      <div className={styles["blur-circle-shape-two"]}></div>
      <div className={styles["brick-layout"]}>
        <div className={styles["brick-column"]}>
          {displayedImages.map((image, index) => (
            <img key={index} src={image} alt="" />
          ))}
        </div>
      </div>
    </div>
  );
};

export default BrickLayout;

// Function to get a random integer between min and max
const getRandomInt = (min, max) => {
  return Math.floor(Math.random() * (max - min + 1)) + min;
};

Resources
🪟 Image Grid / Masonry Layout for React
React Visual Grid Docs
Image from the React Visual Grid that could be used as the layout for the dummy image backdrop⬇️

🟢 Add README Badges

Add the following README Badges to the README:

• issues closed counter
• pull requests closed
• PRs welcome
• first-timers-only frindly
• -> with text "come look at our good first issues". With anchor text posting to good first issues

EXAMPLE⬇️

This comes from the README of the GitHub repository fpdf2 that can help with reverse entering and figuring out where to get the badges from.

[Feature Request] Randomize the color of text being displayed everytime when visiting

Description

This is to randomize the text color displayed for the Location of Contributors on the Contributors Map page.

For this, you will need to work in the MapContributors component and look at the ContributorsGrid.jsx to model for implementing a get different colors function.

Let me know if you have any questions.

Screenshots

Make the Location of Contributors change colors every time you refresh and view the page.

Checklist

• I have checked for duplicate issues
• I have read the Contribution Guidelines
• I am willing to work on this issue (optional)

🟢 French Translation NEEDED for Documentation

French translation is needed for the following files:

• README
• CODE_OF_CONDUCT
• CONTRIBUTION-GUIDELINES.md
• LICENSE
• about.md

Please add these files in the empty French section.

And please work off the branch french-translation for organization purposes.

Modeling after the GitHub Repository first-contributors

🟢 Add translation section to all README file languages with flag emojis

Currently working on having this Documentation translated into five other languages. We would like to see it added to the top portion of the README, as seen in the following photo.

Please add all the following flags to be displayed on all translated README files in the six different languages, and all of the flags are hyperlinked to direct to there appropriate README files.

• Arabic: 🇸🇦🇦🇪 (Saudi Arabia and United Arab Emirates) Does it make sense to use these flags to represent the Arabic language?
• French: 🇫🇷 (France)
• Spanish: 🇪🇸 (Spain)
• Chinese: 🇨🇳 (China)
• Hindi: 🇮🇳 (India)

Add the five language flags for the following on the ReadMe with text and anchor text to link that says, "Read this in other languages." This text will link to Translations.md that will be modeled simiraly to this image below⬇️

Additionally, there exits open source projects of countries flags that can be used, for example FlagKit, country-flags, and circle flags. The circle flag design comes across as unique and I would be in favor of this look.

This is modeled after the first-contributions repository ⬇️

Fix README badges for appearance

Create uniform badge styles in the README section by customizing badges. The following link is the repo for using the visitor view count badge if needing to recreate and reformat it. This can be done by customizing the badges whichever style so long as they are all the same for a more appealing and organized section of the README.

Hits repository

Use the colors of #014AAD for blue and #FDE93A yellow

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

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 ⬇️💻

Example.mov