Giter VIP home page Giter VIP logo

brunobernardino / budgetzen-web Goto Github PK

View Code? Open in Web Editor NEW
65.0 5.0 8.0 1.37 MB

Simple, Encrypted Budgets & Expenses. 💵

Home Page: https://app.budgetzen.net

License: GNU Affero General Public License v3.0

JavaScript 1.31% Makefile 0.32% TypeScript 87.61% CSS 5.77% Dockerfile 0.16% PLpgSQL 3.12% SCSS 1.71%
budget-management budgets end-to-end-encryption e2ee deno expense-tracker expenses expenses-manager pwa typescript

budgetzen-web's Introduction

Budget Zen - Web App

This is the web app for the Budget Zen app, built with Deno and deployed using docker-compose.

This is v3, which is end-to-end encrypted with open Web Standards, and works via web on any device (it's a PWA - Progressive Web App).

It's not compatible with Budget Zen v2 (end-to-end encrypted via Userbase) which you can still get locally from this commit, nor v1 (not end-to-end encrypted), which you can still get locally from this commit. You can still export and import the data as the JSON format is the same across all 3 versions (unencrypted).

NOTE: If your Android launcher doesn't show PWAs as an app, I've got a solution for you: a simple webview app.

Self-host it!

Deploy to DigitalOcean

Deploy to Render

Or check the Development section below.

NOTE: You don't need to have emails (Brevo) and subscriptions (Stripe) setup to have the app work. Those are only used for allowing others to automatically manage their account. You can simply make any user.status = 'active' and user.subscription.expires_at = new Date('2100-01-01') to "never" expire, in the database, directly.

Framework-less

This right here is vanilla TypeScript and JavaScript using Web Standards. It's very easy to update and maintain.

It's meant to have no unnecessary dependencies, packagers, or bundlers. Just vanilla, simple stuff.

Requirements

This was tested with Deno's version stated in the .dvmrc file, though other versions may work.

For the PostgreSQL dependency (used when running locally, self-hosted, or in CI), you should have Docker and docker-compose installed.

If you want to run the app locally with SSL (Web Crypto standards require https except for Chrome), you can use Caddy (there's a Caddyfile that proxies https://localhost to the Deno app).

Don't forget to set up your .env file based on .env.sample.

Development

$ docker-compose up # (optional) runs docker with postgres, locally
$ sudo caddy run # (optional) runs an https proxy for the deno app
$ make migrate-db # runs any missing database migrations
$ make start # runs the app
$ make format # formats the code
$ make test # runs tests

Other less-used commands

$ make exec-db # runs psql inside the postgres container, useful for running direct development queries like `DROP DATABASE "budgetzen"; CREATE DATABASE "budgetzen";`

Structure

  • Backend routes are defined at routes.ts.
  • Publicly-available files are defined at public/.
  • Pages are defined at pages/.
  • Cron jobs are defined at crons/.
  • Reusable bits of code are defined at lib/.
  • Database migrations are defined at db-migrations/.

Deployment

  • Just push to the main branch.

TODOs:

  • Enable true offline mode (securely cache data, allow read-only)

budgetzen-web's People

Contributors

brunobernardino avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

budgetzen-web's Issues

self-hosted deployment with nginx

Hi!

This looks great, I just can't get it to run..

I do a make start, which launches deno and that works.

Then a simple reverse proxy in nginx:

proxy_pass $upstream;
proxy_set_header Host $host;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_cache_bypass $http_upgrade;

Leads to a bunch of mimetype browser console errors like:

The resource from “https://budget.example.com/public/scss/style.scss” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

Happens for css, scss, ts, and js.

Fixing that by doing

location ~ \.css {
        add_header  Content-Type    text/css;
    }
    location ~ \.js {
        add_header  Content-Type    application/javascript;
    }
    location ~ \.scss {
        add_header  Content-Type    text/css;
    }
    location ~ \.ts {
        add_header  Content-Type    application/javascript;
    }

Gets rid of those errors, leaving only:

Uncaught SyntaxError: unexpected token: 'as' index.ts:26:58 for /public/ts/index.ts.

AFAIK typescript shouldn't be sent to a browser, so I'm not sure why that file is requested.

Also.. the deployment instructions in the README file could use some elaboration. I feel like I'm missing a lot of info, and I'd love to use your product.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.