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.

1 Like

Cool, even better, great job finding a workaround.

1 Like

Thanks you very much @mayjer. Yes i will try to do kitties project with React but at the moment i’m trying to finish the coin market cap clone with react with theming, charts… I’m a little stuck. I didn’t plan on a lot of small details, so I’m going to downgrade the features (I look forward to starting the ETH projects :sweat_smile:).
And yes for react-bootstrap. I should have used it. Using the regular bootstrap requires many trick (for drop down…)

1 Like

Finally, i used regex in paths, it’s the better option i found.

1 Like

I’ve another underwhelming submission. I just added the obvious account limit checks. I’d like to learn more about using multiple pages and pop-up dialog boxes.

But like everyone else here so far: I need to get back to work at the BootCamp. I was going to bend the React coin-exchange into a re-do of the Coin Market Cap clone (project 1), but I’ve already slipped the schedule far enough for this detour through React. I will however redo my critter in svg instead of css (I took 2 courses in that lately), and do everything henceforth in React-bootstrap.

This was by far the densest course at the academy. It’s chock-o-block full of tips, tools, references, and cheats. My notes fell behind in the API section and I’ve still a ton of documentation reading to catch up on. Hopefully that will round out in the coming months (at BootCamp).

I would also like to take your GitHub course. I’m a refugee from ClearCase and still not settled in the culture.

And if you’ve a NodeJS course I’d love to take it.

And React 201 and 301 would be welcome. It’s plain you only covered the core third of the material in this course. You’ve obviously 2 more courses worth to say that I’d like to hear someday.

1 Like

You would be surprised how often this core is solely used in companies. There are of course topics like Redux, Redux Saga, React Router, advanced React patterns etc., but often times the core is what gets you into companies or gets you started with the technology. Often times people without relevant experience start fiddling with advanced stuff (201/301), and then a senior engineer comes along and asks the engineer to simplify and use just the basics for the sake of writing maintainable code.

However, once the basics are rock solid, moving forward is inevitable.

1 Like

I’m not finished with it yet, and will add to it while Im learning and taking my other courses… I love these courses so much, that I plan on always referring back to them and reposting as I improve! Thanks Zsolt!

https://superstar8.github.io/CryptoCoin-Exchange/

2 Likes

Here is my project!
https://timmy-bergkvist.github.io/coin-exchange/

This is the first time I tried React and I really liked it. Thanks for a great course! :+1:

2 Likes

There is not much left from the implementation, good job so far!

When it is hard to read the contrast between a color and a background, check out https://contrast-finder.tanaguru.com/ and make sure contrast is at least 3.5:1. If you don’t want to read the CSS or the developer tools on which color you use, you can also use the Chrome extension Color Pick Eyedropper.

2 Likes

Great job, congratulations on following the course to the end!

2 Likes