This is an example of how to make a lot of JS tooling play well together:

• Next.js
• SWR for data fetching & infinite scroll.
• next-offline for offline caching.
• Tailwind for styling.
• Cypress for end-to-end testing.
• React Testing Library for component unit testing.
• Storybook for developing components in isolation.
• Destiny the prettier for filesystems.

This app also scores pretty high on the Lighthouse speed tests, see: this.

Suggestions welcome on what more to add to this!

Development

For development:

yarn
yarn dev

Open http://localhost:3000 with your browser to see the home page.

Production Build

For an optimized build (this is the only build that supports offline access):

yarn build
yarn start

Running Tests

React-testing-library unit tests can be run by:

yarn test

Cypress integration tests can be run using:

yarn cypress:open
yarn cypress:run

Storybook

Storybook support is available to test components in isolation:

yarn storybook

Destiny

This will automatically organize your src/ folder, no decision needed from you!

yarn destiny

Changelog

• Use destiny for logical filesystems
• Rename to js-rockstars
• Upgrade to latest react and swr 0.2.0
• Storybook knobs
• Storybook support (~2 hours)
• react-testing-library (~ 2 hours)
• right-align and increase width for number field. (~ 15 minutes)
• Fix Ask HN not displaying links bug (~ 10 minutes)
• Cypress Testing (took ~1 hour)
• Optimize Pagespeed score (took ~1 hour)
• Styling using Tailwind (took ~2 hours)
• Offline support using next-offline (took ~3 hours)
• Infinite Pagination using useSWRPages() & IntersectionObserver (took ~3 hours)
• Simple fetch using SWR (took ~ 1 hour)

Todo

• Server-side data fetching (SSR)