Hello,
Starting today, I’ve been experiencing problems when building any new apps using Google AI Studio Build. No matter what I do, it keeps trying to fix errors, then creates new ones, then tries to fix those, and so on in a loop.
Interestingly, if I download the project, run npm install followed by npm run dev, and open it locally in the browser, it works perfectly fine.
Here’s a screenshot of the errors:
And here is the prompt I used:
You are a senior React engineer. Build a production-quality single-page application for a modern link shortener called "mysite.com", hosted at https://mysite.com. The app must be visually striking and meet 2025 design standards, featuring glass-blur aesthetics, smooth and pleasant animations, and high-quality dark and light modes.
Tech Stack and Project Setup
- Use React with Vite.
- Use TypeScript.
- Styling: Tailwind CSS + a small number of CSS variables for theme tokens. Add Framer Motion for micro-animations and transitions. Must support both dark and light mode and default to the system theme.
- State management: lightweight global state using Zustand or React Context (your choice).
- Routing: React Router, but keep it single page for now (route "/" only). Terms and Privacy open as modals, not routes.
Brand and Domain
- Site name: MYSITE.COM (all caps in the UI).
- Primary domain: https://mysite.com. When embedding the shortened URL into a QR code, use http:// to save characters.
Layout and Pages
One-page layout with the following sections:
1. Header with the mysite.com logo/wordmark.
2. Hero card containing the link shortener form.
3. A minimal "About us" section describing the service in a few sentences.
4. Footer with:
- "Powered by MyCompany" text.
- A small MyCompany logo linking to https://mycompany.com/
- Three links: "Terms of Use", "Privacy Policy", "Report Abuse" - all opening modals.
Visual and UX Requirements
- Glassmorphism cards: translucent backgrounds, blur, soft shadows, rounded-2xl corners, subtle borders.
- Smooth, fast animations on focus, hover, opening/closing modals, and showing results.
- Fully responsive (mobile first) with comfortable spacing and max-width containers.
- Dark and light modes: respect prefers-color-scheme, provide a toggle, persist user choice in localStorage.
Link Shortener Form (Hero Section)
Fields:
- "Original link" input with real-time validation:
- Show success/error states live as the user types.
- Implement robust URL validation: first try new URL(value); if it throws, fall back to a conservative regex. Provide a quick-check regex as well.
- Optional "Custom alias" input (slug) with real-time availability check:
- Allowed alias pattern: ^[a-z0-9-]{3,30}$
- Debounce typing by 300ms.
- Mock availability with a local async function that returns “taken” or “free” from a hardcoded set like ["go", "start", "link", "demo"] and random results for others.
Consent text below the form:
Exact text: "By shortening the link, you confirm that you have read and accepted the Terms of Use and Privacy Policy of this service."
- "Terms of Use" and "Privacy Policy" are clickable and open their respective modals.
Submit behavior:
- For now, do not call any backend. Instead, mock a successful server response:
{
"success": true,
"link": "http://mysite.com/<aliasOrHash>"
}
- On success, display:
- The shortened URL with a Copy button.
- A client-side generated PNG QR code for the short URL.
- Important: encode the QR with http:// instead of https:// to save characters, but display the link as https://.
- Buttons: "Download QR" and "Share" (via Web Share API where available, fallback to copy).
- On failure, show a tasteful inline error alert.
QR Code Generation
- Use a lightweight client-side library (e.g., qrcode or qrcode.react).
- Render to a <canvas>, then export to PNG for download.
- Provide clear code for generating and downloading the PNG.
Modals and Legal Content
Footer links open modals with scrollable content:
- "Terms of Use"
- "Privacy Policy"
- Both texts must be constants in a local constants/legal.ts file. Do not fetch from server. For now, fill with Lorem Ipsum placeholders using a realistic structure (headings, paragraphs, lists).
"Report Abuse" modal (Abuse Report Form):
- Place this text above the form:
"If you believe that a shortened link violates the service's terms of use, please submit a report. Our moderators will review it within 24 hours and, if misuse is confirmed, take appropriate action. Unfortunately, we cannot inform you of the outcome."
- Fields:
- "Enter link:" - regex validation requiring it to start with "https://mysite.com/" or "http://mysite.com/"
Pattern example: ^https?://mysite\.com/.+$
- "Describe the problem (optional):" - textarea, max 500 characters, show remaining count.
- Submit button: "Send Report".
- On submit, mock a success response and display a confirmation state.
Accessibility and Forms
- Use semantic HTML, appropriate aria attributes for modals and buttons, focus trapping in modals, and close on ESC key.
- Real-time validation with clear, concise inline messages. Disable submit while invalid or during async checks.
Interactions and Polish
- Copy-to-clipboard buttons with toast feedback.
- Animate cards on entry, subtle hover/focus elevation, and confetti-style micro-animation on successful shorten.
- Show skeleton/loading states during async checks and mock requests.
- Keep dependencies minimal and modern.
Deliverables
A complete Vite React TypeScript project, ready to run, including:
- Tailwind configured.
- No backend calls - only mocks.
