Rolearch
Verified jobs from company career pages worldwide, with your match shown before you apply.
Jobs are real: the Python worker in worker/ pulls them from 104 companies' own careers boards (Greenhouse, Lever, Ashby, Workable, SmartRecruiters, Recruitee) into src/data/feed*.json, and Apply goes straight to the job on the company's site. Run the worker, then rebuild. Accounts and Supabase plug in next; db/schema.sql has the tables. Without a feed file the site falls back to sample jobs (src/data/sample-jobs.ts).
Run it
npm install
npm run dev # http://localhost:3000
npm run build && npm start # production build
Requires Node 20+. Next.js 16.4 with Cache Components; read node_modules/next/dist/docs/ before changing framework-level code (see AGENTS.md).
What's where
| Path | What it is |
|---|
src/app/page.tsx | Landing page: hero search, map, fresh jobs, how it works, companies |
src/app/jobs/page.tsx + components/jobs-explorer.tsx | Search with filters; state lives in the URL so searches can be shared |
src/app/jobs/[id]/page.tsx | Job detail: match check, free learning links, JobPosting structured data |
src/app/signup, src/app/signin | Account screens (validation only; nothing is sent) |
src/data/ | Sample jobs, sample profile, free learning resources |
src/lib/match.ts | Match %: verified skill = 1, listed = ½, missing = 0, experience counts as one |
src/i18n/ | All copy and locale settings |
Design
Direction Atlas: calm, global, restrained. Tagline: One network, endless opportunity. Bricolage Grotesque for display, Geist for body. Colors are defined once in src/app/globals.css and match the logo kit: ink #0E1F2F and the amber signal #E0A35B (graphics only, 2.0:1 on paper; signal-ink #8F5B12 is the text-safe amber), plus paper, surface, muted and line.
Logo files live in public/brand/ (from the Rolearch logo kit; logo.svg and logo-reversed.svg are cropped to the artwork). Favicon, SVG icon and Apple touch icon are in src/app/; PWA icons in public/.
Motion uses React's built-in <ViewTransition>, so there is no animation library:
- the hero rises in once and the map's pins land west to east (the page's one orchestrated moment)
- result rows glide to their new order as you type or filter
- a job's title morphs from its row into the detail page; forward and back links slide in their direction
prefers-reduced-motion removes movement everywhere and the typed search hints never start
Adding a language
- Copy
src/i18n/messages/en.ts to e.g. de.ts and translate the values.
- Add it to
messages in src/i18n/index.ts and to locales in src/i18n/config.ts.
Dates, salaries and currencies format through Intl for the active locale. The layout uses logical properties (ps-, me-, start-), so right-to-left languages (ar, he, fa, ur) get dir="rtl" automatically.
Quality bar
Checked against The $10K Checklist: committed point of view, chosen type pairing (no Inter/Roboto), a 5-color system, clear hierarchy, purposeful imagery (the meridian map, drawn in code), restrained motion, a phone layout designed separately (stacked rows, swipeable filter chips, no horizontal scroll at 375px), and the invisible work: all pages prerendered, WCAG AA contrast, skip link and visible focus, semantic HTML, real metadata, Open Graph image, sitemap, robots and manifest.
