yqni13 taxi-varga

$\texttt{\color{teal}{v1.0.0-beta.2}}$

Technology

  Angular

  RxJS

  ESLint

      
      
      
      
      
      
      
      

  Node.js

  Express

  i18n

      
      
      
      
      
      
      
      

  Google Places API

  Google Routes API

TRY LIVE DEMO

How to:

Start

Get startet with npm install (/frontend and /backend) to create necessary modules and run ng serve (/frontend) and node server.js (/backend) to start your local servers. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files. To enable the Google API calls, it is necessary to serve the application on https, even in local environment. Therefore, you need to use a self-assigned certificate and set your local environment ready to trust. After some additional changes (backend: server.js must include key/cert and create https-server => see commented lines, frontend: I need to add proxy configuration and adapt my routes in api-services), the frontend part can be served with a command including the key/cert ng serve --ssl true --ssl-cert <path>/filename.crt --ssl-key <path>/filename.key --open which will open automatically on https://localhost:4200/.

Build & Deploy

The project at /frontend is hosted by Netlify meanwhile /backend is hosted by Vercel.

Overview

$\textsf{\color{teal}Features}$

💠 Angular v18 standalone with routing + nested routes on id

🔁 Google Routes/Places API usage in backend

🔍 Custom search-input form component combined with Google Places API

📋 Custom form components (text-, textarea- & select-input)

🔧 Custom validation Angular/Express-Validator

📧 Mail service with node.js & nodemailer for Backend

📶 Http interception + custom snackbar modal

🌚/🌞 Custom color theme (dark/light mode)

🌐 i18n (internationalization) - translate to german or english

📱 Responsive design 400px > width < 1800px via flexbox & media queries

$\textsf{\color{teal}Customized form}$

All services take input for calculating the offer by addresses, timestamps and checkboxes/radio buttons as well as customer data like name, email, phone and notes. For full control, custom form components in combination with custom validation are used. The example of figure 2 shows built-in required-validator as well as custom time-related validation to be highlighted via red warning symbol and regarding validation message. Data validated by backend inform user via (custom) snackbar-message of invalid input.

Figure 2

$\textsf{\color{teal}Google API}$

Data from Google, based on the RoutesAPI and PlacesAPI, is used for the calculations and address suggestions/autocompletion. The user can type in the search field for his address and gets a max of 5 addresses listed as a result of the current input. Figure 3 shows, that after every change of the search input, a request is sent providing the listed options in the response. Clicking on an option sends a final request to get all details to the selected address/place, which is necessary to continue the service. If no option is selected, the form will be invalid and the regarding validation message displayed. Google demands to display their logo if a map or place-data (in this case the address options) are used.

Figure 3

$\textsf{\color{teal}Theme + Internationalization}$

The webpage offeres two theme settings: $\textsf{\color{gray}{dark mode}}$ & $\textsf{\color{goldenrod}{light mode}}$. The information on the active setting is stored in the localstorage with dark mode as default setting at the beginning. Additionally, internationalization was implemented (via ngx-translate/core & /http-loader) and at this point 2 languages are available to select (see Figure 4). Dynamic and static texts can be displayed in english or german by choosing the regarding option in the footer. The value gets saved in the localstorage (same as the colour theme) and will stay translated in the selected language. To improve maintanence, the TranslateHttpLoader was customized to join multiple .json files for the same language translation rather than the usual way with only 1 file per language (see custom-translate-loader.ts).

Figure 4

Updates

list of all updates

$\textsf{last\ update\ 1.0.0-beta.1\ &gt;&gt;\ {\color{pink}1.0.0-beta.2}}$

• $\textsf{\color{red}Patch:}$ Added sessionToken to address-input.component to upgrade billing efficency (now only a session is charged instead of each request).

Aimed objectives for next $\textsf{\color{green}minor}$ update:

- update Google Places API to Places API (New)

- update email format