The purpose of this repository is to demonstrate and implement simple inventory management system.
The live site can be visited at https://nukleus-audition.the1375.com
For simplicity, the UI is quite basic and minimal, hence don't expect any fancy UX or animation.
Tech stack being used:
- Flask (Python 3) for backend
- Vue 3 (Typescript) for frontend
- Bootstrap CSS
- SQLite for database
The source code is consists of 2 parts:
- Backend
- Located at folder
backend-python
- For simplicity, all logic and database migration is written in
main.py
- To run the backend, ensure you already installed Python 3 and above,
pip
and havevirtualenv
installed in your machine - Assuming you are using UNIX environment, inside
backend-python
, runpython -m venv
to installvirtualenv
- Run
source venv/bin/activate
to activatevirtualenv
- Run
pip install -r requirements.txt
to install required library - Run
flask --app=main.py db:seed
for first time database migration and data population - Run
python -m flask --app=main.py run --host=localhost --port=5000
. The backend server will be running athttp://localhost:5000
- For testing, the code is located at
test.py
. It can be run bypytest --config-file=test.py test.py
- Located at folder
- Frontend
- Located at folder
frontend-vue
- To run the frontend, ensure you already installed
node
version 20 andyarn
- Install required dependency by running
yarn install
- Run
yarn run dev --port=3000
. The frontend can be browsed athttp://localhost:3000
- Located at folder
The application consists of 3 pages:
-
/inventory
page- This is a main page of the application. It has 3 components; add inventory, search inventory and list of inventory
- Add inventory will be displayed if user role has
create
permission, while list of inventory will display data if user role hasview
permission
-
/inventory/{inventoryId}
page- This is inventory details page, where user can update the product. It will show the form if user role has
view
permission, and product can be updated or deleted if user hasupdate
anddelete
permission respectively
- This is inventory details page, where user can update the product. It will show the form if user role has
-
/roles
page- This is roles page, where user can add a new role, and list of all roles available with its permissions
-
To switch role, simply click one of the role at top right. The page will be reflected according to its permission