Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application serves as a User Management System, allowing users to create, view, update, and delete user records through a clean and intuitive interface. It utilizes webhooks for data handling with n8n, implementing a fully functional CRUD operation for user management.

## CORE FEATURES
- **Create User**: A form to input user details (name, email, status). The ID is auto-generated and unique.
- **View Users**: A list displaying all registered users, each with options to delete or edit.
- **Search User**: Allows users to search for a specific user by ID and displays all corresponding data.
- **Update User**: A form similar to the create function, pre-filled with the user's current information for modification based on the provided ID.
- **Delete User**: Search for a user by ID to delete the specific record from the database.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds.
- **Layout**: A tabbed interface with five sections: Create, View, Search, Update, and Delete. Each tab contains relevant forms or lists to facilitate user management.
- **Typography**: Utilize a sans-serif font for clarity and modernity, maintaining a clear hierarchy with headings and body text.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for responsive and modern design
- **UI Components**: shadcn/ui for pre-built UI components to expedite development
- **State Management**: Use React Context or Redux if necessary for managing global state.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install necessary dependencies (e.g., React Router, Tailwind CSS).
2. **Create Tab Navigation**: Implement a tab navigation system to switch between Create, View, Search, Update, and Delete sections.
3. **Develop Create User Form**: Build a form to gather user details and implement the POST webhook for adding new users.
4. **Implement View Users Section**: Create a list component that fetches all users using the GET webhook and displays them with delete/edit buttons.
5. **Create Search Functionality**: Set up a search input to retrieve user details based on ID using the GET webhook.
6. **Build Update User Form**: Implement a form similar to the Create User section, pre-filled with data fetched using the provided ID, and connect it to the PUT webhook.
7. **Develop Delete Functionality**: Implement the delete feature that allows users to remove a record using the DELETE webhook based on user ID.
8. **Test All Functionalities**: Ensure that all CRUD operations work correctly and debug any issues that arise.

## USER EXPERIENCE
Users will interact with a streamlined interface that emphasizes ease of navigation through the five tabs. Each tab will provide clear instructions and feedback, ensuring users can manage records efficiently. The design will prioritize accessibility and responsiveness, adapting seamlessly to various screen sizes for optimal usability.