This is a Next.js project bootstrapped with create-next-app
.
First, install your dependencies with either:
npm install
#or
yarn install
Then you can run the development server:
npm run dev
# or
yarn dev
Open http://localhost:3000 with your browser to see the result!
You can start editing the main page by modifying pages/index.tsx
. The page auto-updates as you edit the file as long as you keep the server running locally.
API routes can be accessed on http://localhost:3000/api/counts. This endpoint's behavior can be edited in pages/api/count.ts
. The data itself lives at pages/api/count.js
.
(Note: The pages/api
directory is mapped to /api/*
. Files in this directory are treated as API routes instead of React pages.)
Once you get the app running locally, you can view the CanvasJSChart by clicking "Fetch Data". The canvas chart shows the data from api/counts.js
- counts on the line, and annotations as labelled highlights. You can inspect the chart more thoroughly by clicking and dragging on any part of the chart. That's it!
Since version 11.0.0, Next.js has provided an integrated ESLint experience out-of-the-box: npm run lint
will show you warnings and errors.
Cypress tests are run from /cypress/integration/app.spec.js
.
From the command line:
npm run cy:open-only
will open the cypress GUInpm run cy:run-only
will run cypress testsnpm run cy:open
will run dev to run our app locally, and then runcy:open-only
to open the cypress GUI.npm run cy:run
will run dev to run our app locally, and then runcy:run-only
to run the cypress tests in the terminal.
When tests run in the terminal you'll see an output of any passing or failing tests. Cypress will upload a screenshot and .mp4 for you to reference! This makes things much easier to start debugging.
We could also test API calls with Cypress, but that was a bit out of scope for this project. [Check out their documentation!(https://www.cypress.io/blog/2019/12/23/asserting-network-calls-from-cypress-tests/))
Normally I'd love to include react-testing-library
. It provides a really thorough way to get unit tests set up, which is particularly useful for more complicated React rendering issues. react-testing-library
is pretty lightweight but required more dependencies (like Jest
) than it was worth for unit testing a single component (Chart
). Check out the API to see more of what it can do.
You can run prettier
in your command line via npx prettier --write .
. Prettier rules are in .prettierrc.json
.
Check out /public/lighthouse-summary! Overall:
- Performance 81/100
- Accessibility 95/100
- Best practices 93/100
- SEO 100/100
Performance could be improved by better handling canvas animations and layout shifts. It would also be useful if we could break up the data to make smaller requests.
Also, it would be great if the CanvasJSChart package had a way to support Next's server side rendering! Their team suggested using ssr:false
and dynamic imports since they can't manipulate a document
from the server. Next's server-side rendering support is pretty neat though, and would be great at improving performance.
While the basics are done here, there's still plenty to do! I'd love to update the UI to use a specific design system that standardizes colors, spacing, and font sizes. Talking to shareholders/customers/scientists about what else they'd like to see here would really improve my understanding of what data is most important.
I'd also like to look into more thorough API and performance testing, while Cypress is handy for integration tests, it's a bit clunky when it comes to verifying API calls. This application doesn't have a need for major state management, but I'd love to use Redux or XState to handle that side of things.