This video tells you how to create a bug free app with just one single prompt!
This video also solves:
Vibe coding,Cursor AI,
Prompt engineering,
make app using ai,
no code app,
build prototype with just one app,
make apps using one single prompt,
bug free prompt,
detailed prompt to build bug free app
Here's the prompt:
I want a full-stack quiz web app. Build a backend with Node.js, Express, and MySQL using mysql2 or promise. The server should:
Load environment variables via dot env with DB_HOST, DB_USER, DB_PASSWORD, DB_NAME, defaulting to localhost/quizgame when absent.
Create a questions table if it doesn’t exist: columns for id, question_text, four options, the correct answer (either numeric index or letter A-D), plus optional category, difficulty, timestamp.
Provide helper logic that normalises rows into id, prompt, options[4], category, difficulty, correctOption regardless of whether the DB column is prompt or question_text, correct_option or correct_answer.
Expose routes: GET /api/health, GET /api/questions returning 10 random normalised questions, and POST /api/score that accepts answers: questionId, selectedIndex, compares to DB answers, and returns score, total, breakdown.
Include a seed routine with 10 questions of varied topics and difficulties that runs on startup only when the table has 10 rows.
Use an .env.example that documents the DB variables less than.
Front-end requirements (React + Vite + TypeScript):
Global styling with a gradient background, centered quiz card, animated progress bar, and polished button/hover states (similar to a modern quiz UI).
App.tsx should fetch GET /api/questions on mount, show a loading spinner, then render question metadata (category, difficulty), the prompt text, and the four answer options as buttons with active states and disabled logic after submission.
Track current question index, selected option, accumulated answers, submission state, and final score. After the last question, POST answers to /api/score, show a celebration screen with total score, percentage, and a breakdown list (correct / incorrect) plus 'Play Again' to restart.
Ensure TypeScript interfaces for questions, answers, score payload; handle fetch errors gracefully.
Provide npm scripts (dev, build, lint) and default Vite setup with React 19 + SWC plugin.
Deliverables:
Backend folder with all source files, package.json, instructions (README) covering .env variables, seeding behavior, and startup commands.
Frontend folder with Vite project, CSS or TSX implementing the described UI, and instructions for running npm run dev.
Tell me how to run both servers, including any environment steps.
Return the full codebase contents and setup instructions.
Информация по комментариям в разработке