This web application allows users to register and select insurance options. It is divided into several pages, each with specific functionality and validation rules.
Live Demo: View Live Demo
To begin using this Vendors List application, follow these simple steps:
-
Clone the repository:
git clone https://github.com/samanabasi/car-insurance.git cd car-insurance
-
Install the dependencies:
yarn
-
Start the development server:
yarn start
The project structure is organized as follows: car-insurance/
├── src/
│ ├── assets/ # Contains assets and icons
│ ├── components/ # Reusable components
│ ├── context/ # Utility functions and constants
│ ├── hooks/ # Reusable hooks such as useAuth
│ ├── pages/ # pages
│ ├── utils/ # Utility functions and constants
│ ├── App.tsx # Main application component
│ ├── index.tsx # Entry point
│ └── ... # Other files and folders
├── public/: # Includes public assets and static files.
├── package.json and package-lock.json: Define project dependencies and versions.
└── README.md # You're currently reading it! This README provides detailed information about the project's structure, features, and usage.
This Car Insurance application leverages various technologies and libraries to deliver a powerful and responsive user experience. Here's a list of the key technologies used:
- React.js: A JavaScript library for building user interfaces.
- React Hook Form: A package that makes form validation easy by aligning with the existing HTML standard for form validation.
- TypeScript: A typed superset of JavaScript that enhances code quality and maintainability.
- React Loading Skeleton: A library for displaying skeleton loading UI.
- React Modal: Accessible modal dialog component for React.JS.
- Create React App: A boilerplate for setting up a React application.
- SASS: A preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets.
This Car Insurance application comes packed with features that make it a powerful tool for managing and visualizing data. Here's a glimpse of some of the key features:
- Users can register with the following details:
- First Name
- Last Name
- Mobile Number
- Password
- Validation rules for user registration:
- All fields are mandatory.
- Mobile numbers must be in the correct format.
- First and last names should only contain Persian (Farsi) characters.
- Passwords must be complex (at least one number, one uppercase Latin character, one lowercase Latin character, and 4 to 10 characters in length).
- Error messages are displayed for each validation error.
- Mock user registration is available, displaying the user's first name and last name in the Navbar upon successful registration.
- Users can select insurance options, including:
- Third-Party Insurance
- Comprehensive Insurance
- Selections are visually represented, and users can easily switch between options.
- Using the
getVehicleTypes
API, the application fetches various car types from the server. - Users can choose their car type and model from the available options.
- The "Back" button is always active, allowing users to return to the previous page.
- The "Next Step" button becomes active when users select options correctly, taking them to the next page.
- Using the
getInsureCompanies
API, the application retrieves a list of insurance companies. - Users can select their preferred insurance company from the list of options.
- Using the
getThirdDiscounts
API, the application fetches third-party insurance discounts and driver accident discounts. - Users can select applicable discounts.
- By clicking the "Check Summary" button, a modal displays a summary of the entered information from the first page.
For the proper functioning of this application, you'll need to set up the following APIs or server endpoints:
getVehicleTypes: An API to fetch car types from the server. getInsureCompanies: An API to retrieve a list of insurance companies. getThirdDiscounts: An API to fetch third-party insurance discounts and driver accident discounts.
Contributions are welcome! If you have any suggestions, bug reports, or feature requests, please open an issue or submit a pull request.
This project is licensed under the MIT License. Feel free to use and modify the code according to your needs.