mbifulco commented 4 years ago

Describe your PR

This PR adds a URL for each individual business sourced from Airtable. As of right now, there's not much content on those pages (just some SEO stuff, and a title) - but the pages exist! Design implementation comes next.

I'm opening this PR to get some feedback (please read below!)

Fixes #268

Pages/Interfaces that will change

lots of new URLs!

Screenshots / video of changes

Steps to test

let this branch build (it may take a mighty long time to build on netlify the first time)
visit /business/1946d007-3c76-5c4d-ac23-10e47bf759a5

TODO

[x] It'd be great to use something other than an ID hash to generate URLs for businesses. I created a function in /utils/business.js which should be modified to generate a slug for each business (and should have a strategy for duplicate slugs)
[x] there's no content on individual business pages, that needs to be implemented from figma
[x] we don't link to individual business pages anywhere

mbifulco commented 4 years ago

Update - I should have the design implemented for this by the end of the weekend. There'll be some loose ends that still need to be tied up, but we should be in a semi-releasable state soon!

mbifulco commented 4 years ago

A few notes on this work:

the current implementation is generating a route/page/URL for each business in the airtable at build time, rather than pulling things from the API dynamically. This decision was made to give individual businesses a leg up on SEO - these pages are inherently search engine crawlable and play nicely with robots.txt, etc.
the current ID scheme (with big long GUIDs in the URL) should be changing to something much more human-readable, like https://rebuildblackbusiness.com/mikes-candy-shop where the ending slug is unique. @elchris it would be super helpful if this were a unique field stored in the database somewhere. Keeping IDs out of the URL is a best practice for SEO as well, per moz.

mbifulco commented 4 years ago

I'm about to push a big ol' stack of changes to this PR. It's taking shape nicely, but there's a bunch of data on the Profile page in Figma that we don't have yet. That stuff is stubbed out here:

😅 I'm putting this down for the day... it's been a long sunday!

mbifulco commented 4 years ago

To do:

[ ] update icons to use Font-Awesome Font. Icon names are store, globe, phone, share-alt, flag, share-square - update: font-awesome isn't referenced in the project yet. I'm going to let this be for now.
[x] call API after page load to populate additional metadata
[ ] add social share links
[x] add share-this-page CTA
[x] update slugify to get rid of special characters like '

shapirone commented 4 years ago

Looking good! A couple small design detail tweaks/feedback

[ ] The image should be the same size as the business page (should be a little smaller and flush with the black background next to it)
[x] Donate text should be vertically centered
[ ] We should likely have a character limit on the URL's display logic to make sure it's not taking up too much space (not as important for this one, but i'm dreading longer URLs)
[x] URL should have the underline that other links use
[x] Phone number and address should likely also be links (esp. for mobile devices)

mbifulco commented 3 years ago

Allllright - I just pushed a mess of additional changes which address some of the todo items above. I think I'm still missing a bit of metadata from the API that may be needed to complete the page. This includes links to facebook/instagram/twitter/linkedin for businesses (yelp is present currently, from what I can see). I'm also not sure what the share profile CTA button at the bottom of the page should do 🤔

mbifulco commented 3 years ago

Ah hey I also removed yarn.lock to fix #330

mbifulco commented 3 years ago

Shoot one more thing - I added react-query as a dependency to the project to handle API fetching / caching / etc for individual business pages. It works like a dream and allows us to have a custom hook to make things work. Because of that, you'll also see devtools for react-query when running the project locally (but not when it is built for production). That looks like this:

and can be opened by clicking the little icon that sticks to the lower-left corner of the browser window:

mbifulco commented 3 years ago

This is now hooked up to a search endpoint for airtable Ids, so the data for each page should be fully connected - check it out on the deploy preview: https://deploy-preview-320--rebuild-black-business.netlify.app/business/ashes-the-cigar-lounge!-rec4mmetqTsWYEAsE

juanri0s commented 3 years ago

Desktop looks great, nice work!

Noticed a couple misalignments on the mobile preview, I also noticed that the category image takes a good amount of time to load, aren't they static assets?

elchris commented 3 years ago

i'm still seeing bad calls to the API on:

https://deploy-preview-320--rebuild-black-business.netlify.app/business/large-clothing-reciKTUpIWBFki1gw

/api/v1/businesses/airtable/null

first issue: "null" where the air table ID should be
2nd issue: the URI is incorrect: ----- incorrect: /api/v1/businesses/airtable/null ----- correct: /private/api/v1/businesses/airtable/reciKTUpIWBFki1gw

mbifulco commented 3 years ago

Good catch @elchris - making that change now.

elchris commented 3 years ago

Good catch @elchris - making that change now.

... it's still passing null to the endpoint instead of the airtable record id :(

mbifulco commented 3 years ago

We're bumping into some problems getting the site to talk to the new API route - @elchris is on the case 👍

mbifulco commented 3 years ago

Ok - we pushed an update to both this PR and the API (both staging and production). That should do the trick.

Rebuild-Black-Business / RBB-Website

Feature/individual business pages #320

Describe your PR

Pages/Interfaces that will change

Screenshots / video of changes

Steps to test

TODO

To do: