originalyellow / dnd-web-app Goto Github PK

Resources:

• Type Vue without TypeScript
• Type Vuex without TypeScript

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.

I installed vtr which should handle most of what I want but i can't get document formatting to work at all.

Resources:
vuejs/vetur#543
vuejs/vetur#692

Resources:

• 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)

Make some custom cli tools for easily making little test projects

Resources:

• Building a simple command line tool with npm

Resources:

• this library has typescript-related helpers and stuff for vuex
• how to return promises from actions

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.

Resources:

• github for the API's database - conveniently it already uses mongodb

Resources:

• youtube channel with lots of long tailwind videos

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.

Install the vuetify-scss package and switch over to using sass instead of stylus as a css-preprocessor.

The motivation for this is simply that I am already comfortable with using sass and stylus seems to be dying.

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.

TODO: add resources

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.

Buy some cool miniatures like an orc or something.

Resources:
Official Wizards of the Coast store

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.

Resources:
git book
https://nvie.com/posts/a-successful-git-branching-model/
https://www.endpoint.com/blog/2014/05/02/git-workflows-that-work

I like these so far:

• 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

Ramda is cool, dontchaknow

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.

Resources:
all-encompassing guide on how to do this
vue-property-decorator docs
vue-class-component docs - doesn't really cover typescript

Resources:

• Endpoint for character json data

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.

To cut down on the boilerplate required for this pattern, use a library.

Resources:

• vuex-map-fields

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.

Resources:

• deployment of the prisma server with zeit now
• "community tutorials"
• home for graphql version
• documentation home

TODO:

• Prevent multiple references from being added to an array if elements should be unique
• Prevent multiple entities being created if they have identical data which should be unique

Resources:
short, 2018 firebase course on pluralsite

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.

Resources:
https://medium.com/@codetheorist/vue-up-your-github-pages-the-right-way-955486220418

Resources:

• fun fun function series
• vue test utils library (great docs, basically offcial)

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).

Resources:
phaser (games)
pixijs (general 2d webgl)

Resources:

• What’s the deal with functional components in Vue.js?
• Functional Components in Vue.js
• Vue NYC - VueJS Render Functions / Functional Components