1Form

an art form

Navigate any form with confidence. Step-by-step walkthroughs, common mistake alerts, and community wisdom — all in one place.

Live at 1form.io

What is 1Form?

Filling out forms shouldn't be stressful. Whether it's a visa application, a tax document, or a driver's license renewal, 1Form provides:

• Step-by-step walkthroughs — field-by-field guidance with clear explanations
• Common mistake alerts — learn from others' errors before you make them
• Real examples — see what correct entries look like
• Community discussion — ask questions and share tips via GitHub Discussions

Forms Available

Form	Category	Difficulty
DS-160 (US Visa Application)	Immigration	Hard
W-4 (Employee's Withholding Certificate)	Tax	Medium
I-9 (Employment Eligibility Verification)	Employment	Medium
MA Driver's License Application	Government	Easy
Adventure Sports Consent & Waiver	Legal	Easy

Tech Stack

• Next.js 16 (App Router)
• TypeScript
• Tailwind CSS v4
• Framer Motion for animations
• Giscus for GitHub Discussions-backed comments
• Lucide for icons

Getting Started

# Clone the repo
git clone https://github.com/MisterAwesome23/1Form.git
cd 1Form

# Install dependencies
npm install

# Start the dev server
npm run dev

Open http://localhost:3000 in your browser.

Project Structure

src/
  app/                    # Next.js App Router pages
    forms/
      [slug]/             # Dynamic form detail pages
        walkthrough/      # Interactive walkthrough experience
  components/
    catalog/              # Form catalog with search & filters
    community/            # Giscus comments integration
    landing/              # Homepage sections
    layout/               # Header, Footer, ThemeProvider
    shared/               # Reusable components (FadeIn, etc.)
    walkthrough/          # Walkthrough shell & step renderer
  data/
    forms/                # Form walkthrough data (TypeScript)
  hooks/                  # Custom React hooks
  lib/                    # Utilities & constants
  types/                  # TypeScript type definitions

Adding a New Form

1. Create a new data file at src/data/forms/your-form.ts
2. Export a formMeta object (type FormMeta) and a formWalkthrough object (type FormWalkthrough)
3. Register the form in src/lib/forms.ts by adding it to the FORM_REGISTRY
4. Run npm run build to verify static generation

See src/data/forms/w-4.ts for a reference implementation.

Contributing

Contributions are welcome! The easiest way to contribute is by adding walkthroughs for new forms.

1. Fork the repo
2. Create a branch (git checkout -b add-form-xyz)
3. Add your form data file in src/data/forms/
4. Register it in src/lib/forms.ts
5. Test with npm run build
6. Open a PR

Deployment

This project is designed to deploy on Vercel:

1. Push to GitHub
2. Import the repo on vercel.com/new
3. Vercel auto-detects Next.js — just click Deploy
4. Add your custom domain (1form.io) in Project Settings > Domains

License

MIT License. See LICENSE for details.