Customer Management System - Copy this React, Tailwind Component to your project
Tech Stack: React, Node.js, Express.js, and MongoDB / SQLite / PostgreSQL Objective: You must demonstrate proficiency in the full stack by implementing a comprehensive customer management system. This system should include meticulous form validation, efficient CRUD operations, and effective database management strategies. Web CRUD Operations Assignments Create a New Customer: Design a responsive form to capture customer details: first name, last name, phone number (integers only), email address (valid format), and physical address. Implement client side validation to ensure: All text fields contain only alphabetical characters. The phone number consists of 10 digits. The email address follows a standard email format. On successful validation, submit the data to the server, display a success message, and redirect to the customer dashboard. Read Existing Customer Details: Retrieve customer details using their unique ID. Display all relevant information in a structured format on the customer's profile page. Update Customer Information: Allow modifications to the customer's contact details and addresses. Validate new input data on the client side before submission. Confirm the successful update with a notification. Delete Customer Record: Provide a search functionality to locate a customer by various attributes (e.g., name, phone number). Confirm deletion with the user before removing the customer record from the database. Ensure all linked data (e.g., addresses) is also appropriately handled. Manage Multiple Addresses: Allow the customer to add, remove, or update multiple addresses. Validate each address for correctness and completeness. Provide options to mark an address as the primary contact point. Additional Requirements: Search and Filters: Implement filters to search for customers by name, city, state, or pin code. Clear filters to reset search results and view all records. Page Navigation and Responsiveness: Use pagination to manage the display of customer records. Ensure the application is responsive and works seamlessly across different devices and screen sizes. Error Handling & Logging: Develop an error handling framework to capture and log errors across the application. Display user friendly error messages to inform users of issues and guide them on the next steps.
