Front-End Application
Value: A multi-page application to inventory a collection of yarn used for weaving on a floor loom.
Role: Front-End Developer
Time: December 2022
Stash is a multi-page application designed to inventory a collection of yarn used for weaving on a floor loom. It was built using React with JSON server for data storage, dbdiagram.io for ERD planning and CSS for styling. It uses CRUD functionality.
Login Page
Inventory Page
Add Inventory Page
Projects Page
Add Project Page
One of the requirements of this project was that the website could be used by two or more users. I created a login page where I can log in as an administrator or others can log in as users. This determines what pages the user has access to.
The inventory page shows each of the spools of yarn I currently have in my stash. Information about each spool includes its brand name, name, type of material it is made out of, color, price and a short description of what project I created with it.
To fulfill the Create requirement of the project, I included an Add Inventory page where I could add spools of yarn to my inventory.
I wanted to keep track of all of the projects I had made. I created a Projects page that displayed a picture of each project along with a short description that told what each project was, the yarn and amount of yarn that was used, the pattern and a short description about the finished product.
Like the inventory, I wanted to be able to add future projects to my website. I created an Add Projects page which allows me to name each project and includes a description and picture.
Design
This website was created for my own personal use. I wanted it to be warm and colorful. I chose one of my favorite colors, grey-green as the main color which I find very pretty and relaxing. Likewise, I chose a font that looked like handwriting for the heading because it gave a relaxed, quirky feel. I wanted the website to be uncluttered and clean, so I kept my images to two columns on top of a white background. The images I used for my inventory I found on the company website and are spools of yarn that I currently have in my stash. The photographs are projects that I have made and are in the process of making.
Stretch Goals
As I continue to work on this website, I would like to add a Wish List page where my family and friends can see items I would like such as a warping board, shuttles and yarn. I would also like to add a filter so I can search for a specific yarn by brand name, color or material type.