Development of a web application for searching air tickets using Angular 18

The 18th version of the popular Angular framework was recently released. Dynamic development, as well as community interest, helped Angular become one of the leaders. In a series of articles, I will talk about the latest version using the example of an application for searching and booking airline tickets.

What will be included in the course:

• Creating a new application using Angular CLI without using the Nx monorepository;
• Core implementation (Google Analytics, Yandex Metrika);
• Project setup (linters, stylers, ssr);
• Creating the basic structure of the application;
• Implementation of UI KIT;
• Using the framework's capabilities to create similar pages;
• Integration with third-party API.

All articles describe the pet project I implemented - Buy & fly.

I used travel.alfabank.ru as an example.

The question may arise why I didn’t take https://tinkoff.ru/travel. It really pains me to look at the former Tinkoff Bank. Everything I loved about him begins to stagnate and fade.

What will be special about the project:

• Signal - signal will be used for input and in general for variables, which allows you to completely get rid of changeDetectionRef.
• @if, @for, @defer, @let - new Angular template syntax.
• NavigationPaths is one of the solutions for unifying paths.
• MetricService is a common service for sending analytics to various systems.
• Maximum reuse of everything possible.
• Development of your own UI KIT.

What was not included in the series of articles:

• SSR optimization;
• Setting up full SEO (returning 404 status for non-existent pages);
• NgOptimizedImage. Although I use image directives, they are worthy of a separate material for analyzing all the subtleties.

The result of the cycle will be a website with a search for cheap air tickets.

In the mobile version:

You can watch the demo here - buy-and-fly.fafn.ru.

The application uses an external API - travelpayouts.com.

• Aviasales - API for finding cheap tickets;
• Hotellook - API for searching hotels.

Of course, there should be advertising from Aviasales, but they didn’t pay me?, although I didn’t ask.

How to use the tutorial:

• You can do everything sequentially and see all the articles one after another.
• Or using github, download and deploy the application (keys from travelpayouts will be required for correct operation). And during the analysis, refer to the necessary parts.

If you have problems with API access keys, write to me, maybe I can help with something, but in general, registering on travelpayouts.com takes no more than one minute.

In the next article we will look at creating a new application.

Links

All sources are on github, in the repository - github.com/Fafnur/buy-and-fly

You can watch the demo here - buy-and-fly.fafn.ru/

My groups: telegram, medium, vk, x.com, linkedin, site

The above is the detailed content of Development of a web application for searching air tickets using Angular 18. For more information, please follow other related articles on the PHP Chinese website!