View Demo
·
Report Bug
·
Request Feature
- About the Project
- Getting Started
- Angular Know How
- Features and Functionality
- Concept Process
- Development Process
- Final Outcome
- License
- Contact
- Acknowledgements
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.
The following instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
Ensure that you have GitHub desktop and Visueal Studio code downloaded onto your machine.
Make sure to clone the server as well: Server Repo
Here are a couple of ways to clone this repo:
-
GitHub Desktop
Enterhttps://github.com/bee2805/TheWiccaHouse.git
into the URL field and press theClone
button. -
Clone Repository
Run the following in the command-line to clone the project:git clone https://github.com/bee2805/TheWiccaHouse.git
Open
Software
and selectFile | Open...
from the menu. Select cloned directory and pressOpen
button
This project was generated with Angular CLI version 15.1.6.
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.
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
.
Run ng build
to build the project. The build artifacts will be stored in the dist/
directory.
Run ng test
to execute the unit tests via Karma.
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.
To get more help on the Angular CLI use ng help
or go check out the Angular CLI Overview and Command Reference page.
The landing page has appropriate information about The Wicca house, and lets the user know what to expect when using it.
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.
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.
- 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!
- 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
- 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.
- 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.
- 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.
- 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.
To see a run through of the application, click below:
See the open issues for a list of proposed features (and known issues).
- Bronwyn Potgieter - bee2805
Distributed under the MIT License. See LICENSE
for more information.\
- Bronwyn Potgieter - bronwyn.potgieter@yahoo.co.za - @bronns_designs
- Project Link - https://github.com/bee2805/TheWiccaHouse