Wiaan Duvenhage

200307

DV300 | Term 1

Rust Stash

An inventory management system project built with the MEAN Stack.
[Visit Rust Stash](https://rust-stash.vercel.app)

View Demo · Report Bug · Request Feature

Table of Contents

• About the Project
  • Project Description
  • Built With
• Getting Started
  • Prerequisites
  • How to install
• Features and Functionality
• Concept Process
  • Ideation
  • Wireframes
• Development Process
  • Implementation Process
    • Highlights
    • Challenges
  • Future Implementation
• Final Outcome
  • Mockups
  • Video Demonstration
• Conclusion
• License
• Contact
• Acknowledgements

About the Project

Project Description

Welcome to Rust Stash! This is an inventory management system where users can manage, track and craft their own inventory. The inventory and its contents are based off of the popular game Rust

Built With

                                   

Deployed With

                 

Getting Started

The following instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Installation

Here are a couple of ways to clone this repo:

1. GitHub Desktop
   Enter https://github.com/wiaandev/rust-stash.git into the URL field and press the Clone button.

2. Clone Repository
   Run the following in the command-line to clone the project:

   git clone https://github.com/wiaandev/rust-stash.git

   Open `Software` and select `File | Open...` from the menu. Select cloned directory and press `Open` button
   

3. Ensure that you have Node.js and npm (Node Package Manager) installed on your system. If you don't have them installed, download and install Node.js from the official website here

4. Ensure you have Angular installed onto your machine. Run the following command to install the Angular CLI (Command Line Interface):

   npm install -g @angular/cli

5. Install Dependencies
   Run the following in the command-line to install all the required dependencies:

   For the front-end

   npm install

   For the back-end

   cd server

   npm install --legacy-peer-deps

Features and Functionality

Sign Up & Authentication

Users can sign up to access the inventory using their email. Users should also add their security question and security answer, which would be used as a method of authenticating them so that they can access the inventory, locations and crafting pages.

Logging in

When users click Access Stash they will be prompted with a modal where users will enter their email and security credentials in order to access Rust Stash and its content. Users would not be able to access Rust Stash without being logged in.

Filtering location stash

On the stash page, users would be able to filter each location and see their respective inventory or stash.

Updating & Sending Inventory to locations

Users would be prompted with a pop-up modal where they would be able the quantity of their inventory item. On the same pop-up modal, users would be able to send a certain amount of inventory to another location, but not to the same location.

Craft a tool

By clicking on each block on the crafting page, users can receive a visual indication to determine whether or not they are able to craft a particular tool. User would not be able to craft an item if the craft button is disabled and it shows "cannot craft".

Location Page

Going to the locations page, a image, name and address of the base will be shown. Clicking on one of the bases or locations, a table will be give to the user, which will showcase the inventory of the base.

Concept Process

I wanted to make the theme and feel of my project relate extremely close to the theme of Rust. Based on the UI of rust, none of the corners are rounded on their "blocks" and buttons, so this is something I translated into my design and concept process going into this process. I also wanted to keep to a minimalistic approach and clean UI.

Wireframes

Development Process

The Development Process is the technical implementations and functionality done in the frontend and backend of the application.

User Flow Diagram

Database Structure

Implementation Process

• I followed the component-based development lifecycle by breaking up my web app into numerous components. Using ng g c componentName I was able to create my components.

• When it comes to services I made a seperate services folder in my shared folder where all the services in my application will be ran from. I would just add the @Injectable() decorator at the top level of my services file, which would make it possible for me to import it where ever necessary.

• I used *ngFor and *ngIf structural directives which would allow me to manipulate the HTML template based on certain conditions. I used this to show my data from my back-end in conjunction with services.

• I incorporated the MVC design pattern into my project as well. I used models to define my data using Typegoose, which represented how my data is going to look on my MongoDB database. My View was my angular on the front-end, which displays my data that the user sees and interacts with. And then finally my controller, which was my server-side logic that I defined and written in Node.js and Express.js in my controllers folder in my server folder. Using this design pattern my code is more maintainable and testable.

• I have also broken up my index.ts file into only defining and connecting to my MongoDB database, as well as setting up my middleware that I will be using.

• I have made a routes folder where all my API endpoints will be created, and where I passed my functions from my controllers to my routes files and then exported and imported into my index.ts file.

• I have then used my services files to make calls to my back-end and I would then subscribe inside of my component.ts file to get my data that I would then populate on my front-end using *ngFor.

• I have also set up auth guards which would not allow a user that is not signed in to navigate the pages of Rust Stash by creating a auth.guard.ts, which would check if a userId is set in the sessionStorage. If there isn't any, it would route them back to the landing page. I then added a canActivate: [AuthGuard] property on the routes that I don't want an unauthorised user to access.

Highlights

• It was a fantastic experience to work with Angular and TypeScript, as it allowed me to enhance my skillset. I must admit that I favor TypeScript over JavaScript without any hesitation.
• Seeing the data being displayed on my front-end was definitely a highlight for me.
• Fixing all the bugs and pain points I encountered along the way was a very big highlight for me as well.
• It was really exciting to witness my application being deployed to a live server.

Challenges

• I struggled a lot with figuring out why my data is passing from a normal <input> instead of a input component.
• I struggled a lot with figuring out how my data / models are going to look and how they would be populated on my front-end, especially with how each location needs to have their own inventory.
• Mapping my data to my front-end was also a challenge, because how everything is nested into one another.
• Re-rendering components was a pain point was also a hiccup I encountered, as I did not know enough of Angular to know how to do it properly and correctly.
• I found it difficult as well to do my search and category filter that I wanted to incorporate intially. I still need to dabble more into how Angular handles data before I can do that.

Above And Beyond

For above and beyond I have deployed this project using Vercel for my front-end deployment software and Render for my back-end deployment software.

Future Implementation

• I want to add Angular Animations
• Category & Search Filter
• Showcase crafted item in location
• Component re-renders after updates
• Fix crafting display, check materials on all recipes
• Specified error messages
• About Page Mockups + more detailed about page
• I want to make this web app responsive as well

Final Outcome

Mockups

Video Demonstration

To see a run through of the application, click below:

View Demonstration

See the open issues for a list of proposed features (and known issues).

Authors

• Wiaan Duvenhage - Github

License

Distributed under the MIT License. See LICENSE for more information.\

Contact

• Wiaan Duvenhage - wiaanduvenhage.dev@gmail.com - @wiaan.dev
• Project Link - https://github.com/wiaandev/rust-stash

Acknowledgements

• Stack Overflow
• MongoDB Docs
• typegoose Docs
• Angular Docs
• Figma
• Freepik Mockups
• Rust Fandom
• Rust Font
• CSS Tricks
• Free Frontend
• CSS Carousel
• Google Icons
• Vercel
• render