CONTRIBUTION-GUIDELINES.md

Contribution Guidelines

This documentation contains a set of guidelines to help you during the contribution process of this project. This opensource project was built using the React framework and the development server will need to be started in order to view the project on your local machine.

---

Step 1. Fork this repository

Visit the repository on Github and click on the Fork button. This will create a copy in your account.

how-to-fork-this-repository.mp4

Step 2. Clone, open, install and start

Open a terminal and run the following git command:

git clone url-you-just-copied where url-you-just-copied is replaced with the url to this repository (your fork of this project). See the previous steps to obtain the url.

Then go to the directory where the project is saved and runthe following command:

npm i to install the dependencies to be able to run the React Development Server.

Next run the following command to then begin and run the React ⚛️ Development Server:

npm start

When running successfully your terminal will look like this below

Now open a web browser and go to localhost: 3000 if not directed there from running the npm start command.

Step 3. Create a new branch

Open the cloned repository in a code editor tool such as Visual Studio Code, or any other code editor of your choice. The following steps demonstrate the process using Visual Studio Code, but the same workflow applies to other code editors or using GitHub Codespaces.

Change to the repository directory on your computer (if you are not already there):

cd BeforeIDieAchievements

Now create a branch using the command:

git checkout -b your-branch-name

For example:

git checkout -b add-Xander-Clemens

Step 4. PASTE your JSON file

• Paste the following JSON Code in src/Jsons/Contributors.json
• Scroll to the bottom of the list and add a "," to the last JSON contributor before pasting your JSON code

{
    "id": "YOUR_NAME",
    "image": "img/bid_image/YOUR_NAME.jpg",
    "avatar": "img/avatar/YOUR_NAME.jpg",
    "name": "YOUR_NAME",
    "location": "YOUR_CITY_COUNTRY_AND_FLAG",
    "GitHub": "GITHUB_PROFILE_URL",
    "text": "PASTE_WHAT_YOU_WANT_TO_DO_BEFORE_YOU_DIE"
}

PASTE YOUR CODE ABOVE AND BE SURE TO ADD "," BEFORE TO THE PREVIOUS CONTRIBUTORS JSON CODE

Step 5. FILL OUT your JSON info

To fill out the given JSON code, follow these instructions:

1. Replace "YOUR_NAME" with your actual name in all occurrences.
2. Replace "YOUR_CITY_COUNTRY_AND_FLAG" with your city, country, and country flag emoji.
3. Replace "GITHUB_PROFILE_URL" with the URL of your GitHub profile.
4. Replace "PASTE_WHAT_YOU_WANT_TO_DO_BEFORE_YOU_DIE" with a text describing what you want to do before you die.

• This is your time to think and reflect on what YOU want to do before you die. Perhaps you want to run a 2K marathon, travel the world, or do a wacky food challenge at a restaurant in your hometown or country. Now, here are some things to keep in mind when writing your goal:

• Character Length: Please limit your text to a max 500 characters
• Be Thoughtful: Craft your message to convey the significance and value of your aspirations.
• Consider Your Audience: Keep in mind that your text and images will be shared publicly, so be respectful with your images and words. Also, avoid imposing with your goals. We want this project to be a place where people feel safe and comfortable with being authentic.
• Regularly Reflect: Like life, goals constantly change so regularly review your progress and make adjustments as needed. Also, share and celebrate the milestones you reach. You'll never know who you can inspire by sharing them.

{
  "id": "Juan Perez",
  "image": "img/bid_image/Juan_Perez.jpg",
  "avatar": "img/avatar/Juan_Perez.jpg",
  "name": "Juan Perez",
  "location": "Santiago, Chile 🇨🇱",
  "GitHub": "https://github.com/juanperez",
  "text": "I want to climb the Villarrica volcano before I die"
}

Step 6. ADD YOUR GitHub Profile Image

• Go to your GitHub profile and then save the image of your avatar by formatting it <YOUR_NAME>.jpg. Please replace <YOUR_NAME> with your name.

• You can add a different image if you like but make sure it is a jpeg image and that it is 450*450 pixels and following the name structure above.

• Once saved, drag your image into the public/img/avatar folder.

Step 7. ADD YOUR BID (Before I Die) Image

• Find or create an image that represents what you want to do before you die. It can be a collage or a single item. Take time to reflect and make it meaningful to yourself as you are investing in yourself by contributing to this open-source project and defining what is meaningful and important to you.
• The image should be formatted at least 500*500 pixels.
• Add your image to the folder public/img/bid_image.
• You can play around with how your image size affects the photo gallery and adjust accordingly. It can be helpful to find high-quality images on websites like UnSplash or use AI Generative Images tools. Additionally, editing your images on tools like Canva can make your imagery great and meaningful to you.

Step 8. ADD to the CONTRIBUTORS.md file

When adding a new contributor to the CONTRIBUTORS.md file, please note that there should be a maximum of seven contributors per column. If you see that a column is already full, you should close the column and create a new one. See the below example image of this instance If the column is less than seven contributors go ahead and jump to here.

What to copy to start column number one:

</tr>
  <tr>
<!-- Start of column-1 -->
<td align="center">
  <a href="https://github.com/GITHUB_ACCOUNT">
    <img
      src="YOUR_GITHUB_AVATAR_LINK"
      width="100px"
    />
    <br />
    <sub>YOUR_NAME</sub>
  </a>
</td>
<!-- End of column-1 -->
</tr>
</table>

Then jump to A few things to change

If you see that the column isn't full follow these steps:

Copy the code below, then paste it into the CONTRIBUTORS file of this repo. Be sure to paste it below another contributors end column. And then proceed to edit with your own information.

<!-- Start of column -->
<td align="center">
  <a href="https://github.com/GITHUB_ACCOUNT">
    <img
      src="YOUR_GITHUB_AVATAR_LINK"
      width="100px"
    />
    <br />
    <sub>YOUR_NAME</sub>
  </a>
</td>
<!-- End of column -->

A few things to change:

• Replace the link with your own profile link <a href="your GitHub profile link here"></a>

• Right click on your github profile image and copy the image link and paste inside the img tag. Leave the width="100px" property

<img src="YOUR_GITHUB_AVATAR_LINK" width="100px" />

Just go to your GitHub profile page to get your profile image and link.

• Replace the sub tag with your own name.

<sub>Your Name</sub>

Then save your changes.

Step 9. Git Add, Commit and Push

Add your new changes to the branch you created using the git add command:

git add .

Now commit those changes using the git commit command:

git commit -m "Add your-name to Before I Die"

Replacing your-name with your name.

Push your changes using the command git push:

git push origin your-branch-name

Replacing your-branch-name with the name of the branch you created earlier.

1. Before continuing these steps, make sure your changes meet the requirements from the previous steps
2. Ensure you have added the avatar image, bid(Before I Die) image and all your JSON text has been entered correctly an is displaying correctly on your React development server
3. Commit your changes with the message "add prompt your prompt here"
4. Push your changes to the branch you created earlier when doing the `git checkout` command
5. See below for an example

Example add/commit/push workflow:

If you're in the BeforeIDieAchievements directory in your terminal:

  git add .
  git commit -m "Add Xander Clemens to Before I Die"
  git push -u origin add-Xander-Clemens

Step 10. Submit your changes for review

If you go to your repository on GitHub, you'll see a Compare & pull request button. Click on that button.

Now submit the pull request by clicking on the Create pull request button. Be sure to add details of what you are adding to the pull request.

If the deployment is successful, there will be an option on the screen below to view a "preview" of your contribution before it goes to production!

Upon seeing this screen, either your contribution will be accepted and merged into the main branch, or your contribution will receive feedback and changes will be requested. I'll be merging all your changes into the main branch of this project. You will get a notification email once the changes have been merged.

1. In the case changes are requested, follow the same workflow to request and update your pull request.
2. If no changes have been requested, it will be merged into the production branch.

Need more help?

If you need any additional help with any issues, feel free to contact me on LinkedIn or find my contact details on my website.

Thank you for contributing!

• Congrats! You just completed the standard fork -> clone -> edit -> pull request workflow that you'll often encounter as a contributor!

• Please star this repository and share with someone you know who might enjoy contributing!

I hope you have a lot of fun while contributing to this project. If you drew inspiration from your own research on what you want to do before you die, please star this repo and share it with others to encourage them to contribute and identify what they want to do before they die.

Contributing

We love pull requests from everyone. By participating in this project, you agree to abide by the Code Of Conduct. Please continue to add this project be looking at the Road Map of this project in addition creating or contributing to issues to enhance this project further with features.