Home

The home page is the hub of the Projectly app. From here, you can create new projects and access the most recent tasks to work on.

Projectly as a whole is designed to send as little JavaScript to the user as possible, working mostly with Server Components. Projectly aims to use Client Components only where absolutely necessary, and pushes their usage down the lowest leaf possible to ensure maximum response speeds. An example of this from the home page can be taken from the 'Resolve'.

The 'Resolve' button needs an input from the client side, so instead of making the whole Task List a Client Component with a button inside, a seperate Button Client Component was created, as seen below.

"use client";
 
import Button from "./Button";
import { resolveTask } from "@/lib/api";
import Link from "next/link";
 
export default function ResolveTask({ id, intent, size }) {
  const handle = async () => {
    await resolveTask(id);
  };
 
  return (
    <div>
      <form onSubmit={handle}>
        <Button className="text-sm" intent={intent} size={size}>
          🗸 Resolve
        </Button>
      </form>
    </div>
  );
}

With just 21 lines of code, the amount of JavaScript sent to the client was greatly reduced. This is just one small example of how Projectly optimizes wherever possible to better the user experience.