ClementChaumel/energy-poc

A proof of concept for a JAMstack energy site

Energy proof of concept

What type of energy do you use?

This is an attempt at creating a website using the JAMStack. It uses NextJS to export the app to a static site and uploads it on Netlify's CDN.

Check it out here!

Development setup

Install locally using

git clone git@github.com:ClementChaumel/energy-poc.git
cd energy-poc
yarn

You'll also need to create a .env file like so

API_KEY = [api - key];
API_URL = [api - url];

The real values currently don't live anywhere so send me a private message and I'll send you a copy of my .env

Then run the dev server with

yarn dev

And the app will be running on http://localhost:5555/

---

You can also run the static version of the build using serve.

Install serve if you don't already have it

npm install -g serve

Then run

yarn export
cd out
serve -p 5555

And the generated static app will be running on http://localhost:5555/

Technologies

Make sure to familiarise yourself with the tehchnologies used in this project:

• NextJS
• Typescript
• Styled components

Testing

We use Jest and Cypress for our tests. As well as ESLint for linting.

Unit tests

To run unit tests use:

yarn test:unit

We use snapshots with jest. To update them, run

yarn test:unit -u

or

yarn update-snapshots

Don't forget to commit them!

End to end tests

Make sure you have the application running on port 5555 then run

yarn test:e2e

to open cypress test runner and watch them go. If you only care about the outcome, instead run

yarn test:e2e:headless

If they fail you'll be able to see video recordings and screenshots in test/e2e/cypress/videos and test/e2e/cypress/screenshots respectively.

Linting

Simply run

yarn lint

to check your code against the rules.

Hooks

yarn test

Is a combination of unit tests and lint. I highly suggest you to add it to your pre-commit or pre-push hook to avoid the infamous "Fixing lint" commits

What's next?

• Set up some CI for e2e test. (Lint and unit can be ran on netlify but not e2e).
• Find a way to get dynamic global nav + footer. I see two options:
  • Transform them in React components and put them in the component library.
  • Curl them at build time and somehow inject the html into the components. (I haven't been able to figure that one out yet)
• Connect to the backend API
• ???
• profit.