tborychowski/zakupnik3

Brilliant home-spendings-logger/manager

ZAKUPNIK 3

Another version of a brilliant home-spendings-logger/manager. Mobile friendly and simpler than ever.

Screenshots

Get started

Docker

Requires docker to be installed and running.

Create docker-compose.yml file in a directory somewhere with the contents (or copy this file from the this repo):

---
version: '3.7'
services:
  zakupnik:
    container_name: zakupnik
    image: tborychowski/zakupnik
    restart: unless-stopped
    ports:
      - "3000:${PORT}"
    env_file:
      - ./.env
    volumes:
      - ./database.db:/app/database.db

Then run:

docker-compose up -d

Your app should be available on localhost:3000. The database.db file should be created in the same directory, so you can back it up periodically.

Local instance

Requires: node and npm to be installed locally.

Run the following commands:

git clone https://github.com/tborychowski/zakupnik3.git zakupnik
cd zakupnik
npm ci
npm run startprod

Configuration

Create .env file:

• when running with docker - in the same directory as your docker-compose.yml
• when running locally - in the root dir of the repo

You can copy the attached .env-example file and just modify the values:

SESSION_SECRET=abcdef
AUTH=true
LOGIN=admin
PASSWORD=admin
PORT=3000
NODE_ENV=prod

• SESSION_SECRET - is used to encrypt the auth session and api requests
• AUTH - allows you to disable the authentication, and run the app without the need to login. This is not recommended when the app is deployed to a public location!
• LOGIN and PASSWORD - are your user credentials (when AUTH is true)
• PORT - is the port on which the app will run inside the container.
• NODE_ENV - is the environment type. prod or production should be set for production environments, otherwise: dev or development.

Building docker image

Run

docker build -t tborychowski/zakupnik .

zakupnik3's Issues

responsiveness

hide sidebar when too narrow

save full date for entries

filter table by category click

check rollup.js

Swap Groups with Categories (just names)

make it work

fix CRUD on form

• create
• create multiple
• update
• remove

free text parsing

provide just 1 text field (textarea) and parse it.
e.g.

fuel 50

would be parsed into:

{ category: 'Car', group: 'Fuel' description: '', amount: 50 }

and multiline:

tesco 100
cleaning 10+20+5
cosmetics 10

would be parsed into:

{ category: 'Food', group: 'Groceries', description: 'tesco', amount: 55 },
{ category: 'Home', group: 'Cleaning', description: 'tesco', amount: 35 },
{ category: 'Home', group: 'Cosmetics', description: 'tesco', amount: 10 },

add "income"

• allow negative values
• mark "income" category
• update stats with a new line series

highlight all categories when multi-line entry

Upgrade to gulp 4

improve tests

• improve & cleanup
  • seed the DB for all tests up front
• add tests for amounts in cats
• add tests for stats

UX: merge search box with input

UX: show relative dates

• yesterday or or Month+Day, as year is shown in the calendar

categories/groups editor

• settings?

Toaster

Update Form on category edit

design: dark theme

backup script

amounts in categories

tasks

• add api
• read api in component
• style

remove iconfont

• ⚲ (⚲) and transform: rotate(-45deg)
• × (×)
• ⚙ (⚙)
• ◄► or ‹›

pills/tree dropdown

• redesign the form: category to the right of description with a...
• category/group tree in a popup
• and pills below sorted by freq.
• fold "repeat" to an arrow-row below the rows

multiple tweaks

• make "repeat" work in entry parser
• make preview table non-clickable
• update preview on textbox focus
• clean up shitty code

design: more white space

add negative tests

for error codes

Some client caching

try not to reload data after each CRUD op, but rather use local stores and (eventual consistency)

chart: should start from 0

Adding repeat when editing item creates a new entry

design: center calendar & make it full word

refactor: introduce global store for client

preview

add preview on form change

weird date behaviour

• edit item (e.g. from 2018-01-20), save;
• create a new item (e.g. on 2019-01-01), save;
• new item will have a date of 2018-01-20;

Day is preserved from edit and not reset after save.

form parser lowercases text

sync entries CRUD with categories (amounts)

When entry is added/updated/removed categories amounts should be refreshed

style login

little things

• favicon
• increase chart height
• tweak colours
• import new data
• dont use express in-memory session
• login credentials to external file (or DB?)

refactor category table in the DB

check permit lib to replace passport

https://github.com/ianstormtaylor/permit/blob/master/examples/express.js

Add Chart

• add chart.js
• add API /stats/2018?group_id=2
• sync with date & cat-click

category pills in table

UX: above the chart: itunes-like bar of category

with % spending per month;

also: make up colors for categories

Incorporate yearly stats & filter somehow

maybe a toggle button (year | month) ?

table filtering

Localisation options

• currency symbol
• make sure numbers and dates are local

use `filter`s for btn styling

automatic deployment

script?
gh hook?

allow negative values for returns

PWA

https://developers.google.com/web/progressive-web-apps/

• add manifest.json: https://developers.google.com/web/fundamentals/web-app-manifest/
• add icons 192x192 & 512x512
  https://www.creamsoft.com/pl/blog/jak-poprawnie-dodac-do-strony-wlasna-ikone-favicon-dla-przegladarek-oraz-systemow-ios-androida-i-windows-8/
  https://realfavicongenerator.net/
• add service worker: https://developers.google.com/web/fundamentals/primers/service-workers/
• add <noscript> tag
• run lighthouse audit

--

• add meta to not scan (robots.txt)

UX: maybe highlight category when filtering

write out category above chart (when filtered)

api improvements

• group frecency
• keywords matching for groups
• more filters on entries (by cat, by group, etc)