Inventory Manager

The Inventory Manager app is built using Django and is designed to help users efficiently manage their inventories and promote sustainable living. The Inventory Manager app provides a user-friendly interface for creating, organizing and sharing lists of items. Each list is associated with a unique QR code for easy access and sharing.

The live link can be found here - Inventory Manager

Contents

• UI/UX
  • User Stories
  • Agile
  • Site Owner Goals
  • 5 planes of UX
  • Design
    • Images
    • Colours
    • Fonts
    • Wireframes
• Features
  • Navigation
  • The Landing Page
  • Footer
  • User Account
  • My Inventory
  • Categories
  • Contact
  • Features left to implement
• CRUD
• Database design
  • Database Models
• Testing
• Security Features
• Technologies & Languages used
• Libraries & Frameworks
• Tools & Programs
• Deployment
  • Heroku
• Credits
  • Code
  • Content
  • Media
  • Acknowledgements

UX/UI

User Stories

User Profile

• As a Site User, I can create an account so that I can start managing my inventories.
• As a Site user, I can verify my account via the verification link sent to my email upon registration.
• As a Site User, I can login to my account so that I can access my existing inventories.
• As a Site User, I can login via Google so that I have several login options.

User Navigation

• As a Site User I can navigate easily through the site due to a responsive navbar so that I understand where to go and it is always visible to me.
• As a Site User, I can see my lists in a dropdown list from the navigation bar, so that I can navigate to my lists easily.
• As a Site User I can click on the social media links so that I can explore the work of the developer and see the developers profile.

User Feedback

• As a Site User, I can receive feedback whenever I make an action, so that I know if my action was successful or not.

Create Inventories

• As a Site User, I can create unique inventory lists so that I can't create inventory lists with the same name.
• As a Site User, I can create an inventory list and add multiple items at once, so that I can organize my belongings efficiently.

Manage Inventories

• As a Site User, I can generate a QR code for my inventory so that I can identify my belongings easily.
• As a Site User, I can scan the QR code so that I can see my inventory list immediately.
• As a Site User, I can share my inventory with others using the generated QR code so that I can provide a visual and efficient view of the contents of my Inventory to others.
• As a Site User I can clone my lists so that I can reuse a list and just modify it.
• As a Site User, I can see numbers next to the inventory list name so that I can find boxes with an qr code easily if I have many boxes.

Contact Form

• As a Site User, I can make contact through a contact form, so that I can ask questions, report issues or make suggestions.

Site Administration

• As a Site owner I can log in to the admin dashboard using my username and password so that I can access the functionalities of the superuser.
• As a Site owner I can view a list of all inventory items so that I can edit, delete or add items, inventories and categories.
• As a Site Owner I can download the QR codes for each inventory so that I can share the QR code with team members.
• As a Site owner I can receive messages submitted through the form so that I can respond to the messages.

Agile

The development of this project followed an agile approach, emphasizing flexibility from initial planning to final implemenation. To facilitate the management of tasks and user stories, a GitHub project was created, using the Kanban board method. To gain insights to the project's progress and detailed user stories, including their associated tasks, please see link to the project board here. Each user story has been categorized with labels indicating its importance and relevance to the overall functionality and usability of the application.

Site Owner Goals

The primary goals of the Inventory Manager app are to provide users with an efficient and user-friendly platform for organizing and managing their belongings. The Inventory Manager app is also intended to promote awareness of possesions to encourage suistanable and mindful consumption. Main goals include optimizing inventory management, user engagement and integrating QR code functionality. Through a visually appealing and accessible interface, delivering a high level of user satisfaction. Using QR codes to share inventories is designed to simplify daily life and encourage sharing or exchanging of items left unused. These goals aim to create a reliable and simple application with focus usability, security and innovation.

5 planes of UX

Strategy

The strategy for the Inventory Manager app centers around meeting user needs by providing an efficient and user-friendly platform for organizing belongings. The focus is on optimizing inventory management and creating awareness for sustainable and mindful consumption.

Scope

The project prioritizes essential functionality, ensuring features like user registration, login, efficient inventory creation, adding items, QR code integration and secure data handling. Future features are considered based on upcoming needs and user feedback.

Structure

The app's structure includes user-friendly navigation, seamless QR code integration, and sharing features. The design emphazises on accessibility, inclusivity and intuitive use for a positive user experience.

Skeleton

The Inventory Manager app is designed for easy navigation with clear interface and user flows. QR code generation, inventory sharing and secure user authentication are well integrated to enhance the overall user experience.

Surface

The visual design of the app prioritizes clarity, accessiblity and an appealing interface. The emphasis is on creating a visually appealing and user-centric experience while maintaining focus on sustainability and awareness.

Design

Images

The background image on the landing page has graphic elements of various abstract shapes, which contributes to the theme of organization and categorization, aligning with the application's purpose.

Colours

The colours used for the website consists of a vibrant orange colour, same colour as the background image, giving the user a sense of energy and enthusiasm along with a modern website. The dark colour breaks off the orange and creates a balance throughout the website.

Fonts

Roboto is the main font used for the body of the application and Lato used for the headings. Sans Serif is the backup font. The fonts were imported via Google Fonts.

Wireframes

The wireframes were produced via Balsamiq.

Landing Page


Logged In


My Inventory


Contact Form


Mobile


Features

Navigation

• Navbar with icon that on click will redirect not logged in user back to the landing page, and a logged in user back to the inventory page.
• Different navlinks visible for users that are not logged in and for logged in users.
• Active link is orange instead of the default white to make it clear to the user where the user is.

• Collapsible burger menu with drop-down function on small to medium screens.

  Navbar not logged in

  
  Navbar logged in

  
  Burger menu

  

The Landing Page

• Welcome text that explains the purpose with the application and invites the user to sign up with a call to action, or if user already has an account, to sign in instead.

  Landing Page

  

  Footer

• The footer contains social media links which takes the user to my LinkedIn profile and my Github repo page for the Inventory Manager.

• The links opens in a new tab which allows for the user to navigate easy.

• A link to the privacy policy page that opens in a new tab.

  Footer

  

  User Account

  • Django allauth was installed and is used for the user authentication functionality: Sign up, Email verification, Log in, Remember me, Password reset, Google and Log out.

  • Success messages informs the user if they have logged in or logged out successfully.

  • I was planning on using Facebook as a login method as well. I decided not to proceed with the implementation due to the complexity of adding that functionality.

  Sign up

  
  Email verification

   
  Log in

  
  Remember me

  
  Password reset

   
  Google

   
  Log out

  

My Inventory

1. Once logged in, the user can create an inventory list immediately. First by choosing a unique name for the inventory list. If a list name already exists, the user will get an error message. A "General" category is provided to the user, so that the user can get started quickly and add/modify categories further on. The user will then get a success message of the created inventory list, and will be redirected to the Itemsform, to add the items to the list.

2. The user can add several items at once and will recieve a success message upon added items, and error messages if no items are added. The user can't save an empty list. When the user clicks on save list, the user will be redirected to the dashboard with a success message of successful save.

3. The list is now saved and visible on the dashboard with number 1 appended to the list name. The next list will have the number 2 and so on. The lists will also be ordered alfabetically. The QR code-image is rendered when the list is saved, so the user can now scan the QR-code.

4. The user can download the QR-code image, that will open i a new tab. The user can also share the link to the QR-code via email with a prepopulated email.

5. The user can also clone a list by clicking on "clone list". There, the user can edit, delete and add items. When saved, the user will get a success message and be redirected to the dashboard where the cloned list now will be visible.

6. If the user clicks on "view details" the user will get to a view where the user can click on "edit list" or "delete list". If the user clicks on delete list, the user will be prompted to confirm deletion, and a success message will render. The user will be redirected to the Itemsform if user clicks on "edit list".

   Create Inventory List

    

Add Items


Saved list


Scanned QR-code

 

Download QR-code


Share QR-code


Clone list

 

Edit or delete list

  

Categories

• The user can create categories, also with unique names to prevent duplicates. The user will get an error message if a category already exists.
• When saved, the category will be visible on the category page.
• The user can edit a category by using inline editing so that the user can stay on the page, and a save button will appear. When saved, user will get a success message.
• The user can delete a category. If the user wants to delete a category the user needs to confirm deletion. The user will get a success message after deletion.

Add Categories

  

Edit or delete categories

 

Contact

• All fields in the contact form are mandatory. The user will get a success messages after submitting the form.
• The user will get an automated email to their email after the submission.
• Admin will get a notification to their email of a new submission from the sender, so that admin can get a notification without manually needing to log in to the admin panel.

Contact form


Automated email

 

Features left to implement

• When a user shares an inventory list, the user can choose to share permission, only read permisson or edit and/or delete permission.
• When a user wants to clone the orignial list again, the user will get an error message saying "The invenontory has already been cloned". I've added that as a solution to not violate the unique name constraint. In the future, I would like to implement so that an incrementing number, starting from 1 is appended after the word "cloned" to get around this problem.
• Create a view on the landing page so that non registered users can see a QR code containing an example list. The share and download links are disabled so that the user can see what features are available for a registered user.
• Let the user choose to have public or private lists so that other users can copy another users list.
• Implement a search bar, so the user can search for inventories if there are many inventory lists.
• Implement pagination in case of many inventory lists, in particular on mobile view.
• To change my emailaddress to a more generic emailaddress in the application.

CRUD

CRUD functionality is included in the above features.

Create: An authenticated user can create and save an inventory list, items and categories.

Read: A user can read the content of their own inventory lists.

Update An authenticated user can edit and update their inventory lists as well as categories.

Delete: An authenticated user can delete their own items, categories and inventory lists.

Database Design

Database Models

The entity relationship diagram provided is the first draft and does not include all the fields and models in the final database.

Database schema


User Model (AllAuth)

Django AllAuth was used for the user authentication. The user model handles authentication and representes users in the system. Its function is to store information about users, allowing them to log in and manage their data.

Relationship:

One-to-may relationship with the Inventory Model: One user can have multiple inventories.

Inventory Model

The inventory model is managing collections of items. Its function is to organize and store information about inventories created by users. Each inventory is associated with a specific user and can include multiple items. The QR-code image is associated with the inventory.

Relationships:

Many-to-one relationship with the User Model: Many inventories can belong to one user.

One-to-many relationship with the Items Model: One inventory can have multiple items.

Many-to-one relationship with the Category Model: Many inventories can belong to one category.

Category Model

Its function is to categorize the inventories. The category model also includes a user field. Categories that was added by other users would be seen by everyone, and that's why I hade to add a user field to link the category to the user. I also choose not to delete the inventory list if a category is deleted. That gives the user the option to change category or delete a list by them self.

Relationship:

Many-to-one relationsship with the Inventory Model: Once category can be associated with multiple inventories.

Testing

Testing and the results can be found here.

Security Features

Form Validation

If empty or incorrect data is added to a form, the form won't submit. An error will arise, informing the user what field caused the error.

User Authentication

Limits access for non-registred users and permission control so that only the owner of a list can edit and delete a list when shared with others.

Database Security

• All passwords, API keys, ID:s and the database url are stored in the env.py file to ensure that sensitive information is not shared, along with env.py being listed in the gitignore file.
• CSRF tokens are used on all forms throughout the application.

Technologies & Languages used

• HTML5

• CSS

• Javascript

• Python

• Chrome Dev Tools - Was used throughout the project to make changes and to test the responsivness.

• Django - Main python framework for development of this project.

• ElephantSQL - PostgreSQL database hosting for this project.

• Git - Git was used for version control by using the Gitpod terminal to commit and then push to Github.

• Github - Is where the projects code is stored after being pushed.

• Gitpod - Was the Codespace used for this project.

• Heroku - The cloud based platform to deploy the site on.

  Libraries & Frameworks

• Boostrap 5 - Was used to style the app and make it responsive.

• Cloudinary - Used to upload the QR-code images.

• Crispy-boostrap5 - To render Django forms in a Boostrap 5 style.

• Django-allauth - Authentication library used to create the user accounts.

• Django-crispy-forms - Used to render the forms.

• Django-debug-toolbar - Was used for debugging during the project.

• Gunicorn - Python HTTP server for WSGI applications.

• Psycopg2 - PostgreSQL database adapter for Python.

• QRcode - Used to generate QR codes.

• Whitenoise - To serve static files directly from Django.

  Additional information is available in the requirements.txt file

  Tools & Programs

  • Am I Responsive - Was used to ensure that the website is responsive on diffrerent devices.
  • Balsamiq - Was used to create the wireframes before starting the project.
  • Font Awesome - Was used for Social Media icons in footer and other icons throughout the application.
  • Google Fonts - Was used to import fonts to the page.

• JS-hint - Was used for Javascript Validation.
• [Lucid charts]() - Was used to create the ERD diagrams.
• [PEP-8]() - Was used for Python Validation.
• Responsinator - Was also used to ensure that the website is responsive on diffrerent devices.
• W3C - Was used for HTML and CSS Validation.
• Web Formatter - Was used to make sure the format looks good.
• WEBP Converter- Also used to reduce the file size and keep the image quality.
• TinyPNG - Was used to reduce the file size and keep the image quality of the background image.

Deployment

Heroku

The application was deployed to Heroku using the following steps:

Create the Heroku App

1. Log in to Heroku
2. Click on New and select Create new app from the drop-down menu.
3. Enter a unique and appropiate app name.
4. Select you region.
5. Click on "Create App"

Create the PostgreSQL database using ElephantSQL

1. Log in to ElephantSQL and navigate to Dashboard.
2. Click on "Create New Instance".
3. Provide a project name and choose "Tiny Turtle", the free plan.
4. Click on "Select Region" and choose Data center.
5. Review all the details and click on "Create Instance".
6. Return to the Dashboard and click on the newly created instance and copy the database URL.

Create and prepare files

• Create requirements.txt file

• Create a "Procfile" in the main directory and add: web: gunicorn project-name.wsgi

  Env.py file

  • Create an env.py file in the main directory in your Gitpod workspace and ensure it's included in the .gitignore file.
  • Add the DATABASE_URL and SECRET_KEY to the env.py file.
  • Add the Cloudinary URL to env.py.

  Settings.py file

  • Update the settings.py file to import the env.py file.
  • Add the SECRET_KEY and DATABASE_URL file paths.
  • Comment out the default database configuration.
  • Add Cloudinary to the list of installed apps.
  • Add the settings for STATIC files:
  • The URL
  • Directory path
  • Rooth path
  • Storage path
  • Media URL
  • Default file storage path
  • Link the file to the templates directory in Heroku
  • Change the templates directory to TEMPLATES_DIR
  • Add Heroku to the ALLOWED_HOSTS list

  Heroku Config Vars

  Add these Config Vars in Heroku:

  • SECRET_KEY and value
  • CLOUDINARY_URL
  • PORT: 8000
  • DISABLE_COLLECTSTATIC = 1

Deploy

• DEBUG in settings.py needs to be set to False before deploying.
• Navigate to the deploy tab on Heroku and connect to Github and choose your repository.
• Click on "Enable Automatic Deploys" for automatic deploys or "Deploy Branch" for manual deploys.
• Click on view or open app to view the deployed site.

Fork

• Navigate to the repository Inventory Manager.
• On the right side of the page, at the top of the repository, select "Fork".
• A copy of the repository is now created.

Clone

1. Navigate to the repository Inventory Manager.
2. Click on the 'Code' dropdown menu above the list of files and choose a method to copy the URL, via HTTPS, SSH or GitHub CLI.
3. Open Terminal, change the current working directory to the desired location of the cloned directory.
4. Type 'git clone' and paste the URL copied form GitHub.
5. Type 'Enter' to create the local clone.

The live link can be found here - Inventory Manager

Credits

Code

General

• I Think, Therefore I Blog - I relied on the instructions and walkthrough to setup my project.
• Integrating Cloudinary-storage
• Django reverse import
• Change display name in django admin
• Debug toolbar - Was used when building the project to further investigate errors.
• Style the login and signup form - Style concept was taken from here.

Django Authentication System

• Django authentication system

• Django allauth installation guide

• Using Google

• Django google oauth

Django email authentication

• Django allauth email
• email authentication

QR-code functionality

I used code from here to build the QR-code function:

• Make a QR-code
• QR-code in django
• How to generate a QR-code
• Reading image

Building the URL

The QR-code image wouldn't display on the deployed site. I encountered a mixed content warning and after a lot of reasearch I understood that I had to make sure the QR code images were loaded securely.

I used these guides and code to solve that problem:

• Absolute url
• Cloudinary quickstart
• Using Cloudinary for image storage

Clone list

Credit to my mentor Antonio who helped me implement the functionality to clone a list.

Empty label

• Empty label category dropdown

Formsets

I used code from here to implement the inline-factory formset:

• Inline formset
• Django forms
• Formsets

For loop counter

To number the inventory lists automatically:

• For loop counter

Read-only fields

I used code from here to implement the read-only function upon for inline editing:

• Readonly-fields
• Make readonly

Sending email function

I used code from here to setup the sending email function using send_email:

• send_email
• send_email
• sending emails with gmail

Share QR-code via email

• Insert line break

Tests

• Tests
• Transaction atomic

Using Boostrap delete confirmation

• Delete confirmation

Content

The content is written by the developer.

Media

• The background Image was taken from iStock

  • I created the logo using Canva

Acknowledgements

• Antonio, my mentor, for guiding med throughout the project with important suggestions to improve the applications funcionality.
• To the slack community for answering my questions and guiding me.
• To tutor support, for helping me when I got stuck trying to solve problems throughout the project.
• To my husband and family, for all the support and patience throughout this project.