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!
For development:
yarn
yarn dev
Open http://localhost:3000 with your browser to see the home page.
For an optimized build (this is the only build that supports offline access):
yarn build
yarn start
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 support is available to test components in isolation:
yarn storybook
This will automatically organize your src/ folder, no decision needed from you!
yarn destiny
- 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)
- Server-side data fetching (SSR)