A React JS front end application allowing users to create TODO checklist's. This repo is a standalone UI app that interacts with an API to persist data to a database.
The actual application can be used by visiting:
https://todo-checklist.surge.sh
The app is accessible on any device/viewport. Auth is handled by Auth0. You can login using your Github or Google account. Or you can sign up for an Auth0 account. You are limited to 20 lists (with unlimited TODO's) per account. Enjoy :-)
The currently supported version of node is v14.5.
Install the dependencies with:
$ npm i
In a file called .env.development.local, set the following ENV vars:
REACT_APP_API_URL
REACT_APP_AUTH0_APP_NAME
REACT_APP_AUTH0_CLIENT_IDRun the app in development mode with:
$ npm start
Now browse to https://127.0.0.1:3000 in a web browser.
Note: Using localhost will not allow auth0 to work with the API, so always use 127.0.0.1.
The page will reload automatically on save of any code changes. You will also see any lint errors in the console.
The tests are system wide (requiring an API) and written using Cypress.
First, you'll need to set the CYPRESS_JWT_TOKEN ENV var in your shell (to bypass auth). Or you can create a cypress.env.json file at the root of the repo and set token value in there:
{
"JWT_TOKEN": "Bearer xyz"
}You can grab a new token by visiting the app, logging into Auth0 and then copying the contents of your auth token from the browser's localStorage. Each token is valid for 60 minutes.
First start the web app with:
$ npm start
Then run the tests with:
$ npm test
During development of tests, open the Cypress test runner with:
$ npm run cypress
By default, the tests will run against 127.0.0.1:3000. Set the CYPRESS_BASE_URL ENV var to override this.
The tests should be written to create their own test data and clean up after themselves. This works well when the tests are passing but if they fail, they'll likely leave their test lists lying around; so you should delete these manually before re-running them.
The automated tests are great (and essential) but they can't catch everything so some manual testing is required. Manually test any features you write and then code the scenarios into the automated tests.
The following are some guidelines/scenarios to manually test with in addition to writing automated tests:
| State/Scenario | How To Test | Expected Result |
|---|---|---|
| Auth | Login and out of the app via Auth0 | Auth works correctly |
| Fast UI | Interact with the UI super fast (test everything) | It shouldn't lag |
| Responsive CSS | Using dev tools mobile emulator with several viewports | It looks and feels almost native |
| Error boundary | throw new Error('test error'); from a component's render |
ErrorBoundary component renders |
| Error state | API returns a 500 response | Error component renders |
| Loading state | API sleeps for 2 seconds and then responds | Loading component renders |
| Deployed Cold Boot? | Deploy to prod and hit the URL after/if the API goes to sleep | Loading component renders |
Remember to:
- Write automated tests
- Refactor the code to make it correct, readable and efficient (in that order)
- Lint the code with
npm run lint
Ensure you have a .env.production.local file at the root of the repository with the correct ENV vars set.
Install the surge CLI tool with:
npm i -g surgeTo deploy to surge.sh, run the following at the root of the repo:
./deploy.shAfter a release, sanity check the app's deployment to the production environment.
This project was bootstrapped with Create React App.