/barber-fund

hopin.to Hackathon project

Primary LanguageJavaScriptMIT LicenseMIT

barber-fund

A Gatsby v2 MIT-License boilerplate used to create an app for people to pay it forward for their future haircuts and thus provide a financial buffer in support their local barbershops during the COVID crisis

Features of this boilerplate

  • 🤩 Page Transitions, component-based (with no-js support)
  • 👮‍♂️ IntersectionObserver, component-based (with polyfill)
  • 🌿 React Context for global UI state, with SSR
  • 💅 styled-components v4
  • 💯 Optimized with Google Lighthouse (including test)
  • 🔥 Code Splitting of CSS and JS (component based)
  • 🔪 Inline SVG support
  • ⚙️ One config file for site-wide settings
  • 💙 Most social + meta tags in one component
  • 🖼 All favicons generated, only one icon file needed
  • 🌐 Offline support
  • 📄 Manifest support
  • 🗺 Sitemap support
  • 📱 Generated media queries for easy use
  • 😎 Prettier for code style
  • 👷‍♂️ CircleCI support
  • 🐙 Schema JSONLD
  • 🔎 size-plugin to keep an eye on your bundle sizes
  • 👨‍🏫 ESLint (based on eslint-plugin-react)

Installation with git clone

git clone https://github.com/nisten/barber-fund.git cd barber-fund yarn install

To develop

yarn develop

To build

yarn build

To test SSR (for Lighthouse etc.)

yarn ssr

To format JS (precommit)

yarn format

To generate favicons (included in build)

yarn build:favicons


## Configuration

Find the site-wide configuration in `site-config.js`.

```js
module.exports = {
  siteTitle: `Barber Fund`,
  siteTitleShort: `barberfund`,
  siteDescription: `Pay it forward for your barber.`,
  siteUrl: `https://master.d10jrcldxj69js.amplifyapp.com/`,
  themeColor: `#000`,
  backgroundColor: `#fff`,
  pathPrefix: null,
  logo: path.resolve(__dirname, 'src/images/icon.png'),
  social: {
    twitter: `gatsbyjs`
  },
};

🚨 Don't forget to update your robots.txt inside static/!

Folder structure

├── gatsby-browser.js # Specify how Gatsby renders pages in the browser
├── gatsby-config.js # Gatsby config, mostly taken from `site-config.js`
├── gatsby-node.js # Modify webpack config
├── gatsby-ssr.js # Specify how Gatsby builds pages
├── site-config.js # Global settings for the whole site, used by multiple scripts
├── content # Content & data, in both json and markdown
├── src
│   ├── components
│   │   ├── head # All meta tags etc.
│   │   ├── io # Intersection Observer component, uses render props
│   │   ├── layout # Layout component
│   │   │   ├── layout.css.js # .css.js for component's `styled-components`
│   │   │   └── layout.js
│   │   └── transition # Page Transition component, used by Gatsby APIs
│   ├── constants # Site-wide constants (breakpoints, colors, etc.)
│   ├── containers # Container components if store is needed
│   ├── helpers
│   │   ├── schemaGenerator.js # Generates JSON-LD schema.org snippets
│   │   └── mediaTemplates.js # Creates media queries for styled-components
│   ├── images # Images needed by the site/theme (not content)
│   ├── pages
│   ├── store # Store and provider of a React.createContext instance
│   └── global.css.js # Global CSS
└── scripts
    ├── lighthouse.test.js # Tests the site specified inside `site-config.js` with Google Lighthouse (WIP)
    └── favicons.js # Generates favicons and manifest using one png only.