Magic Almanac is a practical project of the course "Information Engineering". In this project the aim was to consolidate our skills with JavaScript, espically in Vue.js. Our professor gave us a project where the backend was already deployed, we had to write the front-end to list, create and delete magic spells and kinds.
Under "Spells" you have three different options, you can:
- List all Spells that are currently in the database
- Create new Spells which get added to the database
- Search for Spells after letters or words
Under “Kinds” you have two different options, you can:
- List all Kinds that are currently in the database
- Create new Kinds which get added to the database
This was our original instruction:
This software lists magic spells and kinds belonging to them. It is possible to search for spells by various parameters.
All routes that are needed are implemented:
- GET
/spell→ Lists all spells - GET
/list/spell→ Returns JSON of all spells - GET
/list/kind→ Returns JSON of all kinds - POST
/spell→ Stores new spells - GET
/spell/{slug}→ Show spell - PUT
/spell/{slug}→ Update spell - DELETE
/spell/{slug}→ Delete spell - GET
/spell/{slug}/edit→ Edit spell - GET
/search/spell→ Search spells - POST
/search/spell→ Query spells - GET
/kind→ Lists all kinds - GET
/list/kind→ Returns JSON of all kinds - POST
/kind→ Stores new kinds - GET
/kind/{slug}→ Show kind - PUT
/kind/{slug}→ Update kind - DELETE
/kind/{slug}→ Delete kind - GET
/kind/{slug}/edit→ Edit kind
All views can be found in /resources/views.
Implement your VueJS components in the folder /resources/views/js/components.
Register your components in /resources/views/js/app.js and use them in the following files:
/resources/views/kind/resources/views/kind/create.blade.php/resources/views/kind/edit.blade.php/resources/views/kind/index.blade.php/resources/views/kind/show.blade.php
/resources/views/spell/resources/views/spell/create.blade.php/resources/views/spell/edit.blade.php/resources/views/spell/index.blade.php/resources/views/spell/search.blade.php/resources/views/spell/show.blade.php
To query data for dropdowns in forms or to reload lists use the list routes:
- GET
/list/spell - GET
/list/kind
For the search form use q as the name for the text input.
The search will be handled by the backend.
The design of the software need to be adapted.
Bulma is used to layout and style the website.
If wanted default styles can be overwritten by setting variables in the /resources/sass/_variables.scss file.
Also it is possible to write custom styles in /resources/sass/_custom.scss.
A new logo need to be set. If pictures will be present on the website place them in /public/img folder.
Here you will also find the logo.
To compile scss and JavaScript npm run dev need to be executed in the project folder.
It is also possible to run npm run watch so it is not need to execute npm run dev every time a change happend.
To make starting developing fast there are some seeders implemented to fill all needed tables except the user table.
To populate the database run the command php artisan db:seed in the terminal in project root folder.