Skip to main content

Angular

Welcome, here is what you will be doing in the next two weeks:

  • Brush up on your Angular skills and read through the materials provided by DECODE.
  • Develop an app which will fetch Bitcoin order book on Binance, current price and draw graph of price for the last month.
  • As you progress, make a new commit every time you finish implementing something (so we can track your progress and give you some useful feedback as you progress). For example:
    • When you finish setting up your project, make a new commit.
    • When you finish with the main screen, make a new commit.
    • ... and so on
  • Use Git Flow.

Suggested "commit" points are marked as little code blocks like this -> Commit Point.

This way, somebody can take a look and monitor your progress on your feature branch.

Each task is started on its own feature branch.

  • After the task is done and when you see a Merge Request annotation, make a merge request from your feature branch to the master branch for somebody to take a final look. Assign it to someone who is assigned to you as your onboarding buddy.

  • Please add comments or suggestions to this document using the "add comment" feature visible at the right side of the document. Add a comment or suggestion for everything that is not explained enough or is misleading to you.

  • You should have enough time to finish this project in 10 days, so take it slowly to learn as much as you can.

Before you start​

  • Get familiar with official Angular docs. We’re using it for creating our onboarding app.
  • We’re going to keep it simple and use a Angular CLI for the project setup. If you want to explore more check out documentation.
  • If you want to know more about the webpack boilerplate, you can check out the GitHub repository.
  • If you're not familiar with TypeScript, you should check out their official documentation and find out why it's so popular.
  • If you're unfamiliar or have never worked with Git, read up on the basic commands. Also, some of us use SourceTree GUI, which provides a nice user interface for all Git-related actions. Check out Git - Book Sourcetree | Free Git GUI for Mac and Windows Git-FER.
  • In this onboarding, we're using Yarn as the package manager, but of course, if you want to use npm, that's also fine. Here are the yarn docs if you want more info.
  • For styling our app we’re going to use SCSS so you can check out their official doc.

Setting up your project​

In this part we are going to use Angular CLI to create our Angular project. Go ahead to Angular CLI docs and follow tutorial to create your Angular project. While setting it up in Angular CLI, remember to choose SCSS as your stylesheet format and “yes” for Angular routing.

Now you have your Angular app created, change to the newly created directory and hit

ng serve --open

in command line, Angular should compile and the browser will open with your app.

Familiarize yourself with the Angular project structure and from what components it consists of.

The goal is to change the title of the Highlight card in app.component.html and change the color of text in it using app.component.scss.

1st Commit point​

We’ve finished the part of setting up our project. Now you can commit your changes and push it as an initial commit to your onboarding repo. If you have found a bug or of course a better way to implement something please share your knowledge with us. We will gladly accept your suggestions that benefit this onboarding!

Add pages to your project​

Start a new branch named feature/app-base. The goal of this task is to use your imagination and create styling and functionality for your app. Since you are using Angular with Typescript use your skills or help yourself going through documentation.

First part​

We are going to be super simple. We will create only one initial page on which we will display buy and sell orders for Bitcoin from Binance. You can check how order book looks on the left side here on Binance. Use your imagination here, display hard coded values which we will make dynamic later on.

Hard coded values separate as buyOrders and sellOrders and put them in array in component.ts and then use *ngFor to show them on the component.html, don’t just hard code component.html making it completely static. You can get help on this tutorial, just switch Heroes for Orders. Remember, use TypeScript here so create Order classes.

Second part​

We will need real data from the Binance API so we can create our order book, you don’t need Binance API key for these kind of operations.

Now create your Angular service which you will use to communicate with Binance API. Help yourself with the docs on how to create service.

Now use Binance API endpoint to fetch order book data, map it to Order classes and show dynamically in your html.

2nd Commit point​

When you’ve finished all of the work create a pull request for base of your app. Assign the PR to someone who’s your buddy on our onboarding process.

Estimate 2 days

Price chart​

In this part we’re going to make a page that represents a price chart of BTCUSDT pair on Binance. Since now you’ve already went through the Binance API try and see which of the methods you can use to make a price chart in your app. We are going to show last 30 days of price opening on Binance.

For making our chart use D3 library and you can use this tutorial to integrate library with the Angular.

You can open up a new branch called feature/price-chart and start with your development.

As a suggestion you can maybe add some additional folders to your project and separate order-book and price-chart as components and then use them on the same page.

Also, in this it would be nice if you could spend a little more time on styling. The styling of the statistics and the layout is all up to your imagination. Maybe it would be a great idea to get some inspiration from professionals? You can check out Dribble to get some inspiration.

3rd Commit point​

As always when you’ve finished all of the work create a pull request for your feature branch and call in your buddy.

Estimate 2 days

Additionally (in case you do all of the above before your 2 week onboarding period is over):

Live order book​

For managing our own live order book we’re going to use Websockets. If you don’t know already what are Websockets read it here or use Google to familiarize yourself with it.

Binance has it’s own Websocket stream where you can listen for order book updates.

State management​

Alright, obviously you are Angular Ninja so you still have little time left. You can now refactor your code to use some state management library for Angular, we suggest Akita because there is less boilerplate code and more Angular-like approach to coding, but there are also others worth mentioning like NgRx and NGXS.