Now that I'm not using typescript anymore, I need to replace its linter. I'm going to install eslint with vue cli, but I'll need to also get it to work nicely with vs code, come up with my own rules if I want, and explore the docs a bit to see if I should do anything else.
now.json config example for vue-cli. Note: the documentation for Now on the vue-cli site is out of date and uses Now version 1 (you want to use version 2)
This would grant full control over manipulating the data, which would enable some advanced features of the app like changing and adding to the official ruleset.
I am labeling this feature "nice-to-have" because technically we could accomplish the above without implementing this, but it may be much more troublesome to do so in the end.
Add visual elements like tables for every stat, player inventory, etc. - every necessary player detail that should be tracked. This doesn't include things that could be looked up in a DND book. Write an exhaustive list of the specific things to add here.
Right now im manually switching back and forth by editing one webpack.config file which is retarded - that and I need to do more research into the optimization settings so i can understand them better without having to rely on setting the mode to "production" doing the work for me.
The relational entities that I have so far - Users, PlayerCharacters, and Campaigns - really should be stored in an SQL or otherwise relational database instead of mongodb. The issue is that cascade deletes, ACID transactions, etc. are troublesome with a nosql database like mongodb.
In order to style vuetify components and use vuetify themes, i need a loader for stylus.
I also should add a loader for assets (esspecially images).
I should add some plugins like the one that cleans the dist folder automatically.
Base components (that is, a "dumb" component that has no interactivity and just displays data) should begin with the prefix "Base". (As in : "BaseButton.vue", "BaseTable.vue")
Components that are created and used only once should be prefixed with "The", as in "TheHeading.vue, "TheSidebar.vue"
Child components tightly coupled with their parent should include the parent component name as a prefix. For example, "TodoList.vue" has children "TodoListItem.vue" & "TodoListAddButton.vue" source
Apollo seems to be a vue cli plugin (although it probably exists as a package as well) that is a vue wrapper for graphQL. Seems fairly popular so it's probably the best way to integrate graphQL.
This is to help me reach my learning goals for this project as well as to help my fellow noobs who might want to join in on the learnings and possibly get up to speed so they can contribute.
Right now, app4.vue is mostly one giant, poorly factored template. Refactor it so that its split into multiple components and use v-for directives (or something similar) to reduce duplication. Try using typescript classes instead of the js way of defining vue components.
Use D&D 5e AP to add the basic functionality of looking up DND book information from the app. Afterwards, create a new issue for adding advanced functionality (tool tips, etc.)
Background: as of now, I have a basic backend stack with node, mongodb, mongoose, and apollo-server. Properly integrating mongoose into apollo-server has been kind of a can-of-worms so far.
Prisma seems to be great substitute for an ORM like entity framework (it does everything entity framework does + it can do both nosql and sql databases). But hold off integrating it until the app gets bigger and maintaining the backend gets to be a pain.
Side-note: since I plan on moving to Prisma, I'm going to be a little sloppy and slapdash with the mongoose/apollo-server integration for now since it is going to all get replaced with much nicer code eventually.
I put the contents of the dist folder into a "docs" folder (so i can use the option to serve the page from a "docs" folder on the github pages setup page), but https://originalyellow.github.io/DND-Web-App/ is blank because I need to set up routing. Look this up and fix it.
It turns out that Ramda and typescript do not mix (source: my own experiences + this article that confirmed my suspicions. So I'm going to sacrifice dynamic type checking for being able to use Ramda/FP to its full extent.
To take out two birds with one stone, I'm also going to try using the seemingly very powerful and useful vue cli. I'll remake the project using that and not include typescript this time.
Resources:
List of few cool vue cli plugins (storybook, vuetify, electron builder, apollo) (link)
How to "replace" a project with a new with git/github (link)
Plan out what steps need to be taken to complete a basic backend (for learning purposes, I want part of the stack to be ASP .NET Core/Web API, and Microsoft SQL Server).