Hallow Frontend Interview

Welcome, and thanks for interviewing with us! This repo is a starting point for the frontend interview — a small React + TypeScript app scaffolded with Vite. The tooling is already set up so you can spend your time on the problem, not the build.

General Requirements

• Please have the code checked out and your environment running before the start of the interview.
• Some stub code has been provided. You do not have to use it — restructure things however you like.
• Review all files and instructions before beginning.
• You may use Google, documentation, and any packages you need. Note: dependencies are historically the number one thing that prevents candidates from finishing. Choose additions thoughtfully — everything you need to complete the prompt is already installed.

Getting Started

npm install      # install dependencies
npm run dev      # start the dev server (http://localhost:5173)

Other scripts:

npm run typecheck   # type-check without emitting
npm run build       # type-check + production build to dist/
npm run preview      # preview the production build

The Prompt

Build a calendar that displays a user's activity streaks, one month at a time, matching the provided design as closely as you can.

Data

The data must be dynamic and must come from the provided API endpoint — load it at runtime, don't bundle or hardcode it:

https://hallow.com/interview/activity.json

Fetching the data is part of the exercise. Start in src/Calendar.tsx; the shape of each day is described by ActivityDay in src/types.ts.

The endpoint returns an array of days:

{
  "date": "2026-07-08",
  "is_today": true,
  "has_session": true,
  "streak": 1
}

Field	Type	Meaning
date	string (YYYY-MM-DD)	The calendar day.
is_today	boolean	True for exactly one day — the day the API calls "today".
has_session	boolean	Whether the user had a session that day.
streak	0 | 1 | 2 | null	This day's role in a streak (see below).

The streak value tells you how to draw the day:

• null — not part of a streak
• 0 — start of a streak
• 1 — middle of a streak
• 2 — end of a streak

A single-day streak stands on its own (its start and end are the same day).

Requirements

• Display one month at a time, with the month label shown above the grid.
• Include navigation to advance to and retreat from other months.
• A single-day streak is rendered as a circle. Multi-day streaks use connected components so consecutive days read as one continuous run.
• Whatever day the API registers as "today" should be purple — a small dot if it has no streak, a large circle if it is part of a streak.
• Aim for near pixel-perfect accuracy against the design.

Design

The mockup is committed to this repo at public/frontend_template.png — with the dev server running you can also open it at http://localhost:5173/frontend_template.png.

Reference colors (also defined as CSS variables in src/Calendar.css):

• streak green — #14cc80
• today purple — #6b18d8
• empty dot — #d6d3de

What's in the box

public/
  frontend_template.png   # the design you're matching
src/
  types.ts      # ActivityDay type describing the endpoint's shape
  App.tsx       # renders <Calendar/>
  Calendar.tsx  # <-- your work goes here (currently a stub)
  Calendar.css  # a few starter tokens
  main.tsx      # app entry

Good luck — we're excited to see what you build!