Meta Careers Form Challenge

Project Overview

This project implements a modern Sign Up form using Next.js, React, and various cutting-edge libraries. It showcases form validation techniques, reusable UI components, and focuses on the behavior of a Sign Up form, demonstrating best practices in modern web development.

Tech Stack

Core Technologies:

• Next.js (v15.0.0-rc.0)
• React (v19.0.0-rc-06d0b89e-20240801)
• React DOM (v19.0.0-rc-06d0b89e-20240801)
• TypeScript (v5)

Form Handling and Validation:

• React Hook Form (v7.53.0)
• Zod (v3.23.8)
• @hookform/resolvers (v3.9.0)

UI and Styling:

• Tailwind CSS (v3.4.1)
• Shadcn/ui (v0.0.4)
• Lucide React (v0.451.0)
• Framer Motion (v11.11.8)
• Radix UI components:
  • @radix-ui/react-icons (v1.3.0)
  • @radix-ui/react-label (v2.1.0)
  • @radix-ui/react-select (v2.1.2)
  • @radix-ui/react-slot (v1.1.0)
  • @radix-ui/react-toast (v1.2.2)
• class-variance-authority (v0.7.0)
• clsx (v2.1.1)
• tailwind-merge (v2.5.3)
• tailwindcss-animate (v1.0.7)

Utilities:

• libphonenumber-js (v1.11.11)

Development Tools:

• ESLint (v8)
• Prettier (v3.3.3)

Testing:

• Vitest (v2.1.2)
• Playwright (v1.48.0)

Project Features

This project demonstrates:

1. Sign-up form implementation inspired by Meta's careers page
2. Form validation using Zod schemas
3. Responsive design with Tailwind CSS
4. Reusable UI components from shadcn/ui
5. Error handling and user feedback
6. Unit testing with Vitest
7. End-to-end testing with Playwright

Getting Started

Prerequisites:

Ensure you have Node.js and pnpm installed on your system. Use the versions specified in the package.json file.

Running the Project

To run the project locally:

1. Install dependencies:

   pnpm install
   

2. Start the development server:

   pnpm dev
   

3. Open your browser and navigate to http://localhost:3000.

For production:

1. Build the project:

   pnpm build
   

2. Start the production server:

   pnpm start
   

Running Tests

To run unit tests:

pnpm test