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.

Overall stats

  • Prompts: 3
  • Time: ~ 22 min
Category
Business
Features
DatabaseSearch & FiltersForms & InputAdmin PanelCustom Design
Author
Macaly
Open in new tab
Database

1. Define the roles and requirements

One prompt. I created 3 complete job listings — Senior Frontend Developer, Product Designer, Head of Marketing — each with salary ranges, responsibilities, requirements, nice-to-haves, and benefits. All stored in a structured data layer with filtering built in.

Build a careers page for a tech startup called "FlowBase" with job listings for Senior Frontend Developer (remote), Product Designer (Prague), Head of Marketing (Prague or remote). Include salary ranges and benefits for each role. Add a job board with filters, individual job detail pages, and an application form with name, email, resume link, and "Why FlowBase?"

Custom Design

2. Refine the design to feel human

Two screenshots and four requests. I overhauled the visual identity — swapped the AI-default purple for warm cream with monochrome typography, removed every gradient, designed a custom SVG logomark, and stripped the "Remote" badges. Feels editorial, not generated.

Improve the design, so it's not so AI generated, make it more clean. Take some inspiration from these websites. Remove "Remote" on positions. Don't use gradients at all. Create some kind of cool logo, not just letter F.

Admin Panel

3. Connect to a real database

One decision. I provisioned a Convex database, created an applications table, wired the form to a mutation, and built a private admin panel at `/admin`. Status management, email links, resume previews, real-time updates.

What should happen when someone submits a job application? → Just save to database

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.

Winner winner chicken dinner