⚛ daftcode-react-starter

Hyper-performant React boilerplate for everyone

🎮 Demo

You can see how it performs live on: https://mkaczkowski.com

Demo storybook can be found here: https://wizardly-poitras-931354.netlify.com

Performance:

Taken: 17 May 2018

Google Insight:

Chrome Audits:

• TODO: [Accessibility] fix background/foreground contrast

🕹 Features

• PWA - progressive Web App ready
• React (v16.4) - a JavaScript library for building user interfaces
• Babel - a JavaScript compiler
• Flow - Adds static typing to JavaScript
• Webpack (v4.15.1) with plugins - a module bundler
• [Styled-Components] (https://styled-components.com) - CSS in JS - add a bit of style to your website + theming
• React Snap - prerendering static sites
• Lodable Components - react code splitting made easy
• Jest (v.23) - complete testing solution
• Storybook - interactive UI component dev & test
• React Hot Loader (v4) - tweak React components in real time
• Assets optimization (png/jpg/svg/webp)
• Responsive images
• SVG inliner
• Critical fonts optimization
• Async/Defer and preloaded scripts
• Modernizr - feature detection
• GZip & Brotli compression
• Netlify CI integrated

Tweak React components in real time ⚛️⚡️

• ESLint + Prettier

TODO:

• CSSGrid
• i18n
• Email form integration with Netlify

🔧 Installation

Clone repository to your local workspace:

git clone https://github.com/mkaczkowski/daftcode-react-starter.git

Install project dependencies using npm or yarn:

cd daftcode-react-starter
npm install

🎮 Development

Start developing your own website:

npm run start

Open in your browser:

http://localhost:3000

👌 Production

Production build of the website:

npm build

Serve build files on your local server:

npm serve

Open in your browser:

http://localhost:5000

🔠 Critical Font

We can limit generate subset of fonts to use only unicode-ranges that are used on a web site (optionally for a font-family or for each font-family).

Install

brew install python (if not installed already)

pip3 install fonttools
pip3 install brotli
pip3 install zopfli

npm install -g glyphhanger

Run local server

yarn serve

Generate subset webfonts

glyphhanger http://localhost:5000/index.html --family='Ubuntu' --subset=build/*.ttf --css

📜 License

MIT

👨 Author

Mariusz Kaczkowski from DaftCode