Habitual - The practice better habits app

Table of Contents

• PURPOSE
• PROBLEM
• SOLUTION
  • Existing Examples Not Offered as an app
• SOLUTION DESIGN
  • Data Requirement
• WIP - Work In Progress Checklists
• Development Flow
  • Developing with bun and svelte-kit
• LESSONS LEARNED
  • During Setup
  • During Design
  • During Implementation
• USER FEEDBACK
• CONCLUSION

This document is part of the version controlled code used to deliver my web app entry to the EdgeDB + Vercel Hackathon. All rights are reserved. This is my first hackathon entry; I will continue to develop it as a way to shake out what I intend to be my preferred stack. Please review the repo and the nice dev flow commit history.

PURPOSE

Document and deliver proof of concept for a new web app — "Habitual" The practice better habits app

This submission documents the learning and testing of a full stack web app with:

• EdgeDB - cloud database, branching, handling of environment variables and more

• Vercel - seamless deployment and hosting with integrated environment variables from GitHub main branch releases

• Svelte - svelte-kit with jsdoc for types and svelte 5 preview

• Tailwind -

PROBLEM

You prefer electronic solutions to paper products for practicing "elastic habits"

Based on the book "Elastic Habits: How to Create Smarter Habits That Adapt to Your Day" by Stephen Guise. He wrote Mini habits and other books that lead to this approach. I want to design something for my own tracking, but I might reach out to him and see if he’d like to develop it further in a version that more closely follows his paper products.

SOLUTION

The practice better habits app

The proof of concept will be a very simple version based on the book and his current offerings on Mini Habits Shop

Existing Examples Not Offered as an app

Of his offerings, the Eslastic Habit Tracker (one sheet for a month’s tracking) is of most interest to me. The other products seem very best suited for paper use.

SOLUTION DESIGN

The practice better habits app

A fair use, derived work. A simplified getting started with his approach. Given the hackathon requirements:

• 3 pages - demo, app, blog

  • demo: video for recorded demo of entry

  • app: login email auth, one page with select action (something like define habit, track habit, review activity) or responsive grid of actions, forms details; for speed use an existing color scheme, no real branding or unified font approach yet.

  • blog: blog posts as automated ASCII doc to html to svelte page, why not. Try Asciidoctor via bun script prior to dev package script run.

• ✓ Leave demo app in place for now as working example; turn welcome into demo page with placeholder video, turn about into blog and draft blog but include in page later. Fast draft an entry in blog and setup automatic conversion from adoc file via predev package script.

• ✓ Turn blog into blog page by including generate html into svelte page

• ✓ Create an app page with simple grid of actions

• ✓ Create how-to page in same manner as blog using some readme materials

Data Requirement

Support elastic habit definition and tracking where each habit has three specific applications each with three levels of success/intensity.

Note

Creating Three Habits Start with top values List out activities for say top seven Make three choices to develop. “Use the broadest terms possible to cover multiple specific applications. Examples: garden, exercise, piano, woodworking (or even broader, crafting), creativity, cleaning, writing, relationships, mindfulness, healthy eating, reading, or any skill you want to build or area of focus (violin, juggling, soldering, engineering, home improvement, programming, public speaking, confidence, etc.), and so on.” — Elastic Habits: How to Create Smarter Habits That Adapt to Your Day by Stephen Guise https://a.co/0gwgMhI

Focus on three habits. Instead of score, just define as explained in chapter 9 of the book. Future scope should include aspects of sharing and enriched creation experience.

Likely we should design something that lets you:

• Log in to create or work with your data

• Describe a habit - create new habit and describe it’s vertical & horizontal activities; 3 levels of intensity/success - minimum/mini, medium/plus, maximum/elite AND 3 specific applications for each habit.

• Log - Track a habit - log an activity that was described in the previous step maybe include comments for that entry?

• Review logged and missing days - maybe simple counts (later make filterable date range or month), perhaps the additional comments are nice to see here.

Note: these became Define, Log, Review, and Help.

WIP - Work In Progress Checklists

Instead of loads of design, I’ll update this readme to reflect the progress and use a GitFlow workflow pushing Main branch releases to GitHub. The repo is private now, but I will likely make it public for entry to the contest and to gather feedback.

DO NEXT SETUP

• start GitHub repository (private for now), Gitflow workflow, labels and issue templates

• setup tailwind and initialize svelte kit project using svelte 5 preview w demo app

• converted read me from markdown to ASCII doc and added image directory; let’s explore including html version into the entry app

• setup formatting and styling configuration and test by applying format and style fixes and run dev

• update all apps and test dev

• make svelte demo app style compliant and lint free

• test build and preview

DO NEXT DESIGN

• outline the README.adoc for scoping and deploying an entry for the hackathon with an eye to continue project in another context after getting feedback

• add pre dev script with bun script to convert adoc to html

• add some issues for the required in scope requirements for submission

DO NEXT IMPLEMENTATION

• Add pages and routes (see design section) - help is done,D,L,R next

• Add db schema and data, actions, habits, user and user auth

• Setup Vercel to deploy the app, set to deploy on github post

• Test dev, build, preview - issues with build and preview; integrations complete; testing. Resolved, clean dev, build, preview.

• Test the database moving from dev inside a feature branch to main, then feature branch again

• Need more time for auth and schema testing before finishing the pages that interact wiht the db

Development Flow

I use semver, with the GitFlow approach (main and develop) with feature, hotfix, and release branches. When main is updated locally, it is pushed to the GitHub release branch. When main is updated on GitHub, it is pushed to the GitHub develop branch. When main is updated on GitHub, it is pushed to the GitHub main branch. In the future, I may want to adopt pull request scheme from main to GitHub. This current approach is great for small teams and certainly for a team of one.

Developing with bun and svelte-kit

Once you’ve created a project and installed dependencies with bun install, start a development server:

bun run dev

# or start the server and open the app in a new browser tab
bun run dev --open

To create a production version of your app:

bun run build

You can preview the production build with bun run preview.

Normally to deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment. See link:https://vercel.com/docs/frameworks/sveltekit

Because of Vercel, one can "deploy your SvelteKit projects to Vercel with zero configuration, enabling you to use Preview Deployments, Web Analytics, Serverless Functions, and more".

LESSONS LEARNED

I was able to complete Vercel Integration linking my Vercel project to EdgeDB instances on clould.edgedb.com. Vercel will manage EDGEDB_INSTANCE and EDGEDB_SECRET_KEY environment variables for me. This allows EdgeDB client libraries to securely and seamlessly connect o my EdgeDB Cloud instances. Also, GitHub is integregated in that my GH repositories are linked to EDB such that when I crate a new branch in GH, a new branch in the DB is created for it. The idea is that EDB will keep the branch schema changes up to date with migrations made in them when or as I push changes to my GH branch. I will be testing this with great interest.

During Setup

• Note: bun run without the -b flag will default to run in node environment. You can still use -b for say scripts or installs and updates.

• According to vite-plugin-svelte at dev script time:

  • Svelte 5.0.0-next.138. Svelte 5 support is experimental, breaking changes can occur in any release until this notice is removed.

  • work in progress: svelte-inspector is disabled until dev mode implements node to code mapping

During Design

• Start sooner

• Need to explore making entire cards hot for action, links ok; maybe at least add links to the single letters if time permits

• Auth is conceptually easy but we will have to depend on the example; enable option in scheme and leverage a single user type throughout with owned or created by

• Long ago i cloned a favorite tool and deployed it on vercel with their setup example it was very easy, so let’s hope that happens here; I need time for the data

• Interesting challenges trying to work with consrtaints in my schema; No, the syntax constraint exclusive on .habit on .intensity_type; is not valid in EdgeDB. Edgedb scheme may not currently support composite exclusivity (i.e., ensuring uniqueness across multiple properties or links). TODO verify. So some constraints, would need to be enforced at the application level.

During Implementation

• Work in progress

• Start sooner

• This exercise in scoping is very important for me

• In EdgeDB 5, databases were replaced by branches…​ and i think projects by modules? TODO

• went to cloud.edgedb.com and added gh integration to this repo where i could also create an instance for this project. VERY NICE.

• added my project to vercel

• went pro for cloud.edgedb.com as i had one test project that used up free tier

• need more time to finish testing schema and auth; i got a draft schema migrated; I can log into cloud and see schema in instance

• I’m out of time to learn auth and get the new schema going at the same time

• pushing the rest and submitting for comment.

• trying to shake out the working vercel deployment so i can get feedback.

• was able to make all the integrations (see note above on lessons learned)

USER FEEDBACK

• will have to wait for that.

CONCLUSION

Thanks for reviewing my submission! I’m a big fan of both sponsors and look forward to your feedback.