This project aims to fetch the most valuated cryptos in the market and provide the option for the user to connect his wallets and show it's balances.
Although very small and simple, I decided to use Redux for state management since it's been a long time that I have used that library and it was my first contact to the toolkit. Simple CSS styles through Tailwind, which is a very easy to learn but powerful library. Coin Gecko API was used to fetch data. To connect to Ethereum wallets I used the most recent protocol which is the EIP 6963. No libraries like Web3 js were used to handle the connection to the crpyto Networks, only ethers lib was used once to decode the balance response. Vitest and RTL were used for tests.
This app is deployed at https://crypto-list-omega.vercel.app/
If you want to run on your computer the steps are:
- Install node
- git clone the repository
- go to the src folder
- npm install
- npm run dev
- bonus: create Coin Gecko API Key and add it to the .env file so it avoids getting your browser blocked from fetching data
- Shows top 10 crypto with refresh button
- Crypto details page with chart
- Connect any Ethereum wallet through the EIP 6963 protocol (supports multi wallet)
- Shows user Ethereum balance
TypeScript |
CSS 3 |
JavaScript |
Autoprefixer |
PostCSS |
React v18.2.0 |
React Router v6.22.3 |
Recharts |
Redux v5.0.1 |
Tailwind CSS |
ESLint |
Git |
Vite |
jsdom v24.0.0 |
npm |
| NAME | VERSION | LAST UPDATED | LAST UPDATED BY | LICENSE | VULNERABILITIES |
|---|---|---|---|---|---|
| @testing-library/jest-dom | v6.4.2 | 03/22/24 | lucas | MIT | N/A |
| @testing-library/react | v14.2.2 | 03/22/24 | lucas | MIT | N/A |
| @types/react | v18.2.66 | 03/22/24 | lucas | MIT | N/A |
| @types/react-dom | v18.2.22 | 03/22/24 | lucas | MIT | N/A |
| @typescript-eslint/eslint-plugin | v7.2.0 | 03/15/24 | lucas | MIT | N/A |
| @typescript-eslint/parser | v7.2.0 | 03/15/24 | lucas | BSD-2-Clause | N/A |
| eslint-plugin-react-hooks | v4.6.0 | 03/22/24 | lucas | MIT | N/A |
| ethers | v6.11.1 | 03/18/24 | Lucas Portella | MIT | N/A |
| react-dom | v18.2.0 | 03/22/24 | lucas | MIT | N/A |
| react-redux | v9.1.0 | 03/22/24 | lucas | MIT | N/A |
| react-router-dom | v6.22.3 | 03/22/24 | lucas | MIT | N/A |
| tailwindcss | v3.4.1 | 03/17/24 | lucas | MIT | N/A |
| vite | v5.1.6 | 03/22/24 | lucas | N/A | N/A |
Generated via Stack File