Feat/hng 82 develop waitlist form to add user #225
Closed
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description:
This PR adds a waitlist form component to our Remix application. The form collects user information such as name, email address, and phone number, adhering to the provided design specifications. The component includes form validation and is styled using Tailwind CSS to ensure a responsive and user-friendly experience.
Changes Included:
Form Component:
Created WaitlistForm.tsx in the app/components directory.
The form includes fields for name, email, and phone number.
Implemented form validation to ensure required fields are filled out and the email is in a valid format.
Integrated with the backend API endpoint to add users to the waitlist (replace 'YOUR_BACKEND_API_ENDPOINT' with the actual endpoint).
Styling:
Styled the form using Tailwind CSS to match the provided design specifications.
Ensured the form is responsive and maintains a clean UI across different devices.
Form Integration:
Integrated the WaitlistForm component into the main application in app/routes/index.tsx.
Action Handling:
Included action handling for form submission in Remix, with feedback messages for success and error cases.
How to Test:
Setup:
Ensure Tailwind CSS is properly configured in your Remix project.
Replace 'YOUR_BACKEND_API_ENDPOINT' in WaitlistForm.tsx with the actual backend API endpoint.
Run the Application:
Start the Remix development server.
Navigate to the main page where the waitlist form is displayed.
Form Validation:
Test the form by submitting without filling in required fields and check for validation messages.
Test the form by entering an invalid email and check for validation messages.
Test the form by entering valid information and ensure it submits successfully, showing a success message.
Screenshot: