trentprynn / habitapper.com

repository for habitapper.com -- feedback loop based habit tracking

HabiTapper.com

Repository for the source code of HabiTapper.com

Under Development

• Please note that the following project is under active development and is subject to change

Run and develop locally

1. clone the repository
2. navigate into it
3. use docker to spin up a postgres instance for our local application to connect to
   • docker run --name habitapper-db -e POSTGRES_USER=habitapper-user -e POSTGRES_PASSWORD=habitapper-pass -e POSTGRES_DB=habitapper -p 5432:5432 -v habitapper-data:/var/lib/postgresql/data -d postgres
4. Create a .env file the defines the required runtime variables
   • cp .env.sample .env
5. run yarn
   • installs dependencies
6. run yarn prisma migrate dev
   • runs db migrations
7. run yarn dev
   • runs application with hot reloading enabled

Useful commands during local development

1. yarn prisma studio
   • runs a local website at localhost:5555 that allows for easy viewing and interaction with the local postgres database the application is using
2. curl -I --request POST --url "http://localhost:3000/api/tasks/processExpiredHabits" --header "cron_key: local_key"
   • sends a HTTP POST request to the API route that resets habit streaks that were not claimed. In production you should setup automatic pinging of this end point so user habit streaks are reset after not being claimed.
3. docker run --name pgadmin4 -e [email protected] -e PGADMIN_DEFAULT_PASSWORD=your_password -e PGADMIN_LISTEN_PORT=4000 -p 4000:4000 -v pgadmin_data:/var/lib/pgadmin -d dpage/pgadmin4
   • runs a pgadmin4 container that you can configure to connect to your local (or remote) postgres database, useful if you want to look into your database more deeply then yarn prisma studio offers
     • NOTE: if you're trying to connect to your local database from pgadmin4 running in a container use the host name host.docker.internal instead of localhost during initial server connection configuration

Deployment

• On a push to master the website will be deployed automatically by Railway
• The following commands can be used to locally build and run the Dockerfile that will be deployed
  • build image: docker build . -t habitapper.com
  • create container: docker run -d --name habitapper.com --env-file .env -p 3000:3000 habitapper.com
  • stop container: docker stop habitapper.com
  • delete container: docker rm habitapper.com
  • delete image: docker rmi habitapper.com

habitapper.com's Issues

Change to use NextAuth.js getServerSession

Currently our Next.js app uses server side rendering on almost all pages. It does a lot of await getSession(context) calls to verify the user is signed in before fetching data and showing them the page. Additionally in a lot of our API routes we make the same call to get the session to verify the user has access to whatever resource they're calling for.

The implementation for that method currently uses fetch and therefore http under the hood. Because we're running the app serverless on Vercel's platform this is extremely slow and makes the entire app feel sluggish.

The library is aiming to support a getServerSession method in v4 (which we're already on the beta version of) which should allow us to follow the recommended practice of not making fetch calls from a server side route.

Below is a quote from the next documentation about this

Note: You should not use fetch() to call an API route in getServerSideProps. Instead, directly import the logic used inside your API route. You may need to slightly refactor your code for this approach.

Reference comment about this new method coming down the pipeline:
nextauthjs/next-auth#1535 (comment)

Show user’s highest ever streak for a given habit

it would be nice if a user could see the highest streak they've ever achieved for a given habit, perhaps it would inspire them to continue using the website's and accomplishing their habits

I'm thinking in the drop down menu for a habit there's a option named "info" that brings a user to a habit information page or opens a modal with more detailed information about the relevant habit

allow a user to delete their account

A user should be able to delete their account and all of their data easily

Add the ability to track weight over time

Add a weight section of the website -- a simple numerical (floating point) weight input that a user can input at most once per day (relative to your timezone). The user's weight over time is shown on a graph with a point for each day they entered their weight. Perhaps a user can set their target weight and on the graph that can be shown as a solid, small horizontal line so that a user can see how they are progressing relative to their target

Allow a user to reorder their habits

It would be nice to allow a user to drag and drop their habits and then remember that order for them.

Add darkmode

It would be nice if the website had a dark mode and it used the user's preferred color scheme and perhaps had a slider to turn on / off like we're seeing on so many websites now

Allow a user to edit an existing habit's name

It would be nice if a user could select an "Edit" option from the drop down menu for a given habit. Once this is selected I'm thinking the habit name changes to an input and the "Claim" button changes to "Save".

Add swagger api documentation

Use next-swagger-doc to add an api (api/docs?) route that generates swagger documentation from jsdoc annotated nextjs api routes.

Allow a user to configure receiving a reminder email if they have any unclaimed habits

Once #3 is finished we'll have a timezone for each user, once that's true it would be nice to allow a user to opt-in to a reminder email they receive at a time they set if they have an unclaimed habit.

Remove 'isarray' dependency

When upgrading to [email protected] there's an issue where a library we use (swagger-ui-react, it's what displays our swagger docs) is missing it's isarray dependency. To remedy this temporarily I added the library as a dependency to this project even though this project does not use the library.

Once the issue has been resolved, we should be able to safely remove the dependency on this library

The following issues are tracking this problem and once resolved we should be able to safely remove the library from our dependencies
vercel/next.js#30669
jellydn/next-swagger-doc#97

Add a client side demo page

It would be nice if a user could try adding / claiming / removing habits from a client side page without requiring them to login

I'm thinking below the homepage's Login button there's a "Demo" button that takes you to this page.

Allow a user to reset a habit streak

A user should be able to reset their habit streak. I'm thinking habit drop down menu has a reset option that shows a standard confirmation modal and on accept resets the habit to new.

Have a user give their timezone and use that for habit streak reset

Currently habit streaks are reset after not being claimed for 48 hours (meaning streak timing is relative to the habits themselves). This is nice and simple but I think a much better user experience is to have users set their timezone and at midnight for that user's timezone any habits they did not claim within that day would have their habit streaks reset.