The design of the page was inspired by CoinMarketCap
The hosted project website is available under exchange.lexer.dev
- React
- TypeScript
- Vite React TS boilerplate
- SWR library for data fetching
- Ant Design System
- Sass CSS preprocessor
- Cypress e2e testing framework
- Firebase hosting
Exchange data is fetched from CoinGecko's API. The result contains extended information about each exchange, including trust score, trading volume, exchange location and logo URL, current token prices.
This data is fetched once per hour and cached using the SWR library.
The application is build using fluid design and adapts to any screen resolution
Fully functional search functionality provided by JS-Search plugin. It runs over cached items and the result is shown instantly.
This project was bootstrapped with Vite React TS boilerplate.
The project is hosted on Firebase and available under exchange.lexer.dev
- Cypress Testing Framework is used to test end-to-end functionality on each page
- Test suite definitions are available under ./cypress/e2e
- All network requests are stubbed with fixtures available under ./cypress/fixtures
- Cypress application can be started by executing
npm run cy:openfrom another terminal. Please make sure that client application is running in the main terminal - Select
E2E Testingoption once the application starts, then select Chrome browser
- In the window which opens next select one of the available spec files, e.g. landing.cy.js
- The respective test suite will execute automatically producing a visual feedback which can be followed along. Each test case can be replayed by navigating over them with the cursor.
- Cypress also works in a headless mode where it will run all test suites and generate screenshots/videos in case of any issues. It can be started with
npm test
- API responses are cached and stored in browsers' storage
- Image assets are cached by the browser
- Install packages by running
npm installin the root folder - Run application with
npm start
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the Cypress test runner
Launches the interactive Cypress application with extended functionality.
See the section about running tests for more information.
Builds the app for production to the dist folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Build the app and deploys it the Firebase hosting (if connected)
Runs ESLint and Prettier tools to check code formatting and fix issues
The design of the page was taken from the CoinMarketCap. This project was created for demonstrational purposes only. I do NOT intend to produce any commercial content from this!