Fix It

Uber-style platform for finding local German handwerkers (Elektriker, Maler, Klempner, Gärtner, Fliesenleger). Customers describe a problem, see available local trades with availability and price indication, and book directly.

Status: pre-launch. Landing page only. Backend and booking flow to follow.

---

Tech stack

• Next.js 16 with App Router
• TypeScript (strict)
• Tailwind CSS v4 with CSS-variable theme tokens (@theme in app/globals.css)
• next/font for Bricolage Grotesque (display) + Manrope (body)
• No external UI library — all components are local in components/
• Playwright for screenshot tooling (dev-only, see screenshot.mjs)

Running locally

Prerequisites: Node.js 20+ and npm.

git clone https://github.com/arikissel/fix-it.git
cd fix-it
npm install
npm run dev

Open http://localhost:3000.

Project structure

app/
  layout.tsx         # Root layout, fonts, German metadata, lang="de"
  page.tsx           # Landing page composition
  globals.css        # Tailwind v4 + @theme tokens, grain/blueprint textures
components/
  Header.tsx         # Sticky nav with brand CTA
  Hero.tsx           # Headline, CTAs, search
  SearchBar.tsx      # PLZ + Gewerk dropdown ("use client")
  HowItWorks.tsx     # 3-step process
  Services.tsx       # 5 trades x 5 standard services with pricing
  WarumFixIt.tsx     # 4 feature cards (dark section)
  FuerBetriebe.tsx   # Split layout + tilted dashboard mock
  Footer.tsx         # Links + socials
  Icons.tsx          # Inline SVG icon set
  Logo.tsx           # Wordmark
screenshot.mjs       # `node screenshot.mjs <url> <label> <viewport>` → temporary screenshots/

Screenshots (dev workflow)

node screenshot.mjs http://localhost:3000 my-label desktop
node screenshot.mjs http://localhost:3000 my-label mobile

Outputs land in temporary screenshots/ (gitignored).

---

How we work together

This is a two-person project. The rules below are an honor-system version of what GitHub Pro would enforce automatically (we're on free, so we can't enable branch protection on a private repo). The whole point is to never break main, because main deploys to production.

Golden rules

1. Never git push directly to main. Every change goes through a Pull Request.
2. One person reviews before merge. Even tiny PRs. A 30-second look catches a lot.
3. Squash-merge PRs. Keeps main history clean (one commit per feature).
4. Branches are short-lived. Hours to days, not weeks. Long branches diverge and conflict.
5. .env*.local and secrets never get committed. Already gitignored — don't fight it. Put real env vars in Vercel's dashboard.

Daily flow

git checkout main
git pull                                  # get latest
git checkout -b feat/short-description    # start your branch
# …edit files…
git add .
git commit -m "Add PLZ validation"
git push -u origin feat/short-description # send to GitHub

Then on github.com:

1. Click "Compare & pull request" (it appears automatically after you push)
2. Write a sentence or two about what you changed
3. Request a review from the other person
4. Wait for the Vercel bot to comment with a preview URL — that's the live deployed branch
5. Reviewer clicks the URL, looks at the change, leaves Approve or comments
6. Author clicks Squash and merge
7. Branch auto-deletes (we'll enable that)
8. main redeploys to production within ~60 seconds

Branch naming

Prefix	Use	Example
feat/	New feature or section	feat/booking-modal
fix/	Bug fix	fix/header-overflow
chore/	Deps, config, refactoring	chore/upgrade-next
docs/	Docs/README only	docs/setup-instructions

Issues

Use GitHub Issues as the to-do list. Before starting work:

1. Make sure there's an issue describing what you're doing
2. Assign yourself
3. In your PR description, write Closes #<number> so the issue auto-closes on merge

When you'll step on each other (and how to avoid it)

• Same file, same time: post in chat before starting work on a section. The codebase is small enough that "I'm taking Hero today" is enough coordination.
• If a merge conflict happens: don't panic. Pull main, run git merge main on your branch, fix the conflicted spots, commit, push. Or ask the other person on call.
• If main is broken: revert the bad PR immediately (GitHub has a one-click revert button on every merged PR). Don't try to fix forward in production.

When to break a rule

• Solo emergency fix at 2am: push directly to main if Vercel is down or production is on fire. Tell the other person what you did when they wake up.
• Tiny doc-only change: still PR it. It's 90 seconds.

---

Deployment (Vercel)

Production deploys from main automatically on push. PR branches get their own preview URLs automatically. See DEPLOY.md for the one-time setup.

---

Roadmap (current focus)

• Landing page
• Connect to GitHub → Vercel (in progress)
• Customer signup + auth
• Handwerker (firm) signup + profile
• Booking flow (problem description → matched firm → confirmation)
• KI-Analyse of uploaded photos (price/effort estimate)
• Real listings with availability
• Payment / invoicing