Step 7: receive bitcoin

The actual Bitcoin transactions and Lightning Network invoices are going to be handled by core – it’s not yet part of this Pull Request, but we’re preparing for it by adding backend-shared, a library with interfaces and enums shared between backend and core, see angular.json: Here, we introduce the first two core API urls in …

Step 7: receive bitcoin Read More »

Step 6: backend

In this Pull Request, we are adding a backend to our project. We will be using PosgreSQL database running in a Docker container in our local development environment. We will also upgrade Angular to version 8, just because it came out recently and there’s no reason not to keep our dependencies fresh. We will begin …

Step 6: backend Read More »

Step 5: stub server

The stubs we introduced previously are good enough, but there’s a serious drawback: the stubs that are only supposed to be used in development and end to end testing become a part of our production build, along with the ApiServiceStub – this is obviously less than ideal. A better solution is an external stub server: …

Step 5: stub server Read More »

Step 4: log in and reset password

The code at this point is deployed to https://04-stubs.laas.sh/. In this PR, we are adding multiple pages in app-routing.module.ts: Let’s go page by page. Log In page We render a form with two inputs in log-in-page.component.html: The logic is found in log-in-page.component.ts: We are using Reactive Forms approach here, note how formGroup is constructured using …

Step 4: log in and reset password Read More »

Bonus step 3.5: routing animations

Let’s have a little fun with animations: https://github.com/laas-sh/laas-sh-app/pull/5/files. We are going to add an animation on every route change. To do that, we attach an animation to the router-outlet wrapper in app.component.html: We are introducing a new observable in MiscService called page$ – it will emit every time the page changes. This is what it …

Bonus step 3.5: routing animations Read More »

Step 3: i18n, multi-lingual support

Fun fact: i18n stands for internationalization and can you guess what 18 means? Hint: it’s the same meaning as 11 has in a11y. We are going to support English, because everybody speaks it, and Russian, because I speak it. Let’s dive in: https://github.com/laas-sh/laas-sh-app/pull/3/files (deployed to https://03-multilingual.laas.sh). We’ll need to render pages in correct language in …

Step 3: i18n, multi-lingual support Read More »

Step 2: SSR, Server-Side Rendering

Our second PR adds SSR: https://github.com/laas-sh/laas-sh-app/pull/2/files (deployed to https://02-ssr.laas.sh). SSR is pretty much obligatory for any SPA (single page application) – without the Server-Side Rendering, the search engines don’t see your app content, only an empty shell. If you checkout the first branch 01-initial-setup, run npm start and then open page source in your browser, …

Step 2: SSR, Server-Side Rendering Read More »

Step 1: Initial Setup

We begin here, with our first PR: https://github.com/laas-sh/laas-sh-app/pull/1/files. To follow along, run these commands one by one: Then open http://localhost:4200/ in your browser, you should see this: The app doesn’t do much at this point, but there are quite a few things we bootstrap here. First of all, it’s an Nx monorepo already, with a …

Step 1: Initial Setup Read More »

Show me how you move

This blog is going to be very opinionated. I’ve been writing software professionally for almost 30 years now, and before that I was competing on a global level as a school kid (representing Ukraine in a World Olympiad in Informatics back in 1993), so I have a lot of wisdom to share (and not too …

Show me how you move Read More »