eswat2/git-notes

build the Github Note Taker app using Vue 3 and Vite..

git-notes

I wanted to build a Vue version of my egghead-notes app and this is the result.

Background:

I am using a custom WebSockets notes server, fire-notes.herokuapp.com, to handle reading & writing notes. The repo for that can be found here: fire-notes

Features:

• using the latest version of Vue3
• converted the project to use Vite - NextGen Frontend Tooling
• refined UI elements
• mobile friendly layout
• an isolated store mutated only by actions
• a simple eventBus which controls the flow of data thru the app
• uses axios for all api calls
• uses WebSockets to talk to a custom notes server, fire-notes
• a simple html5 pushstate mechanism
• saves last valid username to local storage
• initializes app from URL if it matches #:username
• otherwise it reloads last username from local storage
• a simple navigator for visited usernames

Deployed:

This app is running on git-notes-eswat2.vercel.app

Running the app locally is as simple as executing the following:

yarn install
yarn build
yarn serve

git-notes's Issues

PopState is broken

hitting back arrow updates URL but not the view...

Need to lowercase user input

User input for the search needs to be converted to lowercase before it’s sent to the store & api

add Vuex store

create a simple Vuex store to replace the embedded store

1. store with simple mutations
2. actions issue commits to mutate store
3. remove event mechanism to push changes
4. containers access data via the store
5. leave event mechanism to invoke actions (phase 1)

Isolate actions to events only

Enhancement: isolate the actions to be purely event driven, i.e. all interactions should be thru the event bus

• vue components
• fire notes module

Question: does this solve anything?

add support for Kuker

Kick-ass browser extension to debug your apps

https://github.com/krasimir/kuker

Need to support add-new-note event

Update actions

Convert to an Immutable store??

Would an immutable store make this code cleaner or is that overkill for a small app like this?

Options:

• vuex
• vue-freezer

The primary goal is to isolate the store so that is is effectively immutable except via actions...