Skip to content

Make all the JS rockstars play well together: Next, Cypress, react-testing-library, Storybook, Tailwind, SWR, and next-offline.

Notifications You must be signed in to change notification settings

vishnugopal/js-rockstars

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ea33ded · Apr 29, 2021

History

28 Commits
Apr 23, 2020
Apr 23, 2020
Mar 22, 2020
Apr 23, 2020
Mar 21, 2020
Apr 23, 2020
Mar 21, 2020
Apr 24, 2020
Apr 23, 2020
Apr 24, 2020
Apr 14, 2020
Mar 22, 2020
Mar 24, 2020
Mar 28, 2020
Mar 21, 2020
Mar 21, 2020
Apr 23, 2020
Mar 29, 2020
Mar 24, 2020
Mar 24, 2020
Apr 29, 2021

Repository files navigation

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

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)

About

Make all the JS rockstars play well together: Next, Cypress, react-testing-library, Storybook, Tailwind, SWR, and next-offline.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published