https://www.nxcode.io/_next/static/chunks/2217.5b1fd3d3af9688fa.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2217],{2217:e=>{e.exports=JSON.parse('{"meta":{"title":"Build Your First App | Nxcode Tutorial","description":"Step-by-step tutorial to build a production-ready task manager with Nxcode. Learn Conductor + Virtuoso workflow, Docker execution, and one-click deployment."},"hero":{"title":"Build Your First App with Nxcode","subtitle":"Create a production-ready task manager in 15 minutes","level":"Beginner","time":"15 minutes"},"sidebar":{"tutorials":"Tutorials","links":{"gettingStarted":"Getting Started","webApps":"Web Applications","mobileApps":"Mobile Applications","creatorEconomy":"Creator Economy"},"youWillLearn":{"title":"You\'ll Learn","items":["Conductor + Virtuoso workflow","Writing effective prompts","Real Docker execution","One-click deployment","Publishing to marketplace"]}},"intro":{"welcome":"In this hands-on tutorial, you\'ll build a complete task management app from scratch. Unlike other AI tools that just generate code, you\'ll see your app actually build, test, and deploy in real Docker containers.","whatWeBuild":{"title":"What We\'ll Build","description":"A production-ready task manager with user authentication, CRUD operations, categories, priorities, and a dashboard - all deployed to the global edge network."}},"prerequisites":{"title":"Prerequisites","items":["Nxcode account (Lite $5/mo or Pro $20/mo)","A basic idea of what you want to build","No coding experience required"]},"steps":{"step1":{"title":"Step 1: Start a New Project","content":["Log in to studio.nxcode.io","Click \\"New Project\\" on your dashboard","Give your project a name: \\"Task Manager\\"","You\'ll enter the Studio where Conductor awaits your instructions"]},"step2":{"title":"Step 2: Describe Your App to Conductor","description":"Conductor is your AI product manager. Describe what you want in natural language:","examplePrompt":"Build a task management app with:\\n- User signup/login with email\\n- Create, edit, delete tasks\\n- Task priorities (high, medium, low)\\n- Categories with custom colors\\n- Dashboard showing task stats\\n- Clean, modern design with dark mode","tips":{"title":"Tips for Better Results","items":["Be specific about features you need","Mention design preferences","Don\'t worry about technical details - Conductor handles that"]}},"step3":{"title":"Step 3: Review Conductor\'s Plan","description":"Conductor analyzes your request and creates a detailed plan:","planExample":{"title":"Task Manager - Execution Plan","tasks":["Set up Next.js project with TypeScript","Implement user authentication with JWT","Create task CRUD API endpoints","Build category management system","Design responsive dashboard UI","Add dark mode toggle","Configure Cloudflare deployment"],"acceptanceCriteria":"Each task has specific acceptance criteria that must pass before moving on."},"clarification":{"conductor":"I\'ll build your task manager. A few questions:\\n\\n1. Should tasks have due dates with reminders?\\n2. Do you want subtasks/checklists?\\n3. Any third-party integrations (calendar, etc.)?","user":"Yes to due dates with reminders. Skip subtasks for now. No integrations needed.","response":"Perfect! I\'ve created 8 tasks with clear acceptance criteria. Virtuoso will now execute these in Docker. Let\'s start!"}},"step4":{"title":"Step 4: Watch Virtuoso Build in Docker","description":"This is where Nxcode differs from other tools. Virtuoso doesn\'t just generate code - it runs it in real Docker containers:","executionSteps":[{"name":"Container Setup","description":"Isolated Docker environment provisioned"},{"name":"Code Generation","description":"Virtuoso writes the code for each task"},{"name":"npm install","description":"Dependencies actually installed"},{"name":"npm build","description":"TypeScript compiles, bundle created"},{"name":"npm test","description":"Tests actually run and must pass"},{"name":"Auto-Fix","description":"If errors occur, Virtuoso fixes them (up to 3x)"}],"progressExample":{"completed":["Project setup","Authentication system","Task API"],"inProgress":"Dashboard UI (75%)","pen

1ding":["Dark mode","Deployment"]},"note":"Unlike browser sandbox tools, this is REAL execution. Build errors are caught and fixed automatically."},"step5":{"title":"Step 5: Review Your Running App","description":"As tasks complete, you can see your app running live:","features":[{"title":"Live Preview","description":"Your app runs in real-time - test features as they\'re built"},{"title":"Code Explorer","description":"Browse clean, well-structured code - it\'s yours to keep"},{"title":"Request Changes","description":"Chat with Conductor anytime to modify features"},{"title":"Acceptance Verification","description":"Each task verified before proceeding"}]},"step6":{"title":"Step 6: One-Click Deploy","description":"When all tasks pass, deploy to the world:","deploySteps":["Click the \\"Deploy\\" button","App builds for production","Deploys to Cloudflare\'s global edge","You get a public URL with HTTPS"],"result":{"title":"Your App is Live!","features":["Global CDN - fast everywhere","Automatic SSL certificate","Custom domain support","Zero server management"]}},"step7":{"title":"Step 7: Publish to Creator Economy (Optional)","description":"Turn your app into a business:","steps":[{"title":"Publish","description":"List on Nxcode marketplace"},{"title":"Set Pricing","description":"Free, subscription, or one-time"},{"title":"Earn","description":"Keep 70% of all revenue"}],"note":"Imagine: users pay $5/month for your task manager. With 100 users, you earn $350/month passively."}},"conclusion":{"title":"What You\'ve Learned","items":["How Conductor plans and Virtuoso executes","Real Docker execution vs browser sandboxes","Acceptance criteria-driven development","One-click global deployment","Creator Economy monetization"],"differentiator":"Your app wasn\'t just \\"generated\\" - it was built, tested, and verified in a real execution environment. That\'s the Nxcode difference."},"nextSteps":{"title":"Next Steps","items":[{"title":"Build a Web App","description":"Create a more complex SaaS application","link":"/tutorials/web-applications"}

1,{"title":"Core Concepts","description":"Deep dive into how Nxcode works","link":"/docs/core-concepts"},{"title":"Creator Economy","description":"Learn to monetize your apps","link":"/docs/creator-economy"}]},"cta":{"title":"Ready to Build?","description":"Start building your production-ready app now.","buttons":{"start":"Start Building","tutorials":"More Tutorials"}}}')}}]);