React Working Hours

This project, react-working-hours, is a React.js application that showcases complex form validations, specifically designed for scheduling weekly working hours for a barber. The app allows users to input various time-related fields such as Shop Open/Close Times, Working Start/End Times, and Break Start/End Times.

Project Overview

The main purpose of this project is to demonstrate how to handle complex form validations using popular libraries like Yup and React Hook Form. You can prepare the schedule on a day-by-day basis and view the generated data in the browser's console. Any errors during the process are effectively handled and displayed using Yup.

Features

Day-by-Day Scheduling: Input shop open/close times, working start/end times, and break start/end times for each day of the week.
Validation with Yup: Ensures all time fields are correctly filled, with custom error messages for invalid inputs.
Real-Time Data Handling: View the processed schedule data in the browser console.
User-Friendly Interface: Built using Material UI v5 for a smooth and intuitive user experience.

Technologies Used

React.js: The foundation of the application, providing a component-based architecture.
Material UI v5: Used for building responsive and accessible UI components.
Yup: A JavaScript schema builder for value parsing and validation.
React Hook Form: Simplifies form handling in React by reducing boilerplate code.
Tailwind CSS: Utility-first CSS framework for styling the application efficiently.
google-libphonenumber: Provides a library for parsing, formatting, and validating international phone numbers.
react-international-phone: A React component for inputting and validating international phone numbers, integrated with google-libphonenumber.

Node.js Version

This project requires Node.js version 20.9.0+.

Getting Started

Follow these steps to clone and run the project locally:

Clone the repository:

git clone https://github.com/himanshu077/react-working-hours.git

Navigate to the project directory:
```
cd react-working-hours
```
Install the dependencies:
```
npm install
```
Start the development server:
```
npm run dev
```
Open your browser and go to:
```
http://localhost:3000
```
This will open the application where you can interact with the scheduling interface.

Conclusion

This project is an excellent example of how to manage complex form validations in a React application, utilizing the power of libraries like Yup, React Hook Form, and Material UI. It provides a practical use case with scheduling weekly working hours for a barber, offering valuable insights into handling and validating user inputs.