Publié le

StockManager, une application de gestion de stock

StockManager

Repo GitHub du projet : https://github.com/imPBH/StockManager

This project is a stock management system designed to help businesses keep track of their inventory. The system includes an ASP.NET API, a database, a Next.js web application, and an Expo mobile application.

Summary

Purpose

The purpose of this project is to provide businesses with a simple and efficient way to manage their inventory. The web application allows users to view and manage their inventory from a desktop or laptop computer, while the mobile application provides users with the ability to manage their inventory on-the-go, making use of the mobile camera to act as a barcode scanner.

Web application

The web application is built with Next.js, a server-rendered React framework. It provides users with an easy-to-use interface for managing their inventory.

Login/register page

And here is the modal for register.

Companies page

On this page, users can view all of their companies, create new ones, and manage companies warehouses and references.

Here is the modal for creating a new company.

References page

Each company have its own references, on this page, users can view all of their references, add new ones, and edit them.

Here is the edit modal.

And here is the modal for creating a new reference.

Warehouses page

On this page, users can view all the company warehouses, they can add new ones, edit and delete them. They also can view articles stored inside them.

Here is the edit modal.

And here is the modal for creating a new warehouse.

Articles page

On this page, users can view all articles stored in a warehouse. They can add new ones, edit and delete them.

Here is the edit modal, users can change the expiration date or leave it blank to not set an expiration for the article.

And here is the modal for creating a new article.

Mobile application

The mobile application is built with Expo, a framework for building cross-platform mobile applications. The application transforms the user's phone into a real stock management accessory. This does not allow to view articles or references, but it is used to quickly add new articles/references by simply scanning the barcode.

Login page

The mobile application does not have a registration page, it is an accessory, not the main product.

Companies page

Users can choose a company.

Warehouses page

Users can choose a warehouse.

Action page

On this page, users have the choice to manage the inventory or create a new sale (not implmented at the moment).

Scanner page

On this page, users can scan a barcode.

Add a new reference

If the scanned barcode is not linked to a reference, a page to create this new reference will appear.

Reference already exists

If the reference already exists, a menu offering to modify the reference or to add an article from this reference will appear.

Update a reference

Here is the page where users can update a scanned reference.

Add a new article

Here is the page where users can add a new item from the scanned reference, they can choose to set an expiration date or not.

Infrastructure

The project is built with the following technologies:

  • ASP.NET API for the backend
  • SQLite database
  • Next.js for the web application
  • Expo for the mobile application

The project is deployed using a DigitalOcean VPS on Ubuntu where the API, the database and the Next.js server are hosted with an Nginx reverse proxy. You can see the project here

Challenges

This project was very challenging for the whole team. This was our first time working with these languages/frameworks.

We had already worked with C#, but never made an API with ASP.NET and neither of us had worked with react and react native.

This was a pretty cool project, we learned a lot from it.

Project organisation

We organized our project with Trello and used GitHub to deposit our code.

This is what the project's Trello looks like:

At the start of the project, we brainstormed together how to cut out the tasks to be carried out. First of all we divided the project into 3 parts:

  • The back-end
  • The web front-end
  • The mobile front-end

Then we thought about what actions would be possible on the app. Thanks to this, we were then able to think about how to structure the database.

Once that was done, we thought about how to cut each of the 3 main parts into several sub-parts, for example: which endpoints should we create on the backend?

Each small task was then entered as a ticket in the Trello backlog with an order of priority to help us work on the most important parts first. Then we choose the tasks to be done and divide them between us.

Each ticket corresponds to a new branch on the git repository. Once we've completed our ticket, we can request a pull request. We therefore pass the ticket in review and wait for other team members to look at our work and validate it or request changes if necessary. Once it's validated, we merge our pull request on the main branch, and our ticket goes to done.

Documentation

Database documentation

API documentation

Web app documentation

Mobile app documentation

Authors