johanna-hub / brixtonlocal Goto Github PK
View Code? Open in Web Editor NEWAn app to support local businesses during the COVID-19 crisis using React, Node and Google Sheets API
An app to support local businesses during the COVID-19 crisis using React, Node and Google Sheets API
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:
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>:
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):
React components for the all listings page in Figma as <Page.List>:
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
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:
/posts/businessname
/tags/bread
/page/1
/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
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>:
Now that there are spreadsheets run by different people, some issues arising with tags:
Create React Components for the following for the About page in Figma as <Page.About>:
React components for tag results list in Figma as <Page.Tag>:
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>:
Implement Styled Components in order to style React Components in line with agreed design
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.
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):
React components for the category results page in Figma as <Page.Category>:
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.