🆕 PIA APP 🌍 https://pia-evo.vercel.app/ ( unlimited access )

This is 🚨 working in progress 🚨 Electronics Parts/component Inventory Application called PIA using ExpressJS and ReactJS but without CRA.

Please note: WIP ⚙️ means, proof of concept and not finishid yet !

Light	Dark

More screenshots @ https://github.com/vlrmprjct/pia/tree/main/doc

• Introduction
  • Alternatives
  • Future Tasks
• Quick Start
• Documentation
  • Authorization
  • Storage
  • ESLint
  • Nodemon
  • Express
  • Concurrently

There a many ready to use Inventory-Systems or -Applications written in PHP or other languages with a huge overkill about functions or server configurations. What I need is a lightweight system running local or everywhere with a fast lightning search and easy to extend.

Why without Create React App ?

CRA is a quick way to get started with React development and it requires no build configuration. But it completely hides the build config which makes it difficult to extend. In short it is a Black Box! Another point is, we don't need all with CRA shipped packages.

• DOT.ENV Support ✔️
• Initial setup process
• Build Process ✔️
• Vercel App Integration ✔️
• Electron Wrapper ( ? )
• Octopart API Integration ( ? )
• OEMSecret API Integration ✔️
• BOM Imports ✔️
• Projects BOMs
• Dark Mode according OS Settings ✔️
• Github Login ✔️
• Github Gists as DB
• Repository as Storage using GitRows ✔️

• Part-DB
• Partsbox
• Partkeepr
• Bomist
• Binner
• Applications using Octopart

# Clone the repository
$ git clone https://github.com/vlrmprjct/pia

# Go inside the directory
$ cd pia

# Install dependencies
$ yarn

# Start development server
$ yarn start

# Build for production
$ yarn build

The authorisation is quite simple by using Github as Authorisation provider. So no username and passwort is needed for using PIA. Just a Github-Account is needed.

We use GitRows as Data-Storage Provider. Gitrows fetches data from a repository, whether is it public or private.

In our case, it is a private repository, so no one has access!

Test it: PIA-Datebase. You should get a 404 response.!

We using Airbnb's Javascript Style Guide which is used by many JavaScript developers worldwide. Since we are going to write both client (browser) and server side (Node.js) code, Optionally, we can override the Airbnb's configurations to suit our needs. I have turned off no-console, comma-dangle and react/jsx-filename-extension rules.

Nodemon is a utility that will monitor for any changes in the server source code and it automatically restart the server. This is used in development only.

Below is the nodemon.json file which we using.

{
  "watch": ["src/server/"],
  "delay": 500
}

Here, we tell nodemon to watch the files in the directory src/server where out server side code resides. Nodemon will restart the node server whenever a file under src/server directory is modified after a short delay.

Express is a web application framework for Node.js. It is used to build our backend API's.

src/server/index.js is the entry point to the server application. Below is the src/server/index.js file

Concurrently is used to run multiple commands concurrently. We using it to run the webpack dev server and the backend node server concurrently in the development environment. Below are the npm/yarn script commands used.

        "start": "concurrently 'npm run start:client' 'npm run start:server' 'nodemon dist/server.js'",
        "start:client": "webpack-dev-server --config config/webpack.config.js --config-name client --env.development --hot",
        "start:server": "webpack --config config/webpack.config.js --config-name server --env.development --profile --watch"