✅ haBits — building habits, bit by bit.

A personal web project to practice React + Next.js + GraphQL + Keystone JS, and good habits...

haBitsRecording.mov

Getting started

$ git clone https://github.com/ztratify/building-habits.git (or similar) to clone the repo locally

$ cd building-habits to open the repo once it's downloaded

$ npm install in both the /frontend and /backend folders to install dependencies

$ npm run dev in both the /frontend and /backend folders to run each of them locally

View frontend (React + Next.js): http://localhost:1234

View Backend (Keystone JS): http://localhost:3000

Start building habits!

GraphQL

Explore GraphQL Schema using graphiql interface: http://localhost:3333/graphiql

Queries

Habits & Steps with custom search, filtering and sort:

query habitsAndSteps {
  habits (
    order: CREATED
    search: "WATER"
  ) {
    id
    title
    goal
    period
    slug
    steps (
      order: DATE
      startDate: "2021-11-11"
      endDate: "2021-11-13"
    ) {
      goal
      progress
      isComplete
    }
  }
}

Mutations

Create Habit:

mutation createHabit {
  createHabit(input:{
    title: "💦 FILL WATER BOTTLE",
    goal: 3,
    period: "daily"
  }) {
    habit {
      id
      title
      slug
      createdAt
    }
  }
}

Update Habit:

mutation updateHabit {
  updateHabit(input:{
    id: 11,
    title: "👨‍💻 15 MINUTES OF CODE",
    goal: 3,
  }) {
    habit {
      goal
      title
      period
      slug
      id
    }
  }
}

Delete Habit:

mutation deleteHabit {
  deleteHabit(input:{
    id: 11
  }) {
    habit {
      id
      slug
    }
  }
}

Create Habit Steps (progress):

mutation createSteps {
  createSteps(input:{
    habitId: 11,
    date: "2021-11-11",
    progress: 3,
  }) {
    step {
      date
      goal
      progress
      isComplete
      habit {
        title
        goal
      }
    }
  }
}

Update Habit Steps (record progress):

mutation updateSteps {
  updateSteps(input:{
    habitId: 11,
    date: "2021-11-11",
    progress: 1,
  }) {
    step {
      date
      goal
      progress
      isComplete
      habit {
        title
        goal
      }
    }
  }
}