Steps on how to build a habit tracker via remix.

Set Up

npx create-remix@latest

Aim of Application

This app is like a to do app, it enables users to add habits and delete them. Future work includes enabling users to specify how often they want this habit to occur via a calendar and getting a reminder about a specific habit.

Addding a Habit

import {
  Form,
  useActionData,
  useLoaderData,
  useSearchParams,
} from "@remix-run/react";
import {
  ActionFunction,
  json,
  LoaderFunction,
} from "@remix-run/server-runtime";
import { redirect } from "@remix-run/node";

export const action: ActionFunction = async ({ request }) => {
  const formData = await request.formData();
  const Habit = formData.get("habit");
  console.log("habit", Habit);
  return redirect("/");
};

export const loader: LoaderFunction = async ({ request }) => {
  const url = new URL(request.url);
  //const search = new URLSearchParams(url.search);
  //console.log(url);
  const habit = url.searchParams.getAll("habit");
  return json(habit);
};

export default function Index() {
  const data = useLoaderData<typeof loader>();
  console.log(data);
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
      <Form replace method="post">
        <input name="habit" type="text" />
        <button type="submit">Add Habit</button>
      </Form>
      <p>
        SHOW HABIT <button type="submit">delete habit</button>
      </p>
    </div>
  );
}

Other features to be included

• Deleting a habit
• Tracking a habit via calendar