johanna-hub / brixtonlocal Goto Github PK

This page needs a restyle in line with the tags page - they look completely different now!

We will initially use Heroku to deploy the application.
If the application becomes slow, we may need to look into moving to another platform, options include:

• Surge
• Netlify
• Heroku

Cross-platform components using react-primitives (React Native, React web, React Figma, etc)

Figma entrypoint to render these components to a design.

Am looking into putting a newsletter sign-up so that we can do a weekly round-up of news and updates to the site. Seems to be some sort of Gatsby/Mail chimp plugin that can be used

React components for tags menu page in Figma as <Page.AllTags>:

• Nav bar
• Tags container including:
  • Title
  • All tags in alphabetical order
• Footer

Currently listings are showing up alphabetically because I am sorting the Google Sheet alphabetically - would be better to sort them in the code, so that the Google Sheet can be kept in chronological order of addition so contributors can see latest entries etc.

We could basically close loads of front-end component issues if we did the footer 🤣

Create react components for the menu (mobile view):

• Nav bar
• All Listing link
• Categories link
• Tags section
• About link
• Contact link
• Footer

React components for the all listings page in Figma as <Page.List>:

• nav bar
• List container including:
  • Individual category container including:
    • Category title
    • Each entry of that category with link to page
• Footer

• Google Sheets API error handling
• General server error handling (useful error messages)

At the moment if there is no photo, I am putting the url to the lovelocal.life illustration in the spreadsheet. Would be good to have this as a static image file, and if there is no photo url the illustration gets used automatically

• On-boarding new businesses (How to use google sheets)
• General documentation (How to run the project, how to get involved etc)

The category header just takes the first photo from each category and this can be quite random - the photo can have a lot of white in it, which doesn't really work or it's not a very representative photo. See https://www.winchmorehilllocal.life/ as an example of bad photos!

I had a friend do an amazing illustration for lovelocal.life - I am using it as a placeholder when people don't upload a photo and also want it on the About page for each site. Am thinking it would work well for the categories header - we could take different parts of the illustration and use that for each photo. That way it is consistent and we know what it looks it! We can even make a gap for the number to go in, or make any necessary adjustments.
Check the illustration out here:
https://www.lovelocal.life/

Agree on appropriate endpoints for:

• Each business page /posts/businessname
• Tags eg: /tags/bread
• Pages (this will be irrelevant if we implement an infinite scroll) /page/1
• About /about

These will be via a GET request.

Google Drive image embeds need to be replaced for the live/production site – it’s rate limited very aggressively. I’m getting 403 errors on the images after a couple reloads. Google Drive API could be used to deploy the images to Netlify/AWS S3 with https://www.gatsbyjs.org/packages/@fs/gatsby-plugin-drive/

Testing on React Components using Jest

https://reactjs.org/docs/testing.html

Proposal for path/routing logic:

Pseudo-code:

const routes = [{
  path: '/',
  component: 'pages/index',
}, {
  path: '/about',
  component: 'pages/index',
}, {
  path: '/terms',
  component: 'pages/terms',
}, {
  path: '/business/:id',
  component: 'templates/BusinessPage'
}, {
  path: '/category/:id',
  component: 'templates/CategoryPage'
}, {
  path: '/tag/:id',
  component: 'templates/TagPage'
}, {
  path: '/discover',
  component: 'templates/DiscoverPage'
}]

This is handled in the gatsby-node.js file: exports.createPages = function..., where the pages can be generated from API data, JSON file, files (e.g. docs/about.md), etc

If we have a sort by filter, we can then have random order of entries on main page - I am annoyed by seeing the amount of clicks the first few businesses get in google analytics - feel sorry for the others!

Ensure the structure of the JSON covers what is present in the Google Sheets.

https://docs.google.com/spreadsheets/d/1gm4Yh-aUTgnsWBjMQYo55qbSetO0XDUXgl5yH7aN0jM/edit?usp=sharing

React components for the categories menu page in Figma as <Page.AllCategories>:

• Nav bar
• Categories container including:
  • Title
  • Category title with number of entries
• Footer

Now that there are spreadsheets run by different people, some issues arising with tags:

• Tag text needs to be capitalised - looks messy when it is taken from spreadsheet and is a mixture of cases
• Trim if there is a comma at the end of tag list (this causes an empty tag to display)
• On the all tags page - they are all lower-case, need to be capitalised
• Look into why there is an empty tag on the tags page in Wokingham and Winchmore Hill
  https://www.wokinghamlocal.life/tags
  https://www.winchmorehilllocal.life/tags

Create React Components for the following for the About page in Figma as <Page.About>:

• Nav bar
• Main Content Container to include:
  • Text
• Footer

React components for tag results list in Figma as <Page.Tag>:

• Navbar
• Main Content Container to include:
  • Tag as Title
  • Tag Container to include:
    • Tags to filter further
  • Business Listing Container to include:
    • Individual business listings to include:
      • Photo (if provided) or standard illustration (if no photo)
      • Category
      • Delivery or Collection or both
      • Listing Name
      • Tags
  • Related Tags container to include:
    • Related tags
  • All tags container to include:
    • All tags
• Footer

• Have the ability to get data from specific sheets within the spreadsheet (https://developers.google.com/sheets/api/guides/concepts)
• Lock down the sheets to the specific area managers

Having a single GoogleSheets spreadsheet means we only need one API key.

Create front end React Components for the Single Entry page in Figma as <Page.Business="/:id>:

• Navbar
• Detailed Business Listing Container to include:
  • Category
  • Title
  • Short description
  • Lockdown services
  • How to order
  • Address
  • Website
  • Social media links
  • Tags
  • Photo or standard illustration
• Footer

Implement Styled Components in order to style React Components in line with agreed design

https://styled-components.com

• Add resources to GS
• Connect node server to GS

I think it may be worth deciding on an ESLint setup and using .editorconfig. Prettier seems to be bundled in with Gatsby, but I'm not a big fan of it personally, especially if it's not running in a pre-commit or in CI. But might be simplest just to agree on a prettierrc config, run it once throughout all the code, and enforce it in PRs.

Gatsby's prettierrc doesn't allow semicolons, which I'd suggest changing.

• use the AWS DynamoDB database servicehttps://aws.amazon.com/dynamodb/?did=ft_card&trk=ft_card
• use AWS Lambdas on a cron job to update the database; this can be run every hour

We are doing this because we have a limit of the number for requests that can go to GoogleSheets API. To prevent the app from sending a request with every user, the request will fetch the data from the database rather than directly from the GoogleSheets API.

Note: We have a maximum of 25GB storage on the AWS free tier

Create Front End React components for the landing page (please see the figma design):

• Navbar
• Main Content container to include:
  • Landing page to include:
    • Brixton local.life header
    • Horizontal scroll categories
  • Top 5-10 tags
  • Card listing to include:
    • Photo (if provided) or standard illustration (if no photo)
    • Category
    • Whether delivering or collecting
    • Entry name
    • Entry tags
  • All tags
  • Footer

React components for the category results page in Figma as <Page.Category>:

• Navbar
• Main Content Container to include:
  • Title
  • Tag Container to include:
    • Relevant tags for that category (if there is a sub-category show as a tag)
  • Business Listings Container to include:
    • Individual listing container to include:
      • Photo (if provided) or standard illustration (if no photo)
      • Category
      • Business name
      • Tags
  • Category horizontal scroll container to include:
    • All other categories
• Footer