Cryptocurrency price comparison application.

Website that compares the price of different currencies with the 10 most important cryptos with the help of a RESTful API.

Table of contents

• Overview
• The project - Features
• Screenshot
• Links
• My process
• Built with
• What I learned
• If I had more time I would change this
• Continued development
• Author

Overview

The project

Users should be able to:

• Select both the currency and cryptocurrency they want to compare prices with.
• Quote a cryptocurrency, viewing its current price along with its highest/lowest price of the day and the 24-hour variation.
• See a spinner/loader while the data is being fetched from the API.
• View the optimal layout depending on their device's screen size.
• See hover states for interactive elements.

Screenshot

Links

• Live Site URL: https://jorgeecheverria.netlify.app/

My process

Built with

• React - JS library
• Vite - React environment
• JavaScript - Language
• Styled Components - For styles
• CryptoCompare - For the Toplist by Market Cap Full Data API
• Tobias Ahlin Spinkit - For the Spinner
• Semantic HTML5 markup - For the web structure
• Flexbox
• Mobile-first workflow

What I learned

• I could have added more than 10 cryptos or more than 5 currencies for comparison, but I think it really does not add much on functionality terms to the application, so I decided to stick to small numbers for simplicity.
• REST APIs are so useful, there is no limit for what they can do for you and how easy it is to implement them in your projects. From face recognition APIs to cryptos quoting, your creativity and imagination are the limit here.
• This is the first project I used Styled Components. I found it very useful as it removes vanilla CSS' specificity problems. I also liked the idea of not having CSS files all over my IDE so I will continue using it for future works. On the cons side, it can get a bit messy to read JSX files with so many custom styled components and this gets worse as the React components gets more complex.
• How to use Spinners while the page is fetching the API data.

If I had more time I would change this

• As I said in previous READMEs: Testing, testing and more testing.
• Other than that, I am more than happy with the website and it does its job very well.

Continued development

After this website I am going to start building my Portfolio and leave theory a little bit to the side. After my Portfolio is finished I am planning to study Testing and TypeScript.

Author

• Twitter - @CokoEche
• LinkedIn - [@jorgeecheverria-dev] (https://www.linkedin.com/in/jorgeecheverria-dev/)