vue-feathers-productivity-app

A productivity web-app (with ToDo, reminders, notes and a calendar of events) created with Vue, Feathers-Vuex, NeDB.

Intended to be run on a LAN on a dedicated server (desktop or laptop) it offers a web-app interface that is accessible to all other devices on the same network.

Versions

• v0.1: Authentication foundation
  • can be used as starting point for any vue.js application requiring authentication.
  • uses feathers-vuex for authentication.
  • uses NeDB as database.
    • Sufficient for small scale applications - if need be can be swapped easily for MongoDB or other more robust DB solution.
• v0.2: One Service: Notes
  • extends v0.1.
  • uses feathers-vuex service to store notes.
  • logged in user can access own notes only.
  • implements create, read, edit, delete from server.
  • implements client-side sorting and filtering.
  • has several types of animation: vue-based as well as plain css.
  • changes in one browser are immediately reflected in another.
• v0.3: Multiple Services
  • extends v0.2.
  • adds Todos service.
  • adds Reminders service.
  • adds Events service.

V0.3

Features

• Authentication
  • functional registration page
    • on success: redirect to login
      • user is created in db
      • display username
  • functional login page
    • on success: redirect to dashboard
  • logout functionality
  • basic dashboard page
    • dashboard is not accessible when not logged in
      • if not logged in: redirect to login
• Notes service
  • add Notes service
    • enable server side
      • generate feathers service
      • add authentication hooks
    • CRUD operations
      • Create
      • Read
      • Update
      • Delete
    • redirects to login when session has expired
    • display Create/Update error messages
    • ask confirmation before Delete
    • the logged-in user can access only their own notes
    • when user logs out, their notes data are cleared from store
    • changes in one browser are immediately reflected in another
    • a note has text, category and color properties
      • support basic markdown-style formatting of note text
      • support color-coding
      • support ordering by
        • created time
        • modified time
        • category
        • color
      • support filtering by
        • color
        • category
        • pinned on dashboard
    • has list and grid mode
    • implement pure css animations as well as vue-based transitions
• Reminders service
  • add Reminders service
    • prepare server side
      • generate feathers service
      • add authentication hooks
    • prepare client side
      • add reminders service to the store
      • add reminders service scaffold to the app
    • CRUD operations
      • Create
      • Read
      • Update
      • Delete
    • redirects to login when session has expired
    • the logged-in user can access only their own reminders
    • real-time update events are send only to the authenticated user
    • when user logs out, their reminders data are cleared from store
    • changes in one browser are immediately reflected in another
    • reminder has text and due date & time properties
    • reminder has window properties
      • preview window (days)
      • count-down window (hours & minutes)
      • grace/snooze window (days, hours & minutes)
    • reminder has recurring scheduling properties
      • start date of recurring schedule
      • day of the week recurring
      • day of the month recurring
    • reminder has countdown when end time is close
    • a past-due notification for a recurring reminder can be dismissed
• Events service
  • add Events service
    • prepare server side
      • generate feathers service
      • add authentication hooks
    • prepare client side
      • add events service to the store
      • add events service scaffold to the app
    • CRUD operations
      • Create
      • Read
      • Update
      • Delete
    • redirects to login when session has expired
    • events are integrated with the calendar
    • event can be associated with a reminder
    • the logged-in user can access only their own events
    • real-time update events are send only to the authenticated user
    • when user logs out, their events data are cleared from store
    • changes in one browser are immediately reflected in another
    • event has title, description and start/end date & time properties
    • event has color and category properties
    • event has recurring scheduling properties
      • start and end date of recurring schedule
      • start and end time of recurring event
      • day of the week recurring
• Todos service
  • add Todos service
    • prepare server side
      • generate feathers service
      • add authentication hooks
    • prepare client side
      • add todos service to the store
      • add todos service scaffold to the app
    • CRUD operations
      • Create
      • Read
      • Update
      • Delete
    • redirects to login when session has expired
    • todos board has "open tasks", "tasks in progress" and "completed tasks" lanes
      • "open tasks" and "completed tasks" lanes can be toggled between viewed and hidden states
    • todos with due date are shown on the calendar
    • todo can be associated with a reminder
    • the logged-in user can access only their own todos
    • real-time update events are send only to the authenticated user
    • when user logs out, their todos data are cleared from store
    • changes in one browser are immediately reflected in another
    • todo has title, description, note, and due date properties
    • todo has status property
    • todo has color, category and pinned properties
    • todo has elapsed-time property
      • logged-in user can start/stop the timer (repeatable) to keep track of amount of time spend on task
• services
  • > Reminders service
  • > ToDos service
  • > Notes service
  • > Bookmarks service
  • > Events service
  • > Diary service
  • > Archive service
  • import vue-fontawesome icons
  • Each service has a dedicated view page.
  • Each service has a summary view on the Dashboard page
    • Dashboard page from top to bottom: Reminders, ToDos, Notes, Calendar
    • Dashboard page from top to bottom: Reminders, ToDos, Notes, Calendar, Bookmarks, Archive
    • Reminders has small strip on top of Dashboard page with upcoming reminder
    • Reminders has countdown when next reminder is close
    • Notes applies filter to hide non-pinned items
  • Services can be archived
• calendar
  • shows all days in selected month
    • can cycle through months
    • can jump back to current month
  • displays non-recurring reminders
  • displays recurring reminders
  • displays events
  • displays recurring events
  • can switch between month-view and day-view
• progressive web app
  • app is operational when offline
  • app syncs when back online
• deployment
  • app is deployed on "cloud" service
  • app is deployed on dedicated LAN server (PC/Laptop)
  • app is accessible on desktop and mobile device
• add "remain logged in" option to extend 1-day jwt expiration
• Scales from large screen desktop to small screen mobile (but due to the amount of information per page, best to view on medium to large screen)

Page flow

/
if logged in -> dashboard
else -> login

/dashboard
if logged in -> ok, stay
else -> login

/login
if authenticated -> dashboard

/register
if valid entry -> login

Nice to have but not implemented

• Encrypt NeDB data items - each with user's key
• Progressive Web App
• Test suite
• CI
• Deployable to cloud
  • Static (pre-rendered) + Lambda functions?
  • Replace NeDB with MongoDB or similar
  • AWS? Netlify?
• to run server on mobile device using termux app?

NOTE: The "pwa" branch contains the basics to turn this web-app into a Progressive Web App (PWA).

Setup

If you do not yet have NodeJs installed, I suggest to install nvm, the NodeJs Version Manager, and use that to install NodeJs V9.0.0 or later (I have this project running on an old eeepc netbook with Linux Lite 3.8, the last 32bit version. After much trial and error I installed Node V9.0.0 because that is the latest major version for which binaries are available)

Clone or download this repo - all required dependables are included. You only need NodeJs (with npm, the NodeJs Package Manager) to pre-exist on your system.

# cd to vue-feathers-productivity-app repo directory
$ cd [path/to/vue-feathers-productivity-app]
# install node_modules in server directory
$ cd server
$ npm install
# install node_modules in client directory
$ cd ../client
$ npm install

Development Usage

In Git Bash window #1 - run server:

# cd to vue-feathers-productivity-app repo directory
$ cd [path/to/vue-feathers-productivity-app]
$ cd server
# copy dummy data as a starting point
# 4 users: test1, test2, test3 and test4. Password equals username
$ npm run setup:dev
# start the server
$ npm run dev

You should see a generic Feathers page at http://localhost:3030/.

In Git Bash window #2 - run client:

# cd to vue-feathers-productivity-app repo directory
$ cd [path/to/vue-feathers-productivity-app]
$ cd client
# start the server (hot-reload enabled)
$ npm run dev

You can view the client app at http://localhost:8289/ (local) or at a LAN address (LAN network) - the build output will show the LAN IP address to use.

"Production" Usage

This app is meant for local use, it's not designed to be able to handle a large user base. Besides, content is stored in simple clear text format only.

This app is meant to run on your LAN on one PC/laptop and you can then access the browser interface from any of your other devices when on the same network.

When used like this, you no longer need to run the server and client in "dev" mode. Instead of

# in the command windows for client and server
npm run dev

you can now build the client code with

# in the command window for the client
npm run build

and start both server and client with

# in the command windows for client and server
npm start

Dependencies

Client Dependencies:

• @feathersjs/authentication-client
• @feathersjs/feathers
• @feathersjs/socketio-client
• @fortawesome/fontawesome-svg-core
• @fortawesome/free-regular-svg-icons
• @fortawesome/free-solid-svg-icons
• @fortawesome/vue-fontawesome
• feathers-vuex
• register-service-worker
• serve
• socket.io-client
• vue
• vue-router
• vuex

Server Dependencies:

• @feathersjs/authentication
• @feathersjs/authentication-jwt
• @feathersjs/authentication-local
• @feathersjs/configuration
• @feathersjs/errors
• @feathersjs/express
• @feathersjs/feathers
• @feathersjs/socketio
• compression
• cors
• feathers-authentication-hooks
• feathers-nedb
• helmet
• nedb
• serve-favicon
• winston

Screenshot - Add Reminder

Screenshot - Add ToDo

Screenshot - Add Note

Screenshot - Add Calendar Event

Screenshot - Sample content

Screenshot - Sample content expanded

Screenshot - Notes filter