Exercise - Extend your Coin Exchange with more functionality

React Web Development Course
#81

https://github.com/THEMERLINGROUP/Crypto-Exchange

2 Likes
#82

Great course thankyou so much! I will hopefully add more to this later but for now i Added a plus 1200$ button and a little style.

https://ultra-lord.github.io/coin-exchange/

I really enjoyed this class and really learned alot.

2 Likes
#83

Question:
When the assignment suggests, " a graph of prices", does it literally mean ā€˜1 graph of pricesā€™ (on the page somewhere) or, a graph for each coin in the table?ticker screen shot

I have been trying to figure out how to do the above, as well as, display the specific icons (img) to each respective coin.

I cannot figure it out for the life of me. I have been trying to search/fetch this info from coinpaprika and am not sure where to find it. Many of the api adresses from coinpaprika (e.g.https://api.coinpaprika.com/v1/coins/{coin_id}/exchanges) say, ā€œSorry, that page is missingā€.

Should I be making my own array of images (of the coin icon and fake graphs), then assign them by the coin id? Hopefully not as I would prefer to do this through the coinpaprika API, with access to live graph imagesā€¦(or other APIs like it).

Any hints on how to accomplish this or where to find that data/info/properties?

I feel that maybe this should be a lesson in itselfā€¦which I would love to see.

1 Like
#84

Thanks for the course! Learned a lot but still have plenty to digest :smiley:

Here my repository:
https://github.com/cmaximilianoschmid/coin-exchange-first-react

And the website:
https://cmaximilianoschmid.github.io/coin-exchange-first-react/

1 Like
#85

Hi there, Iā€™m just a fellow student here but I used Coingeckoā€™s API instead, I just find it easier. Hope this helps

1 Like
#86

Hi CryptoXyz,
Thanks for the guidance. I checked it out and indeed, I can find what I am looking for much easier.
This does help!

#87

Hi Uyan,
Thanks for posting the youtube link. I checked out the guyā€™s react course in his links. Such a great resource!

1 Like
#88

Hi,

Here is the link: https://tagupta.github.io/Coin-Exchange/
To be honest, that graph took me a long time. Although Iā€™m glad I did.
Iā€™ve also used modal box, alert for a couple of features.

I would love to hear feedback about the same.

Thanks.

3 Likes
#89

Here is my github page: https://wleskay.github.io/coin-exchange/

and github repo: https://github.com/wleskay/coin-exchange

  • Added a ā€œhelicopter $ā€ button
  • Added Buy/Sell
  • Added Refresh button that refreshes all prices instead of one at a time
  • Added functionality to update total balance and each coin balance

Decided not to spend anymore time on further updates to continue with other courses.

2 Likes
#90

Yo, this is awesome!

Obviously the Log in / Sign up functionality is not there - perhaps better to remove it unless you intend on building upon it? :wink:

And with the coin pages with the tweets - love the idea but the formatting could do with some work.
And also with the title, 20 last tweets about : btc-bitcoin
Itā€™d be way better if it was the name, rather than the id.

But overall, extremely solid.
I struggle with React so Iā€™m looking forward to getting to your level! :heart_eyes:

2 Likes
#91

End result at: https://nwkcoins.github.io/iotCoinExchange/

1 Like
#92

Why is my gh pages linking me to thisā€¦?

https://wlamarche.github.io/REACTcoinexchange/

I canā€™t get my app to properly deploy. Any ideasā€¦?

#93

https://github.com/WLaMarche/REACTcoinexchange

#94

Trying to publish the project to github pages but Iā€™m getting 404. Anyone can help?
Update:
I was able to fix it by doing the following:

npm i react-router-dom

Then in the App.js I imported HashRouter and placed the entire div block with the app content inside <HashRouter>.

With that I was able to get my app to work in github pages.

One last note. I did not have to create a repo as my username.github.io. I just kept it as coin-exchange. Still works fine given that I have supplied correct homepage url: https://sedoy107.github.io/coin-exchange/#/.

Aside from that I also had to bring the browserlist clause out of the package.json and store in the .browserlistrc file. Without that I was getting an error message during the build.

P.S.
@zsolt-nagy thank you very much for this course. It was very well presented and explained. It helped me a lot with learning React and JS.

P.P.S.
I havenā€™t finished the course yet. So I will try to customize it and make it look nicer and more personal.

1 Like
#95

It is done!

Here is a link to my GitHub pages:

https://sbelka-1703.github.io/coin-exchange/?#

Link to the GitHub Repository:

https://github.com/sbelka-1703/coin-exchange.

This took a while, but I learned a lot from doing this exercise. After this course, I really do feel that I have a good grasp of the core concepts of React. Thank you @zsolt-nagy, for being an amazing instructor, and thank you @Malik for guiding me through uncertainties!

My main focus was not styling, so I only made a few changes in that regard. Instead, I focused on the functionality of buying and selling. I used the npm package called react-modal, to create a pop-up window so the user can input the amount of coin they want to buy and sell. You also get error messages displayed in the modal if the user tries to buy without having enough USD or when the user tries to sell coins they donā€™t have. Also, when you press the buy button, it does get the latest price from the API, instead of you refreshing the price.

image
image

2 Likes
#96

Hi @sbelka1703,

This is fantastic! Keep up the great work! We are all rooting for you. :smiley: :clap:

1 Like
#98

I like that you took out the individual refresh buttons and just have a refresh for all pricesā€¦
my thoughts exactly

#99

Hereā€™s my repo on Github:
https://github.com/avisas/coin-exchange

this is on Github pages:
https://avisas.github.io/coin-exchange/

I donā€™t know why Github pages shows the readme file instead of showing the coin-exchange page.
I have finished this course and I feel that I have learned a lot but I still have a hard time understanding propTypes and how to implement some functions. I will continue practicing for my part and learn from exercises solved in order to understand how to implement a function correctly.

1 Like
#100

added helicopter money function and random balance in table

app.js:

const random = () => Math.floor(Math.random() * 100)

return {
        key: coin.id,
        name: coin.name,
        ticker: coin.symbol,
        balance: random(),
        price: formatedPrice(coin.quotes.USD.price),
      }

const addHelicopterMoney = () => {
    setBalance((oldValue) => oldValue + 1200)
  }

accountBalance:

if (props.showBalance) {
        helicopterMoney = <Button onClick={props.addHelicopterMoney}>Money Printer Go Brrrr</Button>
    }

return (
        <Section>
            {balance}
            <Button onClick={props.handleBalanceVisibility}>{buttonText}</Button>
            {helicopterMoney}
        </Section>
    )
#101

This was challenging chapter and exercise, but I figured a few things out. My table is not perfect, but I will continue to add more as I move forward. Hoping to understand some of the functions a bit more in the future.

A BIG THANKS TO @zsolt-nagy and @Malik for their teachings, guidance and for making me smarteršŸ˜

Here is my work:
https://github.com/Cielo2021/Coin-Exchange

1 Like