Exercise - Extend your Coin Exchange with more functionality

Extend your Coin Exchange with more functionality.

The scope of this exercise depends on you. Some hints:

  • Add more styles based on your imagination
  • Add a helicopter button that adds $1200 to your balance
  • Buy and sell coins
  • Display a graph of prices
  • Display news and other details on a coin upon click

Just wanted to say I really enjoyed this course! Zsolt, I admire your teaching style and look forward to future courses at the academy from you. All the tips, tricks, and extra effort into explaining things so students will understand what’s actually going on at a fundamental level is greatly appreciated! :star_struck:

Will likely add much more later but for now here is my project submission:

  • Added some basic styling and formatting
  • Added a “Helicopter Money” button

And here is the github pages link. I didn’t have a github pages landing page until today. It’s super basic but it will do for now.
https://jermay.github.io/coin-exchange/

Next I will be converting my bootcamp example projects to React! The Coin Parrot CMC clone, Academy Ethscan, and personal implementation of Academy Kitties. :rocket:

2 Likes

Great job, you are the first one who posted a working solution. Even your commit messages are meaningful.

Hopefully, you are now equipped with cutting edge React skills.

1 Like

Hello, this is my github page :smiley:

https://ibourn.github.io/coin-exchange/

and my repo :

https://github.com/ibourn/coin-exchange

(The link launches on 404 cause i implemented router and redirect. The github page url of the page don’t match but all is ok just navigate with the menu. (i will search a way to avoid to have 404 on the first page via github-pages)) Solved! :grinning:

As an extra, i used : router, navlink, redirect, useContext. And i tried to make nested routes.
The login function is fake, as there’s no back-end. I just use the hook useContext to simulate this functionality.
You need to login to access : buy, sell and balance, and to go to the profile page.
To refresh the price you have two options : as in the course (the button is called ‘lazy’) or automatically (the app refresh the prices each 20 seconds).
When there’s a change in the price, it blinks green or red to gain attention.
In the table, if you click a coin name you will get the latest tweets about it.

I’d like to do more, as learn the MERN pattern… or simply to use useParams… :thinking:but i’ve a project waiting for the bootcamp. (This web app will be a good base).

I really enjoyed this course, the way you make understand the process and all the things around (github, visual code).

When will the next course to go further! :smiley:

1 Like

On your router issue: use HashRouter (https://reactrouter.com/web/api/HashRouter). The rest of your code stays unchanged, and instead of regular routing, you use a hashmark, and the route is appended after the hash in the URL. This won’t conflict with GitHub pages.

Cool that you added some creativity (green, red animation).

For the login on server side, indeed you can use Express and Mongo; or also Django if you prefer Python. Both are super easy. But then, for the server-side code, you’ll need another deployment method, such as Heroku, Azure, AWS, or even Netlify using a special cloud functions implementation.

1 Like

Thanks.
I saw the HashRouter option, but i just add a route for ‘/coin-exchange*’ pointing to the same page than ‘/’. It works fine.
I will look Express, Mongo, Heroku soon.

Your project looks much better than mine! I was eager to jump into converting my academy kitties project into React. If you also decide to do your kitties project with React you’ll find it easier, but also more work as Filip’s samples use jquery. React-bootstrap is fun too and Styled Components plays nice with it.

Cool, even better, great job finding a workaround.