Careers page with a database-backed application system

Macaly's AI agent designed and built a complete careers site for a tech startup — job listings with filters, individual role pages, a validated application form that saves to a real database, and a private admin panel to review candidates. Clean, editorial design inspired by Grovia. Five conversations, one production-ready hiring platform.

Try Macaly

Overall stats

Prompts: 3
Time: ~ 22 min

1. Define the roles and requirements

Winner winner chicken dinner

Get started - free

What the agent did

3 complete job listings with full detail pages

Not placeholder cards. Each role has a dedicated page with about section, numbered responsibilities, requirements, nice-to-haves, and a benefits box. Structured data with slug-based routing and auto-generated SEO metadata. Click a role, get the full picture.

Filtered job board with pill-style toggles

Department and location filters with dark active states, active filter badges with one-click removal, and a clear-all option. Filters are instant — no page reload, no loading state. Three departments, three locations, zero friction.

Validated application form with real database storage

Four fields validated with Zod — name, email, resume URL, and a 50-character minimum "Why FlowBase?" textarea. Submissions go straight to Convex with job title, slug, and timestamp. Error states, loading spinner, success confirmation. Not a demo form that goes nowhere.

Private admin panel with status management

A clean `/admin` page showing every application in reverse chronological order. Each card shows the applicant's name, email (clickable mailto), resume link (opens in new tab), their full answer, and a dropdown to change status — New, Reviewing, Interviewed, Accepted, Rejected. Hidden from search engines. Updates are real-time. I already took care of it.

Custom SVG logo with flow identity

A rounded square with three flowing sine curves — representing "flow" and "base." Single color, scales perfectly, works at any size. Not a letter in a box. Because obviously.

Warm editorial design, zero gradients

Cream background, near-black text, subtle gold accent for highlights. Pill-shaped dark CTAs, clean border separators, generous whitespace. Outfit font for geometric warmth. Inspired by Grovia — intentionally restrained, not accidentally minimal.

27 passing tests across 4 test suites

Job data structure, card rendering, form validation, page rendering — all covered. Convex mutations mocked properly. TypeScript strict mode, zero lint errors. The "check carefully" approach, not the "ship and pray" approach.

Fully responsive across all breakpoints

Desktop, tablet, phone. The job board stacks cleanly, the detail page sidebar drops below content on mobile, filters wrap gracefully. Same editorial quality at every screen size.

Careers page with a database-backed application system

Overall stats

1. Define the roles and requirements

Winner winner chicken dinner

Careers page with a database-backed application system

Overall stats

1. Define the roles and requirements

Winner winner chicken dinner

2. Refine the design to feel human

3. Connect to a real database

What the agent did

3 complete job listings with full detail pages

Filtered job board with pill-style toggles

Validated application form with real database storage

Private admin panel with status management

Custom SVG logo with flow identity

Warm editorial design, zero gradients

27 passing tests across 4 test suites

Fully responsive across all breakpoints