[{"data":1,"prerenderedAt":65},["ShallowReactive",2],{"tutorials-build-a-mock-api-for-user-centric-apps":3},{"id":4,"title":5,"body":6,"canonical":13,"card":14,"component":18,"createdAt":19,"description":20,"difficulty":21,"extension":22,"faq":23,"featured":39,"indexStory":40,"intent":48,"keywords":49,"meta":57,"metaTitle":58,"navigation":59,"pageType":15,"path":17,"sections":21,"seo":60,"slug":61,"status":62,"stem":63,"timeToComplete":21,"updatedAt":19,"__hash__":64},"tutorials/tutorials/build-a-mock-api-for-user-centric-apps.md","Build a Mock API for User-Centric Apps",{"type":7,"value":8,"toc":9},"minimark",[],{"title":10,"searchDepth":11,"depth":11,"links":12},"",2,[],"https://getapibutler.com/tutorials/build-a-mock-api-for-user-centric-apps",{"tag":15,"headline":5,"summary":16,"href":17},"Tutorial","Design realistic datasets, publish REST endpoints, and generate a working SaaS dashboard with Cursor or Claude Code.","/tutorials/build-a-mock-api-for-user-centric-apps","BuildMockApiUserCentric","2026-06-08","Step-by-step tutorial: design realistic user, project, and task datasets, turn them into REST APIs with API Butler, and generate a working app with Cursor or Claude Code.",null,"md",[24,27,30,33,36],{"question":25,"answer":26},"Why not use JSONPlaceholder for mock APIs?","JSONPlaceholder returns generic, unrelated data. API Butler lets you define project-specific schemas—users, projects, tasks, and notifications that match your actual app domain.",{"question":28,"answer":29},"How many CSV files do I need?","Upload one CSV per resource. For a user-centric SaaS app, start with users, profiles, projects, tasks, and notifications—five focused datasets that mirror real product relationships.",{"question":31,"answer":32},"Can I use this tutorial with Cursor or Claude Code?","Yes. The tutorial includes copy-paste prompts for both tools. Upload your CSVs to API Butler, paste the endpoints into the prompt, and generate a dashboard with typed fetch hooks and realistic data.",{"question":34,"answer":35},"Do I need a backend or database?","No. API Butler hosts the REST endpoints. You upload CSV files and get live GET endpoints in minutes—no server, database, or infrastructure setup.",{"question":37,"answer":38},"What frameworks work with the generated APIs?","Any framework that can call REST endpoints—React, Vue, Next.js, Nuxt, or AI-generated apps from Cursor and Claude Code. The tutorial includes React and Vue fetch examples.",false,{"eyebrow":41,"title":42,"description":43,"readMoreLabel":44,"flowLabel":45,"requestLine":46,"responseLine":47},"Flagship tutorial","From CSV datasets to a working user-centric app","Learn how to model users, projects, tasks, and notifications as APIs—then wire them into AI-generated frontends.","Start the tutorial","Tutorial path","GET /v1/apis/users?filter[role]=admin","{ \"data\": [{ \"id\": 1, \"name\": \"Alex Chen\", \"role\": \"admin\" }], \"meta\": { \"total\": 24 } }","Educational",[50,51,52,53,54,55,56],"build mock api","mock api tutorial","realistic mock api","user management api","api for frontend development","api for ai apps","mock api from csv",{},"Build a Mock API for User-Centric Apps | API Butler Tutorial",true,{"title":5,"description":20},"build-a-mock-api-for-user-centric-apps","published","tutorials/build-a-mock-api-for-user-centric-apps","s7955FT3Raa5u1yLnb0gN00LY1kKRDHHGozw2N7pCOE",1782745366440]