rebuild-black-business / rbb-website Goto Github PK
View Code? Open in Web Editor NEWWebsite to help connect black-owned businesses with consumers and resources
Home Page: https://www.rebuildblackbusiness.com/
License: MIT License
Website to help connect black-owned businesses with consumers and resources
Home Page: https://www.rebuildblackbusiness.com/
License: MIT License
Setup https://www.gatsbyjs.org/packages/gatsby-plugin-sitemap/ to generate a sitemap for SEO & to be able to have Cypress loop through the whole site to easily scan for a11y issues (in a future Issue)
Gradients don't match what is in Figma and they're far too harsh.
Figma: https://www.figma.com/file/Lo1ZcBOO9t4QRbX2I0PwBQ/RBB?node-id=427%3A670
The GlobalHeader component should consist of a SVG version of the RBB logo that when clicked, navigates to the home page.
Pages in the navigation should follow this structure:
Home (slug: "/")
About (slug: "/about")
Businesses (slug: "/businesses")
Allies (slug: "/allies")
Resources (slug: "/resources")
Desktop
Small Screens
As screen size is reduced, the navigation within the GlobalHeader should become hidden behind a hotdog menu. Upon click of the hotdog, the navigation will appear in a row layout.
On the about page, where it mentions Render-Atlanta it should link to the website: https://www.renderatl.com/
The text for the about page can be updated at: https://github.com/Rebuild-Black-Business/RBB-Website/blob/master/src/constants/about.js
This happens on the legal page where we don't have pictures
Can a formal Code of Conduct be added to this project? https://help.github.com/en/github/building-a-strong-community/adding-a-code-of-conduct-to-your-project
Also, potentially community guidelines as well: https://help.github.com/en/github/building-a-strong-community/setting-guidelines-for-repository-contributors
Trello: https://trello.com/c/g5OZn1z8
The ResultCard has two variations:
The ResultCard default state should output the following data from Airtable:
This variation does not utilize a Business image, but instead leverages a background color.
A dev I want to know if any of the pages have a11y issues, not just the home page
Note:
Either use sitemap like in this article or gatsby-cypress-endpoints
Figma Desktop: https://www.figma.com/file/Lo1ZcBOO9t4QRbX2I0PwBQ/RBB?node-id=1155%3A9992
Figma Mobile: https://www.figma.com/file/Lo1ZcBOO9t4QRbX2I0PwBQ/RBB?node-id=1155%3A10056
When a user visits the Allies page for the first time, they should be presented with a popup asking them to agree to our terms and conditions (link TBD). Upon checking the checkbox, the modal will be closed, and the AllyFeed will be rendered.
Functionally, we want to prevent easy scraping of our user's data. So in order to help cut down on that we require folks to accept terms and conditions before they view the list. We need to ensure that no data is shown until the terms and conditions have been clicked, instead, behind this modal we will show a grid of "Skeleton" elements (https://chakra-ui.com/skeleton). Once the checkbox has been clicked, localStorage should be used to ensure that user does not have to accept the terms and conditions again, the modal should close, and the Skeleton elements should be re-rendered with real data.
In the /businesses
page, the no results card is shown on page load for a small amount of time then the results cards are displayed. On the initial load, maybe a skeleton loader should exist while making the api call to get the search results.
Figma Desktop: https://www.figma.com/file/Lo1ZcBOO9t4QRbX2I0PwBQ/RBB?node-id=1155%3A11025
Figma Mobile: https://www.figma.com/file/Lo1ZcBOO9t4QRbX2I0PwBQ/RBB?node-id=1155%3A11093
When a user filters for Businesses or Allies, and their filter yields no results, they should be presented with a component that contains a Heading, Paragraph, and Airtable form embed via iframe src (use a placeholder for the Airtable form for now).
Styling should be handled through the use of ChakraUI components, and theme variables should be used where possible for things like font styles, colors, and spacing.
If possible, this component should be interchangeable between User Types (Businesses, and Allies).
If possible, through props, a Developer should be able to edit the heading, paragraph, and iframe src.
If reuse of this component isn't viable, two separate NoBusinessResults
and NoAllyResults
can be created, where the content is handled within the components themselves.
Not sure if it's not set up yet or maybe the name changed, but the backend trello link in the README leads to a 'Board Not Found' error https://trello.com/b/034hEV4X/rebuild-black-business-backend-dev
Add a link to the terms page
Figma: https://www.figma.com/file/Lo1ZcBOO9t4QRbX2I0PwBQ/RBB?node-id=585%3A351
Leveraging Chakra UI components, we need to setup link styles for default, hover, active, an visited states.
Note: The orange link should only be used for flagging businesses/allies
User ends up at https://www.wildhavenbotanica.com
User ends up at https://www.rebuildblackbusiness.com/www.wildhavenbotanica.com
Seems like some of the business urls in your data (in airtable?) are being treated as relative links because they don't start with the protocol.
Warning: Each child in a list should have a unique "key" prop. Check the render method of
Pagination. See https://fb.me/react-warning-keys for more information.
Leverage gatsby-node.js
to create a pre-filtered page of data per each of the 50 states. This will create some nice SEO opportunities to have a URL per state of black owned businesses. It will also allow us to properly categorize data that does not have complete information, and ensure that they can still be included and searched for on the site.
AS a User
When I see the social links
I want to be able to click them and go to the correct place
AC:
https://www.facebook.com/RebuildingBlack
https://www.instagram.com/rebuildingblack/
https://twitter.com/rebuildingblack
Mailto: [email protected]
Paypal: waiting on, will get by by 6/10
Area: https://d.pr/i/7tbKI6
Figma: https://www.figma.com/file/Lo1ZcBOO9t4QRbX2I0PwBQ/RBB?node-id=429%3A57
Leveraging Chakra UI components, we need to build out a ContentBlock component that can accept a few parameters in order to output the different variations on the home page.
Customization Options
The content block should be a single Higher Order Component that allows us to add any content within it. Primarily this content will be Headings, Paragraphs, and Buttons.
As a Developer, I should be able to customize the background color that is used on an individual block and whether it is a fade, or tint.
As a Developer I should be able to customize the image that appears as the background for this block.
As a Developer I should be able to choose to have the text appear on the left, right or in the center of the block.
Customization Examples
Left aligned content, black background that fades over a custom img src, Heading, Paragraph, and 2 Buttons as children of the Higher Order Component.
Right aligned content, white background that fades over a custom img src, Heading, Paragraph with an inline link, and 2 buttons as children of the Higher Order Component
Desktop
Center aligned content, color tint over a custom img src, Paragraph, and one button that spans the width of the content
The ContentBlock should be responsive, the content will center, span the full width, and the background color will become a tint over the background image on smaller screens
Resolve issue from Lighthouse scan:
List items (
Figma: https://www.figma.com/file/Lo1ZcBOO9t4QRbX2I0PwBQ/RBB?node-id=0%3A1
Leveraging Chakra UI components and already existing ContentBlock and PrimaryButton components, we need to layout the home page to match up to UI designs.
Trello:
https://trello.com/c/UfKtiYcc/11-layout-homepage-content
Image Assets:
assets/home-header-bg
assets/home-header-bg-space
assets/cta1-bg
assets/cta2-bg
assets/cta2-bg-space
assets/cta3-bg
The layout should be responsive, the content will center, span the full width.
go over the readme and update it since so much has changed over the past few days leading up to launch.
Figma: https://www.figma.com/file/Lo1ZcBOO9t4QRbX2I0PwBQ/RBB?node-id=429%3A57
The Footer component will be added to our <Layout />
component (https://github.com/Rebuild-Black-Business/RBB-Website/blob/master/src/components/Layout.js) and should appear on every page. It is composed of a few sections:
Social List
Individual social icons for various social media properties. For now stub these out with #
as the href
until we have these properties 100% set up. On hover or focus of each icon, increase size by 10%:
transform: scale(1.1)
Link List
Below the social icons is the link list, this should be the same as the link list in the navigation. A <StaticQuery>
should be used to generate this link list. See https://github.com/Rebuild-Black-Business/RBB-Website/blob/master/src/components/Layout.js#L17 and https://github.com/Rebuild-Black-Business/RBB-Website/blob/master/src/components/PrimaryNav.js#L62 for how we're building this in the PrimaryNav component.
Photo Credits
The assets we use on the site are all public domain, and thus must be attributed to the photographer who took the pictures. The menuLinks
object within siteMetadata
here: https://github.com/Rebuild-Black-Business/RBB-Website/blob/master/gatsby-config.js#L33 should be expanded to include the Photographer's name, and URL on a per page basis.
The only photo credits we have approved are the Home page credits:
John Cameron https://unsplash.com/@john_cameron
Kelly Lacy https://instagram.com/kellymlacy
Mike Von thevoncomplex.com
The photo credit should open in a new tab.
Copyright Information
The copyright year in the footer should be dynamic and the "Terms and Conditions" bit should be a link to a (currently not created) "Terms and Conditions" page. The text for Terms and Conditions should contain non-breaking spaces so that it does not wrap in the middle on smaller screens.
Ensure all links can be tab targeted and include focus states.
We're seeing long initial load times from our images. Going to work on adding some more optimizations from Cloudinary and tweaking until we see less stutter.
For reference:
#207
In our PrimaryNav component: https://github.com/Rebuild-Black-Business/RBB-Website/blob/master/src/components/PrimaryNav.js
Primarily I believe we need to add a couple of aria
roles to the navigation (nav is only toggled on smaller screens).
aria-controls
should be added to the <button>
within the <Box>
component wrapping the Hamburger menu. This should point to the ID of the navigation.
aria-expanded
should be added to the <button>
within the <Box>
and toggled when the button is clicked.
aria-hidden
should be applied to the <NavMenu>
component. On desktop this will be set to false, but on mobile this should be toggled when the hamburger nav is clicked.
Related to search on Business and Ally pages.
Example:
02215
should stay 02215
and not become 2215
when sent to searchSince data structure has been finalized we can now work on getting the BusinessFilter functionality wired up. Here's the logic:
As a user, I should be able to optionally filter businesses by category. This field should incorporate the following:
Field type: dropdown select
Field label: Business
Field placeholder option: Select type
Dropdown options:
As a user, I should be able to optionally filter businesses by City / State OR Zipcode. By leveraging this NPM package we should be able to take in "Atlanta, GA" for example, return an array of zip codes that are associated with that city state string, and return results that match any zip in that array
Field type: Text search (likely will need strict validation to ensure the "Atlanta, GA" format. Searching "Atlanta" or "ATL" will not yield any results in v0). This will accept both city state, or a zip code.
Field label: Location
Field placeholder text : Eg. "Atlanta, GA" or "30301"
As a user, I should be able to filter businesses by their level of need. This is a boolean value in the database. Businesses impacted by current events will be labelled as "In Need" in the database.
Field type: Checkbox (Should be pre-checked for v0)
Field Label: "In Immediate Need" (this is subject to change as designs are fully approved)
Resolve this warning from Chakra UI:
External link https://www.instagram.com/clay.banks was detected in a Link component. Use the Link component only for internal links.
Figma: https://www.figma.com/file/Lo1ZcBOO9t4QRbX2I0PwBQ/RBB?node-id=429%3A57
Leveraging Chakra UI components and already existing ContactCard components, we need to layout the home page to match up to UI designs. H2 headers should be used for "who we are", "mission", and "contact" headers
Trello:
https://trello.com/c/TeFxrCVb/43-about-page
Image Assets:
The layout should be responsive, the content will center, span the full width.
Figma: https://www.figma.com/file/Lo1ZcBOO9t4QRbX2I0PwBQ/RBB?node-id=427%3A1426
https://www.figma.com/file/Lo1ZcBOO9t4QRbX2I0PwBQ/RBB?node-id=1156%3A6458
The alignment of the navigation items, and some small stylistic changes need to be reflected in the code. Changes include:
black-000
variableOne of the primary goals of the RBB site is to ensure that we can quickly and effectively connect people with black owned businesses near them. In order to do this, we do our best to accurately generate location based data for users to filter by.
Currently in the DB we are collecting zip codes of businesses that have a storefront. Some businesses do not have a storefront and are therefore tagged as an "Online" business.
If a business has a storefront, we need to take their zip code, and display it as "City, ST" on the frontend. For example, a business has the zip code of 80219, the front end should display "Denver, CO".
This should be a utility function that we can pass an integer to, and have it return the "City, ST" format.
Explore using https://www.npmjs.com/package/zipcodes - this has features that we would like to leverage in the future as well.
On the business page, if a business type
is selected, a location
entered, and In Urgent Need
selected, when search executes nothing displays below in the iframe class=airtable-embeded
Figma: https://www.figma.com/file/Lo1ZcBOO9t4QRbX2I0PwBQ/RBB?node-id=579%3A1516
Leveraging Chakra UI components, we need to build out a Pagination component that can support having optional ellipsis for large amounts of pages of results.
If it's quick to add, support desktop version as well. If not it's lower priority and should be created as a separate Issue, so notify @racedale & @magnificode
Desktop:
Because of the amount of data we are presenting to users, we want to be sure that between perceived page loads, any component that has to fetch data ( and for example) should present a <Loading />
component.
A simple Chakra UI spinner will suffice for this task https://chakra-ui.com/spinner
Component Screenshot: https://share.getcloudapp.com/P8uedn2L
Figma design: https://www.figma.com/file/Lo1ZcBOO9t4QRbX2I0PwBQ/RBB?node-id=161%3A0
The contact card should output the following data:
The entire card should be clickable and trigger either the URL or a modal popup.
Note: Just the rough layout, styling not important yet
Figma: https://www.figma.com/file/Lo1ZcBOO9t4QRbX2I0PwBQ/RBB?node-id=2%3A102
Buttons should extend existing Chakra UI components to achieve the style outlined in the figma document for each state and variation.
As a developer
I want the tests to be passing to be able to ensure quality to our users
There's a few errors around navigation and a11y issues
Note:
npm run test:e2e:ci
will execute Cypress tests
Hi there, I lead the Open Source Initiative as well as open source at Salesforce and I'd love to be able to contribute to your project. However, in getting acquainted with the project I noticed that the various repositories lack a clear license.
Would you mind adding a LICENSE file to your repos?
I have no opinions on what license should be used (of course prefer an open source license), but a quick scan of the vendored code in this particular repo suggests MIT would be a reasonable choice. https://opensource.org/licenses/MIT
Thanks so much!
Lighthouse was failing for Background and foreground colors do not have a sufficient contrast ratio.
AC:
Update rbb-orange
to #F05F37
AS a user
When I click contact us
I see my email open [email protected]
AC:
Upgrade graphql-playground-html
to version 1.6.22 or later.
Since this is a dependency of Gatsby this will be achieved by updating gatsby
Use npm ls graphql-playground-html
to verify
Filters should be created to allow a user to filter results from the BusinessInNeedFeed component by the following criteria:
Business Type
Location
Need
Submit
Filters should be created to allow a user to filter results from the SupportingOrgFeed component by the following criteria:
Resources For
Location
Submit
Skill
Location
Submit
The results should be dynamically updated upon user hitting "Search" or hitting "return" on their keyboard as any normal form would.
IMPORTANT :: Accessibility needs to be top of mind for the results, please refer to https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions to ensure that live updated regions are properly announced to screen readers.
https://trello.com/c/u00Xau1t/120-allies-page-breaks-items-on-refresh
Caused by the SSR part of gatsby, any Link works fine
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.