The Face You See: Frontend

The frontend is everything that runs in your browser — the buttons, text, colors, and layout you see and interact with. When you open StudyTracker, your browser downloads HTML, CSS, and JavaScript files, then renders them into the page you see.

Instead of writing one giant HTML file, React lets you break your UI into small, reusable pieces called components. A Button, a Card, a Sidebar — each is a component. You compose them together like LEGO bricks to build entire pages.

Traditional CSS means writing styles in a separate file. Tailwind CSS takes a different approach — you apply pre-built utility classes directly in your HTML/JSX. Instead of writing .button { background-color: blue; padding: 8px 16px; } in a CSS file, you write className="bg-blue-500 px-4 py-2" right on the element.

Next.js is a React framework that adds powerful features on top: file-based routing (folders = URLs), server-side rendering (faster page loads), API routes (backend in the same project), and automatic code splitting (only load what you need).

Below is a live playground with actual StudyTracker UI components. Change their props (properties) and watch how the output changes in real time:

<Button variant="default" size="default">
  Click me
</Button>

Here's a simplified React component — it receives props and returns JSX (HTML-like syntax in JavaScript):

const Button = ({ children, variant = "default", onClick }) => {
  return (
    <button
      className={buttonVariants({ variant })}
      onClick={onClick}
    >
      {children}
    </button>
  );
};