The application contains 2 pages: Market overview and Liquidity analysis page.
I used the @angular/router to handle page resolve. It's not so necessary here, but
in most application it's better to use router because of application support simplicity
in future.
To handle with chart I used chart.js. This library is building charts by using canvas.
This way charts is rendered way much faster, but they are not so interactive in most cases.
In this application using canvas charts is not a problem.
To simplify deployment I used Docker.
On top of it in this application a lot of development stuff, such as linters and commit hooks. They make developer life easier.
For component testing I used karma, just because it is installed by default. If I had more time I would choose Cypress for component tests.
For e2e tests I used Cypress. This tool is extremely handy, have good interface and a lot of good points, such as screenshot on failure, module system and so on.
docker build -t wattx-challenge .
docker run --env-file=".env" --env API_KEY="..." --rm -p 8080:80 -it wattx-challenge:latestThe application will be available at http://localhost:8080
Important! You need API_KEY to run application You can find it on coinmarketcap api page
You have to set API_KEY to environment and run server
API_KEY=... npm run start
# or for windows
set API_KEY=... && npm run startOr you can create file .env.local alongside .env with this content:
API_KEY=...And run server without any needs to set API_KEY to environment
npm run start- UI - there is no pretty design, fonts etc.
- PWA hasn't done
- Loading/Error states
- Responsive for chart
- Haven't done correct way to writing css @media queries
- No aria-labels
- .env file works only for dev proxy now. It isn't change process.env now
- No correct meta tags, such as theme-color, og:*, description, etc.
- ...and a lot of other stuff
I decided to stop at this point. If you don't mind I can explain how to do that things in call.