Absolutely — here are 2 separate Builder.io prompts for you to copy-paste and get things rolling!
✅ Prompt 1: Build Login + Signup UI Page in Builder.io
Create a modern, responsive authentication page with two tabs:
- First tab: "Login"
- Fields: Email input, Password input
- A blue "Submit" button
- A link: "Forgot Password?"
- Second tab: "Sign Up"
- Fields: Name input, Email input, Password input, Confirm Password input
- A green "Submit" button
- A link: "Already have an account? Login here"
- Use soft rounded corners, shadows, and a light color background
- Center the form vertically and horizontally
- Add spacing and padding between form fields
- Make the form mobile responsive
✅ Prompt 2: Add Form Action to Authenticate with PostgreSQL
For the Login form:
- On Submit: Make an HTTP POST request to "http://localhost:3000/login"
- Send form fields "email" and "password" as JSON payload
For the Sign Up form:
- On Submit: Make an HTTP POST request to "http://localhost:3000/signup"
- Send form fields "name", "email", and "password" as JSON payload
Display success message on successful response
Display error message if login fails
✅ Bonus: Add Success & Error Messages Prompt
Add dynamic text below the Submit button to show:
- "Login successful!" in green if API response is success
- "Invalid email or password" in red if API response is error
These prompts will guide Builder.io AI to:
-
✅ Build the Login/Signup UI
-
✅ Wire up API requests to your Node.js + PostgreSQL backend
-
✅ Show feedback messages to users
👇
No comments:
Post a Comment