frontend-web

Frontend Web Guidelines

The Kaneo web application is built with React, TanStack Router, TanStack Query, and Vite. This document outlines conventions and patterns for frontend development.

Framework: React

Component Structure

Components are organized in apps/web/src/components/:

// apps/web/src/components/task/task-card.tsx
import { Task } from "@/types/task";

type TaskCardProps = {
  task: Task;
  onUpdate?: (task: Task) => void;
};

export function TaskCard({ task, onUpdate }: TaskCardProps) {
  return (
    <div className="p-4 border rounded-lg">
      <h3>{task.title}</h3>
      {/* ... */}
    </div>
  );
}

Best Practices

1. TypeScript: Always type props and component return types
2. Component naming: Use PascalCase for component files and exports
3. Props destructuring: Destructure props in function parameters
4. Conditional rendering: Use ternary or logical operators clearly

// Good: Typed component with clear structure
type ButtonProps = {
  variant?: "primary" | "secondary";
  children: React.ReactNode;
  onClick?: () => void;
};

export function Button({ variant = "primary", children, onClick }: ButtonProps) {
  return (
    <button
      className={cn("px-4 py-2", variant === "primary" && "bg-blue-500")}
      onClick={onClick}
    >
      {children}
    </button>
  );
}

// Bad: Untyped, unclear structure
export function Button(props: any) {
  return <button onClick={props.onClick}>{props.children}</button>;
}

Routing: TanStack Router

File-Based Routing

Routes are defined using file-based routing in apps/web/src/routes/:

// apps/web/src/routes/tasks/$taskId.tsx
import { createFileRoute } from "@tanstack/react-router";
import { useTask } from "@/hooks/queries/task/use-task";

export const Route = createFileRoute("/tasks/$taskId")({
  component: TaskPage,
});

function TaskPage() {
  const { taskId } = Route.useParams();
  const { data: task } = useTask(taskId);

  if (!task) return <div>Loading...</div>;

  return <div>{task.title}</div>;
}