https://github.com/vogler/tasktime-2019

Sample task/time-tracking web-app to evaluate Svelte (reactive UI), Firebase (auth, hosted real-time document store), Bulma (CSS)
https://github.com/vogler/tasktime-2019

firebase firebase-auth firebase-firestore firestore svelte time-tracker time-tracking-app timer todo todoapp

Last synced: 11 days ago
JSON representation

Sample task/time-tracking web-app to evaluate Svelte (reactive UI), Firebase (auth, hosted real-time document store), Bulma (CSS)

• Host: GitHub
• URL: https://github.com/vogler/tasktime-2019
• Owner: vogler
• Created: 2019-11-21T12:22:28.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-07-12T03:50:51.000Z (over 1 year ago)
• Last Synced: 2024-10-17T23:09:00.593Z (21 days ago)
• Topics: firebase, firebase-auth, firebase-firestore, firestore, svelte, time-tracker, time-tracking-app, timer, todo, todoapp
• Language: Svelte
• Homepage: https://github.com/vogler/web-tech
• Size: 703 KB
• Stars: 6
• Watchers: 3
• Forks: 1
• Open Issues: 11
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# tasktime_svelte-firebase

This is a test project building some todo/time-tracking app using:

- [Svelte](https://svelte.dev) as compiler for reactive UI components

- [Firebase](https://firebase.google.com/) for Auth and Firestore

- [Bulma](https://bulma.io/) for CSS

Try it at https://fire-abc6b.web.app/

Evaluation: not too happy with Svelte, Firebase is ok.

Don't like Bulma since you have to add classes to everything and it has some strange defaults like making all headings `h1, h2...` look the same unless you add more redundant class names...

Cons Svelte:

- no Typescript yet (or hard to setup)

- editor support (no Intellisense for JS in .svelte files)

- limited composability, file for every component

- element list problem:

  - immutable forces to handle all edits in list component instead of element component

  - mutable allows to move functions into element component but makes all elements react to change in any element

Pro Firebase:

- easy authentication (and restricted db access via `firestore.rules`)

- Firestore:

  - real-time (can subscribe to updates)

  - offline support (even sync between tabs)

Cons Firebase:

- vendor lock-in

- can't test offline (`firebase serve` launches some server, but no local database)

- limits; what happens for >1 write/s, just queued/throttled?

- https://firebase.google.com/docs/firestore/quotas

  - per day: 1GiB, 50k read, 20k write -> 13.88 writes/min

  - soft limit: >1 write/s: increased latency/conflicts

More notes in [devlog.md](./devlog.md).

## develop

```bash

npm install

npm run dev

```

Open in browser; has live-reload.