kcalCalc Svelte Themes

Kcalcalc

free calorie counting app designed for fast user interactions

kcalCalc

A free calorie counting app made to fit my needs.

Give it a shot at kcal-calc.vercel.app

Deprecation warning

please note that this app code and above instance are both deprecated. the instance may be made unavailable at any moment without further warning.

Screenshots

Mobile Day View Item Selection Mobile Week View

Desktop Unified View

Self Hosting

kcalCalc can be self-hosted for free using Firebase and a Cloud Host like Vercel.

Setup Firebase

  • Create new Firebase Project
  • Create Web App
  • Copy following env values for later:
    • VITE_APIKEY
    • VITE_AUTHDOMAIN
    • VITE_PROJECTID
    • VITE_STORAGEBUCKET
    • VITE_MESSAGINGSENDERID
    • VITE_APPID
  • Enable Auth: Go to "Authentication" > "Get started" > "Google" > "Enable" > set "Project support email" field > "Save"
    • Also set up your hosted app Domain under "Authentication" > "Settings" > "Authorized domains"
  • Enable Firestore: Go to "Firestore Database" > "Create database" > "Start in test mode" > "Next" > set "Cloud Firestore location" field near you > "Enable"
  • Setup Rules: "Firestore Database" > "Rules" > paste following
    • rules_version = '2';
      service cloud.firestore {
        match /databases/{database}/documents {
            match /Users/{userId}/{documents=**} {
            allow read, write: if userId == request.auth.uid;
          }
        }
      }
      

Host frontend

  • You can use a service like Vercel to host the frontend.
  • Fork the repo and login to Vercel via GitHub
  • Create a new project using the forked repo and add the env variables from above

Development

  • Copy env variables in a .env file

  • pnpm i

  • pnpm dev

  • firebase emulator usage can be toggled via VITE_USE_EMULATION=true.

  • firebase cli

    • install curl -sL https://firebase.tools | bash
    • firebase login
    • firebase emulators:start

Svelte Style Guide

  • Layout: Script, Markup, Styles
  • Script Layout: Imports, createEventDispatcher, export props, local state, reactive statements, functions.
  • Hints that you component is too complicated:
    • If you feel like you want to organize script differently
    • ~6 Levels of Indentation max
    • ~300LOC max

Top categories

Loading Svelte Themes