Skip to content

Latest commit

 

History

History
189 lines (127 loc) · 11.4 KB

en_readme.md

File metadata and controls

189 lines (127 loc) · 11.4 KB

Equilíbrio Natural - Stock Control

Languages TopLanguage Files RepoSize LinesCode MIT License Logos

Stock management system for the company Equilíbrio Natural. Multi-platform application for the control of 2 physical units with important options such as product registration, history record and automatic expiration date.

Screenshots

App Screenshot App Screenshot

Appendix

Thanks to

We leave this dedication to the company Equilíbrio Natural (Natural Balance), which trusted in our skills for dissemination, management, and automation of their enterprise. And to ETEC Jardim Ângela for providing us the search for the knowledge necessary for the realization of this work.

Assignments:

Features

  • ✨ Interactive cards
  • 🔒 ADMIN and Guest access
  • 🏪 Choice of unit
  • 🔠 Categories
  • 📦 Register, edit and delete products
  • 🔎 Search for products
  • 📖 Log in change history
  • 🕔 Automatic expiration date
  • 😎 Multiplatform: Windows, Linux and Android

Tech Stack

Front-end: Vite, VueJs, TailwindCSS, Capacitor e Electron

Back-end: Vue Router, Pinia e Firebase

Lessons Learned

What challenges were faced and how were they overcome?

With a focus on ensuring a better user experience we chose to use a unified and cohesive design system. Based on research we chose Google's Material Design in its third and new version called Material You. With this design system it is possible to create elegant and usable products. Material Design offers a rich library of styles and components and has development versions for Android, Flutter and Web. But at this point Material Web 3 support is only planned and since there are no libraries that also support it we decided to create our own. With the help of the official documentation, the Figma design kit and the TailwindCSS framework we built the entire interface of the system that has 13 components and 9 pages based on this design system.

In general, systems need to be consistent and dynamic at the same time. This means displaying information in the right places and allowing this information to change continuously. In an inventory control where new information is constantly being recorded, it is no different. However, it is not feasible to create different pages for each store, category, and product every time a new product is entered. The best choice is to use already defined pages and allow the information on these pages to be dynamic for each store, category and product. To do this we use routes, each route navigates to a page, but because we are using fixed pages we use dynamic routes. In a dynamic route you specify the information using parameters. We use Vue Router in this process.

Saving the product images was a challenge. The solution was to use the Web API FileReader(). With this native browser API we can extract the URL of the image. Using this URL we were able to render the image to the client. The drawback is that heavy images mean larger URL's and larger URL's mean longer waiting times for rendering images, leading to a crash in the system until the image is finished. There is yet another problem, larger images consume more database space. How do we solve these problems? Simple, compress the images! Compressing images is the process of decreasing the quality of the photo without making it indistinguishable. CompressorJs is a library that provides an easy and lightweight solution to this problem.

The shelf life of products is calculated in an automatic way. For this we use a logic that looks up the current day and subtracts it from the expiration day, resulting in how many days are left until the product expires. The expiration day is obtained from the date selected in the calendar Vue datepicker. With these values, the system notifies the user with the products that are close to their expiration date.

For greater insurance of what is happening, the system has a change history. Each change is logged, which also allows the user to have knowledge about the values of the products in stock. The history displays the last action done on the product, such as: Registered, edited or deleted, the date and time this action was done and other information. The total price of the product is calculated based on quantity x price. And the total price in stock is the sum of the total price of all products.

For the user to access the stock with administrator privileges he needs to enter an access key. The access key is in the online database and is loaded into the system for the confirmation entry when the user is connected to the Internet. However, there is a catch, loading the key explicitly makes it possible for anyone to gain access to the system. That is why this key is loaded in an encrypted way, and is only deciphered when the password is confirmed. This way we ensure that access to the system is secure. We use SimpleCrypto which simplifies this process.

Optimizations

What optimizations have been made to the code?

The Pnpm package manager was chosen for the project because it offers cold and hot caching. Pnpm is 3x faster and more efficient than Npm and faster than Yarn. Dealing with numerous libraries and modules was an easier and safer task with this tool.

Vite is a tool with the utility to take care of the application bundle. It provides better optimization techniques, resulting in higher application performance both in development and production form for the end user.

The system was built using the concept of Mobile First. This concept refers to creating any project that prioritizes the experience on mobile devices, while making adaptations for larger resolutions. This allows the system to be completely responsive and adaptable to other screen resolutions, allowing the client the option to use the mobile version and/or the desktop version.

In addition to changes in resolution, each category in the mobile app has an image that identifies it. To speed up the time that these images are rendered on the screen without clogging up the App the modern image format .AVIF has been used. AVIF allows the image size to be reduced without losing quality, which in turn speeds up the loading time to milliseconds.

Loading data is not an easy task because it requires processing, especially when there is a lot of data to be loaded. Waiting on an empty screen until all the data is loaded can frustrate the user. It is important that a system is user friendly or has usability, in this case telling you that the necessary data is being loaded. The Suspense API is available natively in Vue.js and is one way to return this information to the user.

Demo

Versões para

Note: To open the program on a Linux distribution it is necessary:

  1. Right-click on the file natural_balance-1.0.0.AppImage.
  2. Go to Properties
  3. Select run as program

System Requirements

Windows:

OS: Windows 7 or newer
Processor: 2.5Ghz or higher
Memory: 512 MB de RAM
Storage: 71.7 MB of available space

Linux distro:

Processor: 2.5Ghz or newer
Memory: 512 MB de RAM
Storage: 92.1 MB of available space

Mobile Android:

SO: Android 5.1 or newer
Memory: 2 MB de RAM
Storage: 25 MB de of available space

Run locally

Note: You need the Pnpm package manager. See how to install.

Clone the project

  git clone https://github.com/FrogDevs/Equilibrio-Natural-ControleEstoque.git

Go to the project directory

  cd Equilibrio-Natural-ControleEstoque

Install the dependencies

  pnpm i

Start the server

  pnpm dev

Start the electron application

  pnpm cap open @capacitor-community/electron

Used by

This project is used by the following company

Related

See another related project

Responsible Members

License

“You have to be burning with an idea, or a problem, or a wrong that you want to right. If you’re not passionate enough from the start, you’ll never stick it out.”

Steve Jobs