Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/hng 82 develop waitlist form to add user #225

Conversation

toonami2907
Copy link
Collaborator

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:
Screenshot_20-7-2024_115925_localhost

@toonami2907 toonami2907 self-assigned this Jul 20, 2024
@toonami2907 toonami2907 reopened this Jul 20, 2024
@toonami2907 toonami2907 requested review from Samadeen and kiisi July 21, 2024 09:28
@toonami2907 toonami2907 force-pushed the feat/HNG-82-develop-waitlist-form-to-add-user branch from 935d17f to 31abb27 Compare July 21, 2024 09:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant