The Problem: Pressure from Rigid Habit Trackers

Imagine this: You’re excited to start a new habit, so you download a popular habit tracker. You set your goals, but after a few missed days, you feel guilty and pressured to keep up. The app’s rigid structure doesn’t fit your lifestyle, making it harder to stick with your goals. This frustration is common, leading many to abandon habit tracking altogether.

Diagnosis: The Root of the Problem

The issue lies in the inflexibility of most habit trackers. They often impose strict routines and frequent reminders, which can be overwhelming. Users need a tool that adapts to their lifestyle, offering flexibility without the pressure of rigid tracking.

The Solution: Build Your Own Self-Hosted Tracker

Creating your own tracker allows you to customize it to fit your needs perfectly. Let’s guide you through building a simple, self-hosted habit tracker using Docker, Nuxt.js, Express.js, and PostgreSQL.

Step 1: Set Up Your Development Environment

Ensure you have Docker installed. This will simplify setting up your development environment.

docker --version

Step 2: Choose Your Tech Stack

For this project, we’ll use:

  • Frontend: Nuxt.js with Vuetify for a clean, responsive UI.
  • Backend: Express.js with TypeScript for strong API handling.
  • Database: PostgreSQL for reliable data storage.
  • Hosting: Docker Compose for local development and Docker for deployment.

Step 3: Initialize Your Project

Create a new directory for your project and initialize it with npm.

mkdir habit-tracker && cd habit-tracker
npm init -y

Step 4: Set Up Docker

Create a docker-compose.yml file to define your services.

version: '3.8'

services:
  postgres:
    image: postgres:13
    environment:
      POSTGRES_USER: habituser
      POSTGRES_PASSWORD: habitpass
      POSTGRES_DB: habitdb
    ports:
      - "5432:5432"
    volumes:
      - postgres_data:/var/lib/postgresql/data

  client:
    image: node:16-alpine
    working_dir: /app
    volumes:
      - ./:/app
    ports:
      - "8080:8080"
    command: sh -c "npm install && npm run dev"

volumes:
  postgres_data:

Step 5: Initialize Nuxt.js Project

Install Nuxt.js and its dependencies.

npm install nuxt @nuxtjs/axios @nuxtjs/auth-next @nuxtjs/vuetify

Step 6: Create the Frontend

Set up your Nuxt.js project with Vuetify for a modern UI.

// nuxt.config.js
export default {
  buildModules: [
    '@nuxtjs/vuetify',
  ],
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth-next',
  ],
  vuetify: {
    theme: {
      dark: false,
    },
  },
}

Step 7: Set Up the Backend

Create an Express.js server to handle API requests.

// server.js
const express = require('express');
const cors = require('cors');
const helmet = require('helmet');
const morgan = require('morgan');

const app = express();

app.use(helmet());
app.use(cors());
app.use(morgan('dev'));
app.use(express.json());

// Routes
app.use('/api', require('./routes'));

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Step 8: Set Up PostgreSQL

Create a .env file for your database credentials.

DB_HOST=postgres
DB_USER=habituser
DB_PASSWORD=habitpass
DB_NAME=habitdb

Step 9: Create the Database Schema

Use Prisma ORM for database interactions.

// prisma/schema.prisma
generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = "postgresql://habituser:habitpass@postgres:5432/habitdb"
}

model Habit {
  id        Int      @id @default(autoincrement())
  name      String
  frequency Int      @default(1)
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

Step 10: Set Up Cron Jobs

Use a cron job to remind you of your habits without pressure.

crontab -e

Add a line to trigger a notification script every morning.

0 7 * * * /path/to/notification-script.sh

Common Pitfalls: Avoiding Mistakes

  • Choosing an Overly Complex Stack: Start simple and expand as needed.
  • Ignoring Security: Always secure your application, especially if hosting publicly.
  • Not Testing Cron Jobs: Ensure your cron job works by testing it locally.

Verification: Ensuring Everything Works

After deployment, check your application’s status and logs.

docker ps

docker logs -f habit-tracker_postgres_1

Going Further: Enhancing Your Tracker

Consider adding features like analytics or social sharing to enhance your experience.

By following these steps, you’ve created a flexible, self-hosted habit tracker tailored to your needs. This solution reduces pressure and increases adaptability, helping you maintain your habits effortlessly.