Skip to content

igorsantos07/clockify-targets

Repository files navigation

Clockify Monthly Tracker

Tech involved

  • Svelte: there's nothing fancier for writing frontend apps 🚀
  • SvelteKit: I guess it comes bundled, so... Well, routing is great. Not yet used to SSR, though, so that's disabled.
  • Bootstrap 5: what I'm used to and seems more solid than SMUI (mostly because we'll need progress bars here), although React-Bootstrap is waaaay better than sveltestrap.
  • Logo based on logo.com (surprisingly well-used domain!) (logo admin). It got adapted to mimick the Clockify clock arms, and thus there's no SVG available.
  • Sass: because it's sassy 💅
  • Axios: easy to use "fetch() replacement"
  • date-fns: still waiting for the Temporal API, and Luxon doesn't allow changing the start of the week yet... 🤷🏼‍
  • devalue: a fancy little lib to better serialize data into LocalStorage, from which I got an interesting idea to serialize our own models 😎
  • Firebase: for a bunch of tools:

Developing

Once you've installed dependencies with npm install, start a development server with npm run dev, or opening it directly in the browser with npm run dev -- --open.

Building

To create a production version of your app, use npm run build.

You can preview the production build with npm run preview.

Deploying

The app is served at https://clockify-targets.web.app.

To deploy it there, use npx firebase deploy - although you probably don't need that, Firebase already auto-wired itself to GitHub pushes and pull requests 🎉

It's also possible to emulate hosting localy: npx firebase serve. This will not build the app previously, you still need to run npx run build before, if necessary.

Lastly, here's the Firebase Console.