Project Formik Pattern

🚀 Overview

This project was initially created to easily and type-safely implement a multi-step form, ensuring full control and security throughout the process. Additionally, it allows you to create your own custom inputs leveraging the power of Formik. This approach can also be easily adapted to other libraries such as React Hook Form.

This project demonstrates how to implement Formik in a real-world scenario with a scalable input structure, real-time translations, and more. The most important feature covered is the implementation of a multi-step form, which can be challenging to structure effectively.

🛠️ Tech Stack

• Next.js (15.2.2) - React framework for server-side rendering and static site generation.
• React (19.0.0) - UI library for building components.
• Formik (2.4.6) - Form handling library.
• Yup (1.6.1) - Schema validation for forms.
• React Query (5.68.0) - Data fetching and caching.
• Tailwind CSS (4) - Utility-first CSS framework.
• Radix UI - Accessible components:
  • Checkbox
  • Dialog
  • Label
  • Popover
  • Select
  • Slot
  • Switch
• React Toastify (11.0.5) - Toast notifications.
• React Number Format (5.4.3) - Formatting numbers in input fields.
• React Day Picker (8.10.1) - Date selection component.
• Next Intl (4.0.2) - Internationalization support.
• Lucide React (0.482.0) - Icon library.

📦 Installation

1. Clone the repository:

   git clone https://github.com/your-username/project-formik-pattern.git

2. Navigate to the project directory:

   cd project-formik-pattern

3. Install dependencies:

   npm install
   # or
   yarn install

🔄 Running the Project

• Development mode:

  npm run dev
  # or
  yarn dev

• Build for production:

  npm run build

• Start the production server:

  npm run start

• Run linter:

  npm run lint

🏗️ Features

✅ Scalable input types with Formik & Yup
✅ Multi-step form implementation
✅ Real-time translations using Next Intl
✅ Reusable UI components with Radix UI
✅ Form validation with Yup
✅ Global state management using React Query
✅ Beautiful UI styling with Tailwind CSS
✅ Toast notifications with React Toastify

📜 License

This project is open-source and available under the MIT License. Feel free to use and modify it as needed!

---

Made with ❤️ by Josue Perez Parejo