Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/rebuild-black-business/rbb-website

Website to help connect black-owned businesses with consumers and resources
https://github.com/rebuild-black-business/rbb-website

black blacklivesmatter consumers discord frontend gatsby gatsbyjs react reactjs volunteer

Last synced: about 13 hours ago
JSON representation

Website to help connect black-owned businesses with consumers and resources

Host: GitHub
URL: https://github.com/rebuild-black-business/rbb-website
Owner: Rebuild-Black-Business
License: mit
Created: 2020-06-03T19:30:33.000Z (over 4 years ago)
Default Branch: main
Last Pushed: 2023-01-06T07:50:17.000Z (over 1 year ago)
Last Synced: 2024-09-23T15:31:24.256Z (4 days ago)
Topics: black, blacklivesmatter, consumers, discord, frontend, gatsby, gatsbyjs, react, reactjs, volunteer
Language: JavaScript
Homepage: https://www.rebuildblackbusiness.com/
Size: 6.5 MB
Stars: 118
Watchers: 13
Forks: 72
Open Issues: 50
Metadata Files:
- Readme: README.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

Welcome to Rebuild Black Business 👋

> The website for https://www.rebuildblackbusiness.com/

### 🏠 [Homepage](https://www.rebuildblackbusiness.com/)

## 🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check [issues page](https://github.com/Rebuild-Black-Business/RBB-Website/issues).

### How can I get involved now?

The first step is to make sure that you've signed up as a volunteer at http://join.rebuildblackbusiness.com/ indicating your interest in contributing and reviewed our [Code of Conduct](https://github.com/Rebuild-Black-Business/RBB-Website/blob/master/CODE_OF_CONDUCT.md). This will get you access to our Discord development channels for further information.

If you see a [GitHub Issues](https://github.com/Rebuild-Black-Business/RBB-Website/issues) you're interested in working on, comment on the task expressing your interest. A project manager will assign the task to you.

### Branch Name Conventions

When contributing, please fork this repository by clicking the “fork” button at the top right. This creates your own copy of the repository where you’re able to make changes. Once you have forked the repository, please structure your branches using the following format.

`feature/task-description` - Feature branches are for all new feature work. The task description should be descriptive enough to quickly understand the work done in this branch. Please keep your features concise and ensure the work done in this branch directly relates to your task.

`fix/task-description` - Fix branches should be leveraged for bug fixes on existing features

`hotfix/task-description` - Hotfix branches should only ever be leveraged for _critical_ bug fixes that need attention immediately. This would only be used if there is a broken feature or bug on production that needs to be addressed urgently.

### Pull Requests

To send your changes for review, open a pull request. If you’ve never opened a pull request before, [read Thanoshan’s article on creating a pull request](https://www.freecodecamp.org/news/how-to-make-your-first-pull-request-on-github-3/) for more information!

Code reviewers will automatically be notified for a review.

## Terminology

- Data Types - Dynamic user-generated data for the various types of data used on the site. Currently this includes the following
- Business In Need
- Black Owned Business
- Service Organization
- Ally

## 🖥️ Tech Details

**Frontend**

The website is built using [Gatsby](https://www.gatsbyjs.org/docs/), with UI components leveraging [Chakra UI](https://chakra-ui.com/getting-started) with custom theming for rapid and consistent component driven development. Unit tests are written with the [React-Testing-Library](https://github.com/testing-library/react-testing-library)

**Data**

Data for the various user types is stored in [Airtable](https://airtable.com/). Each user type has its own table that the site pulls from and displays.

To get access to this data, sign up as a volunteer at http://join.rebuildblackbusiness.com/ to get access to the Rebuild Black Business Discord and express your interest in helping on Discord to your assigned Team Lead. They'll get you read access to the data in a timely manner.

## Install

**Clone the repository**

First, fork this repository by clicking the “fork” button at the top right. This creates your own copy of the repository where you’re able to make changes.

Second, clone your copy of the repo to your local machine:

```sh
# clone the repo
git clone [email protected]:YOUR_USERNAME_HERE/RBB-Website.git
# move into the new folder
cd RBB-Website/
# install dependencies
npm install
```

**Add environment variables**

This site uses Airtable to keep track of business data. We have set up a dummy database that mirrors the production database that you can get access to by signing up for Airtable via this link: https://airtable.com/invite/l?inviteId=invMvhnrpHMbuDNHe&inviteToken=50cc562d70779ebf8db6109fb31046358875f0c5c2d7b37143d433e56a9f9177

Upon clicking the above link, you will get "Read Only" access to the database.

Once you've obtained access, grab your API key clicking on HELP button in the upper right hand corner Airtable, and clicking the "API Documentation" link.

![Airtable API documentation link](docs/images/airtable-api-key-api-documentation.png)

Check the “show API key” box at the top-right, then look for yours in the code sample displayed next to the “Authentication” docs.

![Airtable API key in the docs](docs/images/airtable-api-key.png)

_Note:_ If you don't see this checkbox, make sure you're logged in to Airtable, and go to [your account settings page](https://airtable.com/account) to generate a key:

![Airtable API key in account settings](docs/images/airtable-api-key-acount-settings.png)

Once you have your API key, create a file called `.env` and add your API key:

```bash
GATSBY_AIRTABLE_API_KEY=YOUR_API_KEY
```

> **NOTE:** See `.env.EXAMPLE` for a copy-pasteable template to get set up!

### Airtable Base ID

Additionally, the `.env.EXAMPLE` file has the `GATSBY_AIRTABLE_BASE_ID` pre-defined for you. This ID references the dummy database mentioned above. Copy and paste that directly into your newly created `.env` file as well.

If you ever lose the base ID for the dummy database, it is `appkenjGlBB01wr3i`.

### Search

We have a PHP backend setup for search, it does not have an API key as of right now however not too much of an issue as it is a public API anyway.

The search endpoint needs to be set in .env.development as Gatsby uses this method to separate out environment variables that are loaded on the frontend from the rest.

Please ask for the endpoint when running locally (also check pinned messages).

## Cloudinary

CLOUD_NAME=rebuild-black-business

Our cloud name is used for every call to our `useImage` hook. Having this on hand will be useful.

For our search functionality, we're making use of serverless functions through Netlify.

To test locally, you're going to want to set up the [Netlify CLI](https://docs.netlify.com/cli/get-started/#installation) and run

```bash
netlify dev
```

This will allow you to consume the env variables from our Netlify account and perform hits to our serverless functions (currently only search)

## Usage

Now that you’ve got the files and an API key, you can start the site on your machine!

```bash
npm run develop
```

This will start Gatsby and show you a local development URL. Whenever you make code changes, Gatsby will automatically reload the browser to show you your changes.

To stop the development server, press `control + C` in your terminal.

### Troubleshooting

If `npm run develop` throws an error like:

```
ERROR #85923 GRAPHQL

There was an error in your GraphQL query:

Cannot query field "allAirtableResources" on type "Query".
```

this is likely due to misconfigured environemnt variables for that particular resource (i.e., Airtable API key is missing or invalid). To resolve this issue you can double-check that you've followed the env setup instructions in this README or ask for help in Discord.

## Run tests

```sh
npm run test
```

## Author

👤 **Rebuild Black Business**

- Github: [@Rebuild-Black-Business](https://github.com/Rebuild-Black-Business)

## Legal

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

_{Monica Powell}
💻

_{Dominic Magnifico}
💻

_Juan
💻

_{Mike Bifulco}
💻

_{Richard Haines}
💻

_{Dale Race}
💻

_{Ryan Harris}
💻

_Aditi
💻

_{Jake LeBoeuf}
💻

_Lizzie
💻

_shapirone
💻

_Domitrius
💻

_{Louis Samuel}
💻

_Chris
💻

_{Chance Strickland}
💻

_{Jordan Andree}
💻

_{Quinn Lashinsky}
💻

_{Andrew Chough}
💻

_{Brandon Lee}
💻

_{Bryan Goss}
💻

_{Jacob Bolda}
💻

_{Tristan Payne}
💻

_{Chris DeMars}
💻

_{Billy Le}
💻

_{Kieran Klaassen}
💻

_{Jason Lengstorf}
💻

_{Malinda Mosholder}
💻

_{Alex Jackson}
💻

_{Marcus Lyons}
💻

_{Dillon Coffman}
💻

_{Brent Clark}
💻

_{Jamie Kyle}
💻

_{Kurt Kemple}
💻

_{johnpaulanderson}
💻

_AdrianTNare
💻

_{Scott Harlan}
💻

_{Mohammad Abed}
💻

_{Jacob Schwartz}
💻

_{Adam Adams}
💻

_{John Agbanusi}
💻