<aside> 💡 This document is written by DatPQ3, KhoaTD15 and HuyVPT

</aside>

Tracking, Shipping. This application help senders to find provider service (who responsible for delivery the packages to receivers).

This project was developed by C197_HCM_FR_Frontend

It's time express your style. We not only develop the user interface but also take the challenge to design such a UI with well functionality and properly user story.

The important part is you must have a grasp of the problem we're going to solve. It like a tracking and shipping service such as FedEx, this project aims to provide the providers that have the shipping service. After packing and fulfilling the information of the shipment including necessary information about the user that going to receive the package, the sender chooses a provider to take care of it.

The project has developed in Angular 8+ and fast development open-source CMS strapi.

Backend:

Quang Dat Pham / angular-fa-strapi-backend

Problem Analysis

Firstly, take a deep look at problem details. After understanding the requirements, the next step is analyzing the functionalities on each page and draw the screen flows to get the overall view in our project. Then decide how many components do we have and estimate the time.

Let's check out the design tools:

• Balsamiq Wireframes is a rapid low-fidelity UI wireframing tool that reproduces the experience of sketching on a notepad or whiteboard, but using a computer.
• Figma is a browser-based UI and UX design application, with excellent design, prototyping, and code-generation tools. It's currently (arguably) the industry's leading interface design tool, with robust features that support teams working on every phase of the design process.

Details

Prerequisites

• TypeScript fundamental
  • Variables, constants, types, operators, functions, interfaces, classes, generics
  • Code organization: modules(don't be confused with Module in Angular), decorators, namespaces(not recommend)
• Angular
  • ng CLI comands
  • Modules, Directive, Components, Data binding
  • Service & Dependencies Injection
  • RouterModule (root-routing, children-routing, canActivate, canDeactivate)
  • Observable (RxJs)
  • Handling forms with Reactive Form
  • HttpClientModule (making HTTP Requests, configure Interceptors)
  • Authentication
• Restful APIs
• Strapi.io