React TimePlanner is a React.js application built to demonstrate how to handle complex form validations for time-based inputs in a real-world scenario. This app enables barbers (or similar professionals) to configure their weekly working schedule including shop hours, working periods, and break times—on a day-by-day basis.
This project focuses on solving real-life scheduling problems using React Hook Form and Yup, making it ideal for developers looking to learn advanced form validation techniques in React.
Users can input:
- Shop Open/Close times
- Working Start/End times
- Break Start/End times
All input is validated with custom logic and schema validation, and the resulting schedule is displayed in the console for review.
-✅ Daily Schedule Configuration: Define shop, working, and break hours for each day of the week.
-
✅ Advanced Validation with Yup: Custom validation rules ensure time sequences are logical (e.g., working hours fall within shop hours, breaks within working hours).
-
✅ Real-Time Data Logging: Submitted schedule data is printed to the browser console for further use.
-
✅ Clean & Responsive UI: Built using Material UI v5 and Tailwind CSS for a modern and responsive design.
-
✅ Phone Number Validation: International phone input with validation via
google-libphonenumber.
- React.js – Core UI framework
- Material UI v5 – UI component library
- Tailwind CSS – Utility-first CSS framework
- React Hook Form – Powerful and performant form handling
- Yup – Schema validation for complex rules
- google-libphonenumber – International phone number validation
- react-international-phone – Stylish and functional phone input component
- Node.js ≥ 20.9.0
Follow these steps to clone and run the project locally:
-
Clone the repository:
git clone https://github.com/kapoor08/react-time-planner.git
-
Navigate to the project directory:
cd react-time-planner -
Install the dependencies:
npm install
-
Start the development server:
npm run dev
-
Open your browser and go to:
http://localhost:3000
- Schedule management for barbers, freelancers, or service professionals
- A template for validating complex nested forms with time ranges
- Learning resource for developers using React Hook Form with Yup
React TimePlanner serves as a practical guide to managing and validating complex time-based inputs in a React application. It integrates modern libraries and best practices, providing a clean UI and robust logic suitable for real-world use.