TheWiccaHouse

Bronwyn Potgieter

200089

DV300 - Term 1 | 2023

View Demo · Report Bug · Request Feature

Table of Contents

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

About the Project

Project Description

The Wicca House is the place to go to fulfill all your wicca needs! This MEAN stack application allowa users to track an inventory full of different ingredients and use their inventory to craft magical potions! All data is stored on MongoDB and dynamically displayed using angular components.

Built With

• MongoDb
• Express
• Angular
• Node
• Typescript
• AngularMaterial

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.

Prerequisites

Ensure that you have GitHub desktop and Visueal Studio code downloaded onto your machine.

Make sure to clone the server as well: Server Repo

How to install

Here are a couple of ways to clone this repo:

1. GitHub Desktop
   Enter https://github.com/bee2805/TheWiccaHouse.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/bee2805/TheWiccaHouse.git

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

Angular Know How

This project was generated with Angular CLI version 15.1.6.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

Features and Functionality

Landing Page

The landing page has appropriate information about The Wicca house, and lets the user know what to expect when using it.

Inventory

The inventory page showcases a list of all the ingredients in the inventory. These ingredients can be filtered based on their category (light magic, dark magic or the potions that have been, and can be crafted). The user can also update the amount of inventory if they need more to craft their desired potion, but they have to be verified before doing so.

Crafting Section

Here, the user (if verified) will be able to select a potion that they wish to craft. The potion can only be crafted if there are enough ingredients in the inventory. Once a potion is crafted, it can be found on the unventory page under 'potions', and the quantity of the used ingridients will be updated accordingly.

Concept Process

• I started off my ideation process by coming up with a few ideas for the theme. Once I had my theme in place, I thought about different ingredients and potions that could be included. Thereafter, I sketched my initial wifeframes and got to work!

Ideation

Wireframes

Development Process

Implementation Process

• I started off my angular project by generating components and styling them using html and css
• I added routing and incuded all appropriate navigation links
• The next step was to then set up my back end with appropriate shemas routs for my CRUD functinality
• Got the data and displayed it dynamically in angular components

Highlights

• Overall, The theme of this project was really cool. It allowed me to be super creative and free with my design choices.
• I really enjoyed learning Angular and Typescript
• The crafting section was my favorite part.

Challenges

• I struggled with the select on the crafting page and inputting that data dynamically. At the end of the day I was successful, however I believe I would be able to achive the same functionality in a much simpler way and in less lines of code. I aim to acieve this in the future.
• I also struggled to have a defualt value on the select option because I used the value property to filter my data.

Above And Beyond

• I added modals that pop up once editing and crafting inventory with data passed to those modals that showcase what exactly was crafted/edited.
• The side nav was also implemented following a tutorial found on youtube.

Future Implementation

• I'd like to get the select to have a default value
• I would love to make use of the potions that have been crafted, and maybe use them to craft other potions.

Final Outcome

Final Mockup

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

• Bronwyn Potgieter - bee2805

License

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

Contact

• Bronwyn Potgieter - [email protected] - @bronns_designs
• Project Link - https://github.com/bee2805/TheWiccaHouse

Acknowledgements

• Artstation Material Studies
• Artstation Potion Bottles
• Heading Font
• Subheading + Paragraph Font
• Background Image
• Icons
• Main Mockup
• Clay Mockup
• Wireframe Mockup