Motivation

In the first five years of my career as a software development engineer, I have been focusing on the front-end development field, wandering around the three major front-end frameworks, occasionally participating in some which framework is better, which is more powerful, should the front-end use Redux or Mobx, or the newcomer Zustand, or being complained by the back-end guys "You front-end just draw pages!".
In the sixth year, I joined a foreign company and started my full-stack development career.
When I really got in touch with the full chain of software development from front-end to back-end, until the completion of delivery to users, I realized the shortcomings of being a front-end developer before. I seemed to have never cared about the ins and outs of application data, nor thought about what adjustments I should make when my application reaches a certain scale.
Next, I will mainly use javascript to show how to complete a full-stack project step by step, and I hope to bring some help to you who are learning full-stack.
Are you ready? Let's get started!

What we'll be building

What we'll building is a project whitch can record our short trip,i can it Trip,and will includes those below features.

• Register & Login.
• Submit short trip information (Form Type).
• Email the short trip information to related contact person.
• Import trip information by exel.
• Export trip information to PDF and exel file.
• History trip information view (Table operation).

What we will involves

Here's main features we will learn in this tutorial:

FrontEnd

• Environment Config management : How to manage the project configs of different environment by yaml files.
• Routing : How to config
• Responsive Design : Design a webpage that can show different style for different size device.
• State Management : How to manage the shared state and presist some state.
• Data Fetching :

BackEnd

• Environment Config management :
• openAPI :
• Microservices :
• Message queue and cache application :

Devops

• Github action : How to use github action in your project and write workflow files.
• CICD : How to use github action to build and deploy project automatically.
• Shared Github action component : How to create shared github action components whitch can used in multiple project.
• Azure static web: How to deploy static web to Azure.
• Azure service: How to deploy backEnd service to Azure.

What you should do before start

Before you start learning fullStack jonry, you should know or do the following things.

• Understand basic javaScript syntax. > Reference
• Understand basic React ( >= 16.8 version ) and NestJs syntax.
• Download your favorite IDE ( VScode is recommended,Download here )
• Install Nodejs locally.( 18.17.0 or later version,Download here )
• Install Git locally.( Download here )
• A github account is needed.( Download here )