# Development of Web-based Sales Inventory Program 

I would like to post as we proceed with the goal of creating a web-based sales inventory program.


First, set the development environment in Windows 

Go to the nodejs.org website. 

![](https://images.ecency.com/DQmd64Etfkd3a59PGzhFg7TtukoJa8hNUkAmeUF5xbvmF2d/nodejs.jpg)



Install node.js v20.17.0.
![](https://images.ecency.com/DQmdLskTHvtftQpaARAupxpMmVyw2stmQNYBakaUnMXwCUP/cmd1.jpg)




Node.js must be installed to use npm. 
npm is the package manager for node.js.



**Advantages of Nodejs**
1)asynchronous programming
It works using an asynchronous event-based architecture, which can handle multiple tasks at once, making it ideal for I/O-intensive applications.

2)a fast pace 
   Node.js using the V8 JavaScript engine provides high performance.

3)Using a Single Language
  The entire stack can be developed using JavsScript.

4)Manage packages and modules through NPM.
5)Scalability  
     It is suitable for developing highly scalable applications. Asynchronous architectures and event-based models are easy to handle large-scale traffic. 
6)It has a healthy development ecosystem.
7)Easy Web Application Development 

Trying to use node.js for background running.

The front end wants to use react, vite, typecript, tailwildCSS.

Vite is a build tool and features that it uses ESM methods without bundling when developed locally, so the local server runs very fast.

react is a web framework that is used to create user interfaces as part of the JavaScript library. It is a front-end library provided by Facebook.

**Characteristics of react**

1)Data Flow 
Data flow has a one-way data flow that flows only in one direction.
2)Component-based architecture
Create a UI (View) by splitting multiple components. 
3)Virtual DOM 
DOM stands for Document Object Model. 
Create a virtual DOM every time an event occurs. Each time you redraw it, you can compare it with the actual DOM and the state before and after, reflecting only the smallest changes that need to be changed in the actual DOM to improve the efficiency and speed of the app.

4)Props와 State
           Props: The data that is transferred from the parent component to the child component.
           State : Declares inside the component and can change the value inside.

5)JSX 
It is an extended grammar of Javascript.



**Setting the environment**

<pre>
$ npm init vite@latest jangbu -- --template react-ts
$ cd front
$ npm i
</pre>

![](https://images.ecency.com/DQmQq7XbvPJAZhgTKErhg2c9tqYmYYap7zruYRmy3bc8HmA/image.png)


Tailwind CSS Settings
<pre>
$ npm install -D tailwindcss postcss autoprefixer
$ npx tailwindcss init -p
</pre>

https://images.ecency.com/DQmcmVczdZxL452XufVeGg9Ck5sHPHXsq7jgtRJ5tjdiHUQ/image.png


Use Visual Studio code.
![](https://images.ecency.com/DQmcBbT4neozTWnzuvECHAoeyTzqeXqc895PmX7bRLETumu/image.png)




A long way to go, but a thousand miles a day starts with one step

Thank you for reading my post. 😀