This project is a ReactJS-based application designed for a Home Insurance product. It features a dynamic quote summary page that allows users to personalize their insurance coverage by adding or removing optional extras. The core functionality revolves around a user-friendly interface that enables users to interact with the quote in real-time, providing immediate feedback on pricing and selections.
-
QuoteSummary Component: Designed to provide users with a personalized greeting and a summary of their base insurance quote, including reference and coverage start date.
-
PriceDisplay Component: Implemented to dynamically display the price of the insurance quote, updating in real-time as users select or deselect extras. Includes the functionality to toggle between monthly and annual payment options.
-
AddonItem Component: Each addon is represented by an
AddonItemcomponent, allowing users to add or remove extras from their quote. The component visually indicates whether an extra is selected and contributes to the overall price calculation.
-
Local State Hooks: Utilized
useStatefor managing the state within components, ensuring that the UI is consistent with the user's interactions. -
Event Handling: Adopted a straightforward approach to event handling for user actions, such as selecting extras and toggling between payment frequencies.
-
API Service: Created an
apiServiceto interact with the provided RESTful API, handling asynchronous requests for fetching quote data and available addons. -
Error Handling: Incorporated error handling to manage any issues during API interaction, ensuring the application's robustness.
-
CSS Modules: Leveraged CSS Modules for component-specific styling, allowing for a clean separation of concerns and avoiding style conflicts.
-
Media Queries: Implemented responsive design using media queries, ensuring the application's layout and functionality are maintained across different device sizes.
-
Incremental Development: Followed an incremental development approach, focusing on one component at a time to ensure each meets its intended functionality before moving on to the next.
-
Code Modularity: Emphasized creating reusable components and utility functions to keep the code DRY (Don't Repeat Yourself) and enhance readability and maintainability.
-
Manual Testing: Conducted thorough manual testing to verify that each acceptance criterion was met and that the user experience was seamless.
-
Responsive Testing: Tested the application across multiple devices and viewport sizes to ensure compatibility and usability.
-
UI Alignment: Encountered challenges in ensuring consistent alignment of elements across components, which was resolved through careful CSS flexbox adjustments and setting common height values.
-
State Synchronization: Ensured that the state across components was synchronized, particularly when reflecting selected extras and the total price.
-
Accessibility: Plan to improve accessibility by adding ARIA attributes and ensuring keyboard navigation is fully supported.
-
State Management: Explore integrating a more robust state management solution, such as Redux or Context API, to handle the state more efficiently as the application scales.
-
Unit Testing: Implement unit tests with Jest and React Testing Library to cover critical functions and component renders.
To get the application up and running on your local machine:
npm installnpm run json-serverOpen a new terminal window and run the following command:
npm startTo get the details of the quote and addons, you'll need to run the JSON server by executing the following command: This will generate the mocked data and host the API on port 3001.
To get the details of the quote, please use the following endpoint:
Likewise, to get all available addons, please use:
Full documentation for JSON Server is supplied here: JSON Server GitHub.
## Contributions & Feedback 👐
Feel free to contribute, open issues, and provide feedback to improve the application.