[{"id":"246b5022-1944-44b6-a0fb-d4851451dc38","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Fullstack React Project","styles":{}}],"children":[]},{"id":"a339c1be-b93a-4754-b20c-07ae1074fba9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Fullstack React Project","styles":{"bold":true}},{"type":"text","text":" is a practice project for building a complete web application using React, backend API, authentication, and database.","styles":{}}],"children":[]},{"id":"d9657674-ae46-44d3-8618-c6033bed3c47","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"In simple words:","styles":{}}],"children":[]},{"id":"468c4ab6-86e2-4177-9e5e-b1d5fd85ed96","type":"procode","props":{"code":"Fullstack React Project = React frontend + backend API + database\n","language":"txt","filename":"","files":"[{\"id\":\"779jlmsxb\",\"name\":\"code\",\"code\":\"Fullstack React Project = React frontend + backend API + database\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"eb094860-a8f0-4e0c-90fc-8adfd1864ffa","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"A fullstack React project usually has frontend pages, backend routes, database tables, authentication, CRUD features, and deployment setup.","styles":{}}],"children":[]},{"id":"ee004d7f-7880-4b9f-92b9-5b83b51480b6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"b372ada9-61e0-4690-92c0-7d844f5716b1","type":"procode","props":{"code":"Fullstack React Project\n├── React frontend\n├── Backend API\n├── Database\n├── Authentication\n├── Protected dashboard\n├── CRUD feature\n├── Form validation\n├── API integration\n└── Deployment\n","language":"txt","filename":"","files":"[{\"id\":\"tf9f7j1k0\",\"name\":\"code\",\"code\":\"Fullstack React Project\\n├── React frontend\\n├── Backend API\\n├── Database\\n├── Authentication\\n├── Protected dashboard\\n├── CRUD feature\\n├── Form validation\\n├── API integration\\n└── Deployment\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"21d8dbaa-b422-4f09-8653-b8024e5eee83","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This project is good for practicing real application architecture, frontend-backend connection, REST API, authentication, database relationships, and production deployment.","styles":{}}],"children":[]},{"id":"45012d0f-842e-4ea3-93ad-088a591d17fa","type":"divider","props":{},"children":[]},{"id":"0584075e-1368-4c04-962a-f210c1d054f1","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Simple Explanation","styles":{}}],"children":[]},{"id":"5919a4f3-e384-40ee-9d44-449666db5e4f","type":"procode","props":{"code":"Fullstack React Project\n├── Uses React for frontend\n├── Uses React Router for pages\n├── Uses backend API for server logic\n├── Uses database for storing data\n├── Uses authentication for user access\n├── Uses protected routes\n├── Uses CRUD operations\n├── Uses API service files\n├── Uses validation\n└── Helps practice real-world app structure\n","language":"txt","filename":"","files":"[{\"id\":\"ydpyv9cf4\",\"name\":\"code\",\"code\":\"Fullstack React Project\\n├── Uses React for frontend\\n├── Uses React Router for pages\\n├── Uses backend API for server logic\\n├── Uses database for storing data\\n├── Uses authentication for user access\\n├── Uses protected routes\\n├── Uses CRUD operations\\n├── Uses API service files\\n├── Uses validation\\n└── Helps practice real-world app structure\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"15508e88-4db0-4bc6-b2fe-038507f77b51","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"05a5fa33-36e0-4796-b8aa-811bcf071a78","type":"procode","props":{"code":"React frontend\n└── Shows UI and sends requests\n\nBackend API\n└── Handles logic and talks to database\n\nDatabase\n└── Stores users and app data\n","language":"txt","filename":"","files":"[{\"id\":\"soby3vqbx\",\"name\":\"code\",\"code\":\"React frontend\\n└── Shows UI and sends requests\\n\\nBackend API\\n└── Handles logic and talks to database\\n\\nDatabase\\n└── Stores users and app data\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"cf8cb456-f05d-4d46-82e9-43132ec38b09","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example flow:","styles":{}}],"children":[]},{"id":"23e8b93f-7c23-44fb-81e7-924574736a14","type":"procode","props":{"code":"User creates product\n├── React sends POST request\n├── Backend validates request\n├── Backend saves to database\n└── React updates UI\n","language":"txt","filename":"","files":"[{\"id\":\"ipxrz0kam\",\"name\":\"code\",\"code\":\"User creates product\\n├── React sends POST request\\n├── Backend validates request\\n├── Backend saves to database\\n└── React updates UI\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d71fc5f9-0957-4b45-adbd-b5a02f109331","type":"divider","props":{},"children":[]},{"id":"6e28e8a7-8bb7-4e74-9113-c4c6f23aeeb2","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Project Goal","styles":{}}],"children":[]},{"id":"e439ca00-9b1e-43fa-b9ea-0e2092a315a3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The goal of this project is to build a complete fullstack CRUD dashboard with authentication.","styles":{}}],"children":[]},{"id":"78497bed-7b6a-4378-a19f-d8f41ec58ee1","type":"procode","props":{"code":"Project Goal\n├── Practice React project structure\n├── Practice React Router pages\n├── Practice login and register\n├── Practice protected routes\n├── Practice REST API integration\n├── Practice backend route structure\n├── Practice database schema\n├── Practice CRUD operations\n├── Practice form validation\n├── Practice loading and error states\n└── Practice deployment structure\n","language":"txt","filename":"","files":"[{\"id\":\"mdgyemixw\",\"name\":\"code\",\"code\":\"Project Goal\\n├── Practice React project structure\\n├── Practice React Router pages\\n├── Practice login and register\\n├── Practice protected routes\\n├── Practice REST API integration\\n├── Practice backend route structure\\n├── Practice database schema\\n├── Practice CRUD operations\\n├── Practice form validation\\n├── Practice loading and error states\\n└── Practice deployment structure\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9e008542-cd90-499d-b33d-93c07742ee27","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This project is useful before building a real SaaS dashboard, admin panel, ERP system, or e-commerce admin project.","styles":{}}],"children":[]},{"id":"72e56de6-c269-4532-9b6e-6337aaedc690","type":"divider","props":{},"children":[]},{"id":"306cd7c3-403d-4bb6-bea7-fc23d0669a6a","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"What You Will Build","styles":{}}],"children":[]},{"id":"ddd1d983-3bca-4037-8b1d-38b59770e703","type":"procode","props":{"code":"Fullstack App Pages\n├── Home Page\n│ └── Simple landing page\n│\n├── Login Page\n│ └── User login form\n│\n├── Register Page\n│ └── User registration form\n│\n├── Dashboard Page\n│ └── Protected dashboard overview\n│\n├── Products Page\n│ └── List, search, and manage products\n│\n├── Create Product Page\n│ └── Form to create product\n│\n├── Edit Product Page\n│ └── Form to update product\n│\n└── Not Found Page\n └── 404 page\n","language":"txt","filename":"","files":"[{\"id\":\"hotpcbt7e\",\"name\":\"code\",\"code\":\"Fullstack App Pages\\n├── Home Page\\n│ └── Simple landing page\\n│\\n├── Login Page\\n│ └── User login form\\n│\\n├── Register Page\\n│ └── User registration form\\n│\\n├── Dashboard Page\\n│ └── Protected dashboard overview\\n│\\n├── Products Page\\n│ └── List, search, and manage products\\n│\\n├── Create Product Page\\n│ └── Form to create product\\n│\\n├── Edit Product Page\\n│ └── Form to update product\\n│\\n└── Not Found Page\\n └── 404 page\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ad488cdb-54aa-4002-9684-0e61b1d277f6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Main features:","styles":{}}],"children":[]},{"id":"702bea1b-36b9-4510-b9a3-c6c58f38772c","type":"procode","props":{"code":"Fullstack Features\n├── Register\n├── Login\n├── Logout\n├── Protected routes\n├── Product list\n├── Product detail\n├── Create product\n├── Edit product\n├── Delete product\n├── Search products\n├── Pagination\n├── Loading state\n├── Error state\n└── Deployment\n","language":"txt","filename":"","files":"[{\"id\":\"vmm4xzx7q\",\"name\":\"code\",\"code\":\"Fullstack Features\\n├── Register\\n├── Login\\n├── Logout\\n├── Protected routes\\n├── Product list\\n├── Product detail\\n├── Create product\\n├── Edit product\\n├── Delete product\\n├── Search products\\n├── Pagination\\n├── Loading state\\n├── Error state\\n└── Deployment\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"57bdf1e6-a054-4b14-8910-5840ee32ae0e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple app flow:","styles":{}}],"children":[]},{"id":"4f86b1a3-336a-4b61-8916-87754d7c81a0","type":"procode","props":{"code":"Login\n ↓\nDashboard\n ↓\nManage Products\n ↓\nCreate / Edit / Delete Data\n","language":"txt","filename":"","files":"[{\"id\":\"58uv3uaur\",\"name\":\"code\",\"code\":\"Login\\n ↓\\nDashboard\\n ↓\\nManage Products\\n ↓\\nCreate / Edit / Delete Data\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1298bd3a-96ca-44dc-ae4b-c4332dd8decd","type":"divider","props":{},"children":[]},{"id":"f029a048-d485-4e28-9e50-569405a99217","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Final Project Structure","styles":{}}],"children":[]},{"id":"1801a42c-53dd-49da-8deb-48ac3757720d","type":"procode","props":{"code":"fullstack-react-project/\n├── frontend/\n│ ├── src/\n│ │ ├── components/\n│ │ │ ├── layout/\n│ │ │ │ ├── app-layout.tsx\n│ │ │ │ ├── navbar.tsx\n│ │ │ │ └── sidebar.tsx\n│ │ │ │\n│ │ │ └── ui/\n│ │ │ ├── button.tsx\n│ │ │ ├── input.tsx\n│ │ │ └── loading.tsx\n│ │ │\n│ │ ├── features/\n│ │ │ ├── auth/\n│ │ │ │ ├── pages/\n│ │ │ │ │ ├── login-page.tsx\n│ │ │ │ │ └── register-page.tsx\n│ │ │ │ ├── services/\n│ │ │ │ │ └── auth-api.ts\n│ │ │ │ └── types/\n│ │ │ │ └── auth.ts\n│ │ │ │\n│ │ │ └── products/\n│ │ │ ├── components/\n│ │ │ │ ├── product-form.tsx\n│ │ │ │ └── product-table.tsx\n│ │ │ ├── pages/\n│ │ │ │ ├── products-page.tsx\n│ │ │ │ ├── create-product-page.tsx\n│ │ │ │ └── edit-product-page.tsx\n│ │ │ ├── services/\n│ │ │ │ └── product-api.ts\n│ │ │ └── types/\n│ │ │ └── product.ts\n│ │ │\n│ │ ├── lib/\n│ │ │ └── api-client.ts\n│ │ │\n│ │ ├── routes/\n│ │ │ ├── app-routes.tsx\n│ │ │ └── protected-route.tsx\n│ │ │\n│ │ ├── App.tsx\n│ │ └── main.tsx\n│ │\n│ ├── package.json\n│ ├── vite.config.ts\n│ └── .env\n│\n├── backend/\n│ ├── prisma/\n│ │ └── schema.prisma\n│ │\n│ ├── src/\n│ │ ├── controllers/\n│ │ │ ├── auth-controller.ts\n│ │ │ └── product-controller.ts\n│ │ │\n│ │ ├── middleware/\n│ │ │ ├── auth-middleware.ts\n│ │ │ └── error-middleware.ts\n│ │ │\n│ │ ├── routes/\n│ │ │ ├── auth-route.ts\n│ │ │ └── product-route.ts\n│ │ │\n│ │ ├── services/\n│ │ │ ├── auth-service.ts\n│ │ │ └── product-service.ts\n│ │ │\n│ │ ├── utils/\n│ │ │ ├── prisma.ts\n│ │ │ └── jwt.ts\n│ │ │\n│ │ ├── validators/\n│ │ │ ├── auth-validator.ts\n│ │ │ └── product-validator.ts\n│ │ │\n│ │ ├── app.ts\n│ │ └── server.ts\n│ │\n│ ├── package.json\n│ └── .env\n│\n└── README.md\n","language":"txt","filename":"","files":"[{\"id\":\"8lbaixjnm\",\"name\":\"code\",\"code\":\"fullstack-react-project/\\n├── frontend/\\n│ ├── src/\\n│ │ ├── components/\\n│ │ │ ├── layout/\\n│ │ │ │ ├── app-layout.tsx\\n│ │ │ │ ├── navbar.tsx\\n│ │ │ │ └── sidebar.tsx\\n│ │ │ │\\n│ │ │ └── ui/\\n│ │ │ ├── button.tsx\\n│ │ │ ├── input.tsx\\n│ │ │ └── loading.tsx\\n│ │ │\\n│ │ ├── features/\\n│ │ │ ├── auth/\\n│ │ │ │ ├── pages/\\n│ │ │ │ │ ├── login-page.tsx\\n│ │ │ │ │ └── register-page.tsx\\n│ │ │ │ ├── services/\\n│ │ │ │ │ └── auth-api.ts\\n│ │ │ │ └── types/\\n│ │ │ │ └── auth.ts\\n│ │ │ │\\n│ │ │ └── products/\\n│ │ │ ├── components/\\n│ │ │ │ ├── product-form.tsx\\n│ │ │ │ └── product-table.tsx\\n│ │ │ ├── pages/\\n│ │ │ │ ├── products-page.tsx\\n│ │ │ │ ├── create-product-page.tsx\\n│ │ │ │ └── edit-product-page.tsx\\n│ │ │ ├── services/\\n│ │ │ │ └── product-api.ts\\n│ │ │ └── types/\\n│ │ │ └── product.ts\\n│ │ │\\n│ │ ├── lib/\\n│ │ │ └── api-client.ts\\n│ │ │\\n│ │ ├── routes/\\n│ │ │ ├── app-routes.tsx\\n│ │ │ └── protected-route.tsx\\n│ │ │\\n│ │ ├── App.tsx\\n│ │ └── main.tsx\\n│ │\\n│ ├── package.json\\n│ ├── vite.config.ts\\n│ └── .env\\n│\\n├── backend/\\n│ ├── prisma/\\n│ │ └── schema.prisma\\n│ │\\n│ ├── src/\\n│ │ ├── controllers/\\n│ │ │ ├── auth-controller.ts\\n│ │ │ └── product-controller.ts\\n│ │ │\\n│ │ ├── middleware/\\n│ │ │ ├── auth-middleware.ts\\n│ │ │ └── error-middleware.ts\\n│ │ │\\n│ │ ├── routes/\\n│ │ │ ├── auth-route.ts\\n│ │ │ └── product-route.ts\\n│ │ │\\n│ │ ├── services/\\n│ │ │ ├── auth-service.ts\\n│ │ │ └── product-service.ts\\n│ │ │\\n│ │ ├── utils/\\n│ │ │ ├── prisma.ts\\n│ │ │ └── jwt.ts\\n│ │ │\\n│ │ ├── validators/\\n│ │ │ ├── auth-validator.ts\\n│ │ │ └── product-validator.ts\\n│ │ │\\n│ │ ├── app.ts\\n│ │ └── server.ts\\n│ │\\n│ ├── package.json\\n│ └── .env\\n│\\n└── README.md\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"227cbc2a-37c4-4302-92a4-000f0387215b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Important files:","styles":{}}],"children":[]},{"id":"d5cdbc69-850b-4494-aac9-228e7b0fb3c5","type":"procode","props":{"code":"frontend/src/routes/app-routes.tsx\n└── React Router route setup\n\nfrontend/src/routes/protected-route.tsx\n└── Protects private pages\n\nfrontend/src/lib/api-client.ts\n└── Base fetch configuration\n\nfrontend/src/features/auth\n└── Login and register feature\n\nfrontend/src/features/products\n└── Product CRUD feature\n\nbackend/src/app.ts\n└── Express app setup\n\nbackend/src/server.ts\n└── Starts backend server\n\nbackend/prisma/schema.prisma\n└── Database schema\n\nbackend/src/routes\n└── API endpoint definitions\n\nbackend/src/controllers\n└── Request and response handlers\n\nbackend/src/services\n└── Business logic\n","language":"txt","filename":"","files":"[{\"id\":\"mjxwqcf1w\",\"name\":\"code\",\"code\":\"frontend/src/routes/app-routes.tsx\\n└── React Router route setup\\n\\nfrontend/src/routes/protected-route.tsx\\n└── Protects private pages\\n\\nfrontend/src/lib/api-client.ts\\n└── Base fetch configuration\\n\\nfrontend/src/features/auth\\n└── Login and register feature\\n\\nfrontend/src/features/products\\n└── Product CRUD feature\\n\\nbackend/src/app.ts\\n└── Express app setup\\n\\nbackend/src/server.ts\\n└── Starts backend server\\n\\nbackend/prisma/schema.prisma\\n└── Database schema\\n\\nbackend/src/routes\\n└── API endpoint definitions\\n\\nbackend/src/controllers\\n└── Request and response handlers\\n\\nbackend/src/services\\n└── Business logic\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8bca8d06-d968-4532-9a58-d7b493f0888c","type":"divider","props":{},"children":[]},{"id":"63bc1962-983d-4792-b43f-59ce9efdb78d","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Create Project Folder","styles":{}}],"children":[]},{"id":"7850d91a-9a16-43d3-8f80-13359d4419e2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Create main folder:","styles":{}}],"children":[]},{"id":"0677f3dd-2a86-4235-a663-78155dfe1c96","type":"procode","props":{"code":"mkdir fullstack-react-project\ncd fullstack-react-project\n","language":"bash","filename":"","files":"[{\"id\":\"vbpjphar2\",\"name\":\"code\",\"code\":\"mkdir fullstack-react-project\\ncd fullstack-react-project\\n\",\"language\":\"bash\"}]","width":"100%","height":"auto"},"children":[]},{"id":"07744d7b-c878-428f-bd10-557af3154742","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Create frontend and backend folders:","styles":{}}],"children":[]},{"id":"872ffa28-8718-4a1d-8dff-9ac3b32e6193","type":"procode","props":{"code":"mkdir frontend backend\n","language":"bash","filename":"","files":"[{\"id\":\"bj480sbjk\",\"name\":\"code\",\"code\":\"mkdir frontend backend\\n\",\"language\":\"bash\"}]","width":"100%","height":"auto"},"children":[]},{"id":"288b3166-e877-4c83-b0ab-76bb85ae2a33","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"9c4f3fde-ee03-4a92-8665-284c92ebbfa3","type":"procode","props":{"code":"Project root\n├── frontend\n└── backend\n","language":"txt","filename":"","files":"[{\"id\":\"xsx1h2ogi\",\"name\":\"code\",\"code\":\"Project root\\n├── frontend\\n└── backend\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"11d556c7-e9fb-45fb-afcf-3f83e6963b9f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Keep frontend and backend separated so the project is easier to maintain.","styles":{}}],"children":[]},{"id":"bbea550c-d6cf-48dd-a119-41a9f90188bf","type":"divider","props":{},"children":[]},{"id":"858a9186-6833-4943-8171-6e15cd77465f","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Create React Frontend","styles":{}}],"children":[]},{"id":"c7d191ac-e307-41ac-baad-43957751ff5c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Enter frontend folder:","styles":{}}],"children":[]},{"id":"2814a525-92c5-498d-9d37-e92b41f02098","type":"procode","props":{"code":"cd frontend\n","language":"bash","filename":"","files":"[{\"id\":\"gjnkv7xe2\",\"name\":\"code\",\"code\":\"cd frontend\\n\",\"language\":\"bash\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b5d28419-8eee-4dad-ac57-71c203d42b77","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Create React project with Vite:","styles":{}}],"children":[]},{"id":"d35f2614-54ef-4ca2-8171-fbdeb5846b74","type":"procode","props":{"code":"pnpm create vite . --template react-ts\n","language":"bash","filename":"","files":"[{\"id\":\"uax8j3r5q\",\"name\":\"code\",\"code\":\"pnpm create vite . --template react-ts\\n\",\"language\":\"bash\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2a2642dd-9370-48fd-9e21-02b744b7b74d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Install dependencies:","styles":{}}],"children":[]},{"id":"f285c81e-b66e-4f75-8dc0-e327d545f856","type":"procode","props":{"code":"pnpm install\npnpm add react-router-dom\n","language":"bash","filename":"","files":"[{\"id\":\"ome9jhsgn\",\"name\":\"code\",\"code\":\"pnpm install\\npnpm add react-router-dom\\n\",\"language\":\"bash\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a645cba4-b75d-407d-a30d-1c477d08d922","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Run frontend:","styles":{}}],"children":[]},{"id":"b8ca434b-2f09-4b04-8524-64036bd638fc","type":"procode","props":{"code":"pnpm dev\n","language":"bash","filename":"","files":"[{\"id\":\"xvvtx2f2i\",\"name\":\"code\",\"code\":\"pnpm dev\\n\",\"language\":\"bash\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d6612893-0fad-4917-8893-ec9dfa602308","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Open:","styles":{}}],"children":[]},{"id":"2de870e9-754c-427d-b644-5ac5f15994af","type":"procode","props":{"code":"http://localhost:5173\n","language":"txt","filename":"","files":"[{\"id\":\"ivez9vv2g\",\"name\":\"code\",\"code\":\"http://localhost:5173\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3322cb91-c48a-4b9b-800c-978c150c1d83","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"ac1cf29e-5182-4e55-b6dc-bdfcf13d4995","type":"procode","props":{"code":"React frontend\n├── Handles UI\n├── Handles pages\n├── Handles forms\n├── Calls backend API\n└── Displays data\n","language":"txt","filename":"","files":"[{\"id\":\"xb2cfccz2\",\"name\":\"code\",\"code\":\"React frontend\\n├── Handles UI\\n├── Handles pages\\n├── Handles forms\\n├── Calls backend API\\n└── Displays data\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"92e98312-66df-41f8-976e-cd2b9fe8be52","type":"divider","props":{},"children":[]},{"id":"e49dacdc-b0fe-4b42-853c-261d73013ec0","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 3: Create Backend Project","styles":{}}],"children":[]},{"id":"dac5b6e1-bba3-4ff0-a296-82e3dbdb74eb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Enter backend folder:","styles":{}}],"children":[]},{"id":"323f2182-a217-41e1-bf11-e220b1b4e1c3","type":"procode","props":{"code":"cd ../backend\n","language":"bash","filename":"","files":"[{\"id\":\"lw9ed9ajl\",\"name\":\"code\",\"code\":\"cd ../backend\\n\",\"language\":\"bash\"}]","width":"100%","height":"auto"},"children":[]},{"id":"29b34d5f-79a1-44a2-a399-648a39fe65a5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Initialize package:","styles":{}}],"children":[]},{"id":"e8c420f5-9822-43fc-bc0d-d8f0d5ebd763","type":"procode","props":{"code":"pnpm init\n","language":"bash","filename":"","files":"[{\"id\":\"zr7o6z8we\",\"name\":\"code\",\"code\":\"pnpm init\\n\",\"language\":\"bash\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d71e3d31-04fa-4ff8-b6be-e43a3057ce5d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Install backend dependencies:","styles":{}}],"children":[]},{"id":"e5d39914-6285-410c-bb9d-1c0a27191100","type":"procode","props":{"code":"pnpm add express cors dotenv bcrypt jsonwebtoken zod @prisma/client\n","language":"bash","filename":"","files":"[{\"id\":\"r13njf72x\",\"name\":\"code\",\"code\":\"pnpm add express cors dotenv bcrypt jsonwebtoken zod @prisma/client\\n\",\"language\":\"bash\"}]","width":"100%","height":"auto"},"children":[]},{"id":"325a347e-a4d3-473b-9175-0e6ba9f30b72","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Install development dependencies:","styles":{}}],"children":[]},{"id":"6cad7a9a-2a3c-48d8-85cb-5e17d552d900","type":"procode","props":{"code":"pnpm add -D typescript tsx prisma @types/express @types/cors @types/bcrypt @types/jsonwebtoken\n","language":"bash","filename":"","files":"[{\"id\":\"61u9qpndf\",\"name\":\"code\",\"code\":\"pnpm add -D typescript tsx prisma @types/express @types/cors @types/bcrypt @types/jsonwebtoken\\n\",\"language\":\"bash\"}]","width":"100%","height":"auto"},"children":[]},{"id":"417df4fa-18a0-48d1-8869-83f6424b1d34","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Create TypeScript config:","styles":{}}],"children":[]},{"id":"8fa1dc9a-e244-4b84-8b58-35d78bf548cb","type":"procode","props":{"code":"pnpm tsc --init\n","language":"bash","filename":"","files":"[{\"id\":\"y3llq2q26\",\"name\":\"code\",\"code\":\"pnpm tsc --init\\n\",\"language\":\"bash\"}]","width":"100%","height":"auto"},"children":[]},{"id":"40a387bb-5609-4755-8d6c-50e0c39f0e57","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"7498daec-a4ac-48a9-bfc4-8b27ad5c05b8","type":"procode","props":{"code":"Backend\n├── Receives API requests\n├── Validates data\n├── Handles authentication\n├── Talks to database\n└── Sends JSON response\n","language":"txt","filename":"","files":"[{\"id\":\"p2hoskckm\",\"name\":\"code\",\"code\":\"Backend\\n├── Receives API requests\\n├── Validates data\\n├── Handles authentication\\n├── Talks to database\\n└── Sends JSON response\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"75077e86-7380-440a-8355-4f9ec8e3a331","type":"divider","props":{},"children":[]},{"id":"f27c3d18-a08c-43dc-9c2d-bcc63912cdf9","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 4: Backend Scripts","styles":{}}],"children":[]},{"id":"d03c9a29-a32f-4352-8247-4d3cdb588e56","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"backend/package.json","styles":{"code":true}}],"children":[]},{"id":"4232378d-2d61-42d8-a15f-c173665014af","type":"procode","props":{"code":"{\n \"scripts\": {\n \"dev\": \"tsx watch src/server.ts\",\n \"build\": \"tsc\",\n \"start\": \"node dist/server.js\",\n \"prisma:migrate\": \"prisma migrate dev\",\n \"prisma:studio\": \"prisma studio\"\n }\n}\n","language":"json","filename":"","files":"[{\"id\":\"li534alei\",\"name\":\"code\",\"code\":\"{\\n \\\"scripts\\\": {\\n \\\"dev\\\": \\\"tsx watch src/server.ts\\\",\\n \\\"build\\\": \\\"tsc\\\",\\n \\\"start\\\": \\\"node dist/server.js\\\",\\n \\\"prisma:migrate\\\": \\\"prisma migrate dev\\\",\\n \\\"prisma:studio\\\": \\\"prisma studio\\\"\\n }\\n}\\n\",\"language\":\"json\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6d281bff-9fe9-4936-b0f0-f6f84590b0cb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"2285fa25-c477-4e74-856e-5e8956ac6616","type":"procode","props":{"code":"dev\n└── runs backend in development\n\nbuild\n└── compiles TypeScript\n\nstart\n└── runs backend in production\n","language":"txt","filename":"","files":"[{\"id\":\"ynbysqtxq\",\"name\":\"code\",\"code\":\"dev\\n└── runs backend in development\\n\\nbuild\\n└── compiles TypeScript\\n\\nstart\\n└── runs backend in production\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b7c3cd9f-ebdc-4a5a-b175-befcfb48edab","type":"divider","props":{},"children":[]},{"id":"9a1eb09c-a10b-489a-8b8d-4c60107e6c52","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 5: Environment Variables","styles":{}}],"children":[]},{"id":"c568c415-bf31-4bca-946b-a88bbc345377","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Frontend ","styles":{}},{"type":"text","text":".env","styles":{"code":true}}],"children":[]},{"id":"94cbca27-86c3-4373-a3c8-f733135e6b5d","type":"procode","props":{"code":"VITE_API_URL=http://localhost:3000/api\n","language":"env","filename":"","files":"[{\"id\":\"rnrtnn2ov\",\"name\":\"code\",\"code\":\"VITE_API_URL=http://localhost:3000/api\\n\",\"language\":\"env\"}]","width":"100%","height":"auto"},"children":[]},{"id":"54b1e354-da6b-4bc0-8cc3-d926910128dc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Backend ","styles":{}},{"type":"text","text":".env","styles":{"code":true}}],"children":[]},{"id":"ca9f4c5e-f6e4-46eb-8d45-b8c24202e5a5","type":"procode","props":{"code":"DATABASE_URL=\"postgresql://user:password@localhost:5432/fullstack_app\"\nJWT_SECRET=\"your_secret_key\"\nPORT=3000\n","language":"env","filename":"","files":"[{\"id\":\"mhgq33863\",\"name\":\"code\",\"code\":\"DATABASE_URL=\\\"postgresql://user:password@localhost:5432/fullstack_app\\\"\\nJWT_SECRET=\\\"your_secret_key\\\"\\nPORT=3000\\n\",\"language\":\"env\"}]","width":"100%","height":"auto"},"children":[]},{"id":"24ec7745-db40-4919-9967-42a3457cbd20","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Important:","styles":{}}],"children":[]},{"id":"991ecf35-bb32-41f8-993c-0eee029c0a99","type":"procode","props":{"code":"Frontend env\n└── visible in browser after build\n\nBackend env\n└── safe place for secrets\n","language":"txt","filename":"","files":"[{\"id\":\"pgafqvdmw\",\"name\":\"code\",\"code\":\"Frontend env\\n└── visible in browser after build\\n\\nBackend env\\n└── safe place for secrets\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f7752946-70f9-4d45-ac6b-d6c46bce46b2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple rule:","styles":{}}],"children":[]},{"id":"a0d245a7-e282-49d4-9b0e-04f5e5131a34","type":"procode","props":{"code":"Never put secret keys in React frontend.\n","language":"txt","filename":"","files":"[{\"id\":\"uu2kzfio2\",\"name\":\"code\",\"code\":\"Never put secret keys in React frontend.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4ac8b4b5-c017-4a91-9721-bc68e4e24177","type":"divider","props":{},"children":[]},{"id":"6a087daf-eff1-475c-a6ca-054c2e6a7e34","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 6: Database Schema","styles":{}}],"children":[]},{"id":"a4ad8098-b797-404e-93f2-fc9eb8ca664a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"backend/prisma/schema.prisma","styles":{"code":true}}],"children":[]},{"id":"a685d6dd-071f-44cf-a590-fa302253ae32","type":"procode","props":{"code":"model User {\n id Int @id @default(autoincrement())\n name String\n email String @unique\n password String\n products Product[]\n createdAt DateTime @default(now())\n updatedAt DateTime @updatedAt\n}\n\nmodel Product {\n id Int @id @default(autoincrement())\n name String\n price Int\n description String?\n userId Int\n user User @relation(fields: [userId], references: [id])\n createdAt DateTime @default(now())\n updatedAt DateTime @updatedAt\n}\n","language":"prisma","filename":"","files":"[{\"id\":\"axkt82jeb\",\"name\":\"code\",\"code\":\"model User {\\n id Int @id @default(autoincrement())\\n name String\\n email String @unique\\n password String\\n products Product[]\\n createdAt DateTime @default(now())\\n updatedAt DateTime @updatedAt\\n}\\n\\nmodel Product {\\n id Int @id @default(autoincrement())\\n name String\\n price Int\\n description String?\\n userId Int\\n user User @relation(fields: [userId], references: [id])\\n createdAt DateTime @default(now())\\n updatedAt DateTime @updatedAt\\n}\\n\",\"language\":\"prisma\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7a111e00-27a2-4955-bef4-33caec5e9ff5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Run migration:","styles":{}}],"children":[]},{"id":"dd67de5b-3109-4b27-9991-e529a5370a30","type":"procode","props":{"code":"pnpm prisma:migrate\n","language":"bash","filename":"","files":"[{\"id\":\"5vdjltgu9\",\"name\":\"code\",\"code\":\"pnpm prisma:migrate\\n\",\"language\":\"bash\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a13c0558-eafe-481f-a7d8-4123d80a3501","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"430e3a96-1e67-4865-8051-98e212fdd6c3","type":"procode","props":{"code":"Database\n├── users table\n└── products table\n","language":"txt","filename":"","files":"[{\"id\":\"5wnkxp6wy\",\"name\":\"code\",\"code\":\"Database\\n├── users table\\n└── products table\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"599219b0-8e0d-46da-a512-cceea4a2a98b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Relationship:","styles":{}}],"children":[]},{"id":"c34cbe61-b792-4dce-bd0d-a9c3fe0406e2","type":"procode","props":{"code":"User\n└── has many products\n\nProduct\n└── belongs to user\n","language":"txt","filename":"","files":"[{\"id\":\"i002awevt\",\"name\":\"code\",\"code\":\"User\\n└── has many products\\n\\nProduct\\n└── belongs to user\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ca1b8470-7f41-428b-ba8e-20148179b561","type":"divider","props":{},"children":[]},{"id":"9beddd95-d301-450a-ad1e-8da3c1035785","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 7: Prisma Client","styles":{}}],"children":[]},{"id":"e7a1344f-8471-4a4d-a21b-da9a534ff3a2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"backend/src/utils/prisma.ts","styles":{"code":true}}],"children":[]},{"id":"3125ba64-ab83-4bc6-a579-87a88901024c","type":"procode","props":{"code":"import { PrismaClient } from \"@prisma/client\"\n\nexport const prisma = new PrismaClient()\n","language":"ts","filename":"","files":"[{\"id\":\"h76v9dgim\",\"name\":\"code\",\"code\":\"import { PrismaClient } from \\\"@prisma/client\\\"\\n\\nexport const prisma = new PrismaClient()\\n\",\"language\":\"ts\"}]","width":"100%","height":"auto"},"children":[]},{"id":"25540b62-31d3-4d4c-8885-db89be784b26","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"0222aa79-978f-4094-95d3-6f038bac89c3","type":"procode","props":{"code":"prisma.ts\n├── Creates Prisma client\n├── Connects backend to database\n└── Reused inside services\n","language":"txt","filename":"","files":"[{\"id\":\"ecndws4zf\",\"name\":\"code\",\"code\":\"prisma.ts\\n├── Creates Prisma client\\n├── Connects backend to database\\n└── Reused inside services\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a4178b48-c92a-43e6-85c4-3f91d93b55d7","type":"divider","props":{},"children":[]},{"id":"2082662d-5ef3-4e3d-bcbc-515f0bb8ce60","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 8: Express App Setup","styles":{}}],"children":[]},{"id":"e3808a41-6c24-450e-8161-b5946040e704","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"backend/src/app.ts","styles":{"code":true}}],"children":[]},{"id":"0b01234a-8d90-45ea-9b82-f3c85a0d96cf","type":"procode","props":{"code":"import cors from \"cors\"\nimport express from \"express\"\nimport { authRoute } from \"./routes/auth-route\"\nimport { productRoute } from \"./routes/product-route\"\n\nexport const app = express()\n\napp.use(cors())\napp.use(express.json())\n\napp.get(\"/\", (req, res) => {\n res.json({\n message: \"Fullstack React API\",\n })\n})\n\napp.use(\"/api/auth\", authRoute)\napp.use(\"/api/products\", productRoute)\n","language":"ts","filename":"","files":"[{\"id\":\"zt0w0eok6\",\"name\":\"code\",\"code\":\"import cors from \\\"cors\\\"\\nimport express from \\\"express\\\"\\nimport { authRoute } from \\\"./routes/auth-route\\\"\\nimport { productRoute } from \\\"./routes/product-route\\\"\\n\\nexport const app = express()\\n\\napp.use(cors())\\napp.use(express.json())\\n\\napp.get(\\\"/\\\", (req, res) => {\\n res.json({\\n message: \\\"Fullstack React API\\\",\\n })\\n})\\n\\napp.use(\\\"/api/auth\\\", authRoute)\\napp.use(\\\"/api/products\\\", productRoute)\\n\",\"language\":\"ts\"}]","width":"100%","height":"auto"},"children":[]},{"id":"436a7ed0-e80d-4b81-ab0a-43b65d9e5545","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"5629e1e1-87f2-4f09-815a-245c8ee64033","type":"procode","props":{"code":"app.ts\n├── Creates Express app\n├── Enables CORS\n├── Enables JSON body\n├── Registers auth routes\n└── Registers product routes\n","language":"txt","filename":"","files":"[{\"id\":\"71gwkvhvc\",\"name\":\"code\",\"code\":\"app.ts\\n├── Creates Express app\\n├── Enables CORS\\n├── Enables JSON body\\n├── Registers auth routes\\n└── Registers product routes\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c3c79566-4cf7-41e7-a99b-884660664c20","type":"divider","props":{},"children":[]},{"id":"f35ee316-9ae1-47f6-a68b-a7c288ab8264","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 9: Backend Server","styles":{}}],"children":[]},{"id":"b9fa1c45-0db2-4060-bceb-18c551994d07","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"backend/src/server.ts","styles":{"code":true}}],"children":[]},{"id":"267a0163-1940-444c-a641-1e3f2c0a5fa4","type":"procode","props":{"code":"import \"dotenv/config\"\nimport { app } from \"./app\"\n\nconst port = process.env.PORT || 3000\n\napp.listen(port, () => {\n console.log(`Server running on port ${port}`)\n})\n","language":"ts","filename":"","files":"[{\"id\":\"xz96exfkz\",\"name\":\"code\",\"code\":\"import \\\"dotenv/config\\\"\\nimport { app } from \\\"./app\\\"\\n\\nconst port = process.env.PORT || 3000\\n\\napp.listen(port, () => {\\n console.log(`Server running on port ${port}`)\\n})\\n\",\"language\":\"ts\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fef95c5a-d3c3-46fd-a2e4-aab4b3bb5818","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Run backend:","styles":{}}],"children":[]},{"id":"5818df07-8d7b-46f6-974f-6c25955f090d","type":"procode","props":{"code":"pnpm dev\n","language":"bash","filename":"","files":"[{\"id\":\"0rm1wjsr6\",\"name\":\"code\",\"code\":\"pnpm dev\\n\",\"language\":\"bash\"}]","width":"100%","height":"auto"},"children":[]},{"id":"df3aa25f-8b16-4a40-b021-78ebdd877a5d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Open:","styles":{}}],"children":[]},{"id":"734a68a8-25b6-4b57-b49b-dc795558b5ff","type":"procode","props":{"code":"http://localhost:3000\n","language":"txt","filename":"","files":"[{\"id\":\"9qre2ooif\",\"name\":\"code\",\"code\":\"http://localhost:3000\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"410d416e-7257-4988-8c36-9d58636ea061","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"85d21669-5a88-4860-b7f0-59fdd48d8da9","type":"procode","props":{"code":"server.ts\n├── Reads port\n├── Starts backend server\n└── Makes API available\n","language":"txt","filename":"","files":"[{\"id\":\"w6qgxe625\",\"name\":\"code\",\"code\":\"server.ts\\n├── Reads port\\n├── Starts backend server\\n└── Makes API available\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"678f4ad3-6a20-4fe0-8585-23223d7ea38e","type":"divider","props":{},"children":[]},{"id":"4c35d0b4-eedf-4b13-9cf8-2cc786fa9b1d","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 10: Auth Routes","styles":{}}],"children":[]},{"id":"dd4e8538-15bc-4cfc-9661-6da4063c782f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"backend/src/routes/auth-route.ts","styles":{"code":true}}],"children":[]},{"id":"cd30c716-1ef0-4317-b85e-8142489d1cf4","type":"procode","props":{"code":"import { Router } from \"express\"\nimport { login, register } from \"../controllers/auth-controller\"\n\nexport const authRoute = Router()\n\nauthRoute.post(\"/register\", register)\nauthRoute.post(\"/login\", login)\n","language":"ts","filename":"","files":"[{\"id\":\"h63i5tvex\",\"name\":\"code\",\"code\":\"import { Router } from \\\"express\\\"\\nimport { login, register } from \\\"../controllers/auth-controller\\\"\\n\\nexport const authRoute = Router()\\n\\nauthRoute.post(\\\"/register\\\", register)\\nauthRoute.post(\\\"/login\\\", login)\\n\",\"language\":\"ts\"}]","width":"100%","height":"auto"},"children":[]},{"id":"adda2bd6-8131-4465-b98c-a3e116ffd67a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"API endpoints:","styles":{}}],"children":[]},{"id":"2710386c-e7de-49a7-83cd-45e527311dee","type":"procode","props":{"code":"POST /api/auth/register\n└── Create new user\n\nPOST /api/auth/login\n└── Login existing user\n","language":"txt","filename":"","files":"[{\"id\":\"zho34x0tu\",\"name\":\"code\",\"code\":\"POST /api/auth/register\\n└── Create new user\\n\\nPOST /api/auth/login\\n└── Login existing user\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fa5e84cd-15fe-44d5-9438-367e2a89e91b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"4fca8a20-ba05-4a9e-86d5-67a9ac860df3","type":"procode","props":{"code":"Auth route defines authentication endpoints.\n","language":"txt","filename":"","files":"[{\"id\":\"f0uwt2bbx\",\"name\":\"code\",\"code\":\"Auth route defines authentication endpoints.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"260b6e79-288f-4b84-b547-56ef06c60262","type":"divider","props":{},"children":[]},{"id":"6cd3ac04-058f-4d3d-980e-477e3e80b960","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 11: Auth Controller","styles":{}}],"children":[]},{"id":"5bf58f16-da90-4a91-9615-2c57c186811f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"backend/src/controllers/auth-controller.ts","styles":{"code":true}}],"children":[]},{"id":"1f714e37-06b4-4787-b184-fe4cdf904b97","type":"procode","props":{"code":"import type { Request, Response } from \"express\"\nimport { loginUser, registerUser } from \"../services/auth-service\"\n\nexport async function register(req: Request, res: Response) {\n const user = await registerUser(req.body)\n\n res.status(201).json({\n message: \"Register success\",\n data: user,\n })\n}\n\nexport async function login(req: Request, res: Response) {\n const result = await loginUser(req.body)\n\n res.json({\n message: \"Login success\",\n data: result,\n })\n}\n","language":"ts","filename":"","files":"[{\"id\":\"zvxys3zbf\",\"name\":\"code\",\"code\":\"import type { Request, Response } from \\\"express\\\"\\nimport { loginUser, registerUser } from \\\"../services/auth-service\\\"\\n\\nexport async function register(req: Request, res: Response) {\\n const user = await registerUser(req.body)\\n\\n res.status(201).json({\\n message: \\\"Register success\\\",\\n data: user,\\n })\\n}\\n\\nexport async function login(req: Request, res: Response) {\\n const result = await loginUser(req.body)\\n\\n res.json({\\n message: \\\"Login success\\\",\\n data: result,\\n })\\n}\\n\",\"language\":\"ts\"}]","width":"100%","height":"auto"},"children":[]},{"id":"10824ac2-b7ea-400e-a78d-5f41faa84654","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"dd1689ad-0948-469b-96a8-77a629b580bf","type":"procode","props":{"code":"Controller\n├── Receives request\n├── Calls service\n└── Sends response\n","language":"txt","filename":"","files":"[{\"id\":\"tkf9903cc\",\"name\":\"code\",\"code\":\"Controller\\n├── Receives request\\n├── Calls service\\n└── Sends response\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bd2043cb-25f2-4ea7-9877-32464dba784e","type":"divider","props":{},"children":[]},{"id":"05167f49-890e-404b-a806-e10df4371d88","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 12: Auth Service","styles":{}}],"children":[]},{"id":"fcd71a27-30a4-4eb6-be10-3b9ca69cbf89","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"backend/src/services/auth-service.ts","styles":{"code":true}}],"children":[]},{"id":"e79c2494-052c-4540-8fb0-067a3e4addc6","type":"procode","props":{"code":"import bcrypt from \"bcrypt\"\nimport jwt from \"jsonwebtoken\"\nimport { prisma } from \"../utils/prisma\"\n\ntype RegisterInput = {\n name: string\n email: string\n password: string\n}\n\ntype LoginInput = {\n email: string\n password: string\n}\n\nexport async function registerUser(input: RegisterInput) {\n const hashedPassword = await bcrypt.hash(input.password, 10)\n\n const user = await prisma.user.create({\n data: {\n name: input.name,\n email: input.email,\n password: hashedPassword,\n },\n select: {\n id: true,\n name: true,\n email: true,\n },\n })\n\n return user\n}\n\nexport async function loginUser(input: LoginInput) {\n const user = await prisma.user.findUnique({\n where: {\n email: input.email,\n },\n })\n\n if (!user) {\n throw new Error(\"Email or password is incorrect\")\n }\n\n const isPasswordValid = await bcrypt.compare(\n input.password,\n user.password\n )\n\n if (!isPasswordValid) {\n throw new Error(\"Email or password is incorrect\")\n }\n\n const token = jwt.sign(\n {\n id: user.id,\n email: user.email,\n },\n process.env.JWT_SECRET as string,\n {\n expiresIn: \"1d\",\n }\n )\n\n return {\n token,\n user: {\n id: user.id,\n name: user.name,\n email: user.email,\n },\n }\n}\n","language":"ts","filename":"","files":"[{\"id\":\"bfbry3gol\",\"name\":\"code\",\"code\":\"import bcrypt from \\\"bcrypt\\\"\\nimport jwt from \\\"jsonwebtoken\\\"\\nimport { prisma } from \\\"../utils/prisma\\\"\\n\\ntype RegisterInput = {\\n name: string\\n email: string\\n password: string\\n}\\n\\ntype LoginInput = {\\n email: string\\n password: string\\n}\\n\\nexport async function registerUser(input: RegisterInput) {\\n const hashedPassword = await bcrypt.hash(input.password, 10)\\n\\n const user = await prisma.user.create({\\n data: {\\n name: input.name,\\n email: input.email,\\n password: hashedPassword,\\n },\\n select: {\\n id: true,\\n name: true,\\n email: true,\\n },\\n })\\n\\n return user\\n}\\n\\nexport async function loginUser(input: LoginInput) {\\n const user = await prisma.user.findUnique({\\n where: {\\n email: input.email,\\n },\\n })\\n\\n if (!user) {\\n throw new Error(\\\"Email or password is incorrect\\\")\\n }\\n\\n const isPasswordValid = await bcrypt.compare(\\n input.password,\\n user.password\\n )\\n\\n if (!isPasswordValid) {\\n throw new Error(\\\"Email or password is incorrect\\\")\\n }\\n\\n const token = jwt.sign(\\n {\\n id: user.id,\\n email: user.email,\\n },\\n process.env.JWT_SECRET as string,\\n {\\n expiresIn: \\\"1d\\\",\\n }\\n )\\n\\n return {\\n token,\\n user: {\\n id: user.id,\\n name: user.name,\\n email: user.email,\\n },\\n }\\n}\\n\",\"language\":\"ts\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0c055951-1f9c-4e6e-8bbf-ffb68b3c4db8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"ea2ded15-0842-46dc-a86c-79bdf5c297ab","type":"procode","props":{"code":"Auth service\n├── Registers user\n├── Hashes password\n├── Checks login password\n├── Creates token\n└── Returns safe user data\n","language":"txt","filename":"","files":"[{\"id\":\"2q9e51pg2\",\"name\":\"code\",\"code\":\"Auth service\\n├── Registers user\\n├── Hashes password\\n├── Checks login password\\n├── Creates token\\n└── Returns safe user data\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"55d2c4ba-fe3b-4195-90da-625a1a2d6bc9","type":"divider","props":{},"children":[]},{"id":"2dcbda9e-acc3-4572-91dd-24d0bd826154","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 13: Product Routes","styles":{}}],"children":[]},{"id":"31d4d146-988a-4bbe-9852-3d42129e5c4f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"backend/src/routes/product-route.ts","styles":{"code":true}}],"children":[]},{"id":"259baceb-15b7-47d4-99e8-28bb6c4bd6c1","type":"procode","props":{"code":"import { Router } from \"express\"\nimport {\n createProduct,\n deleteProduct,\n getProducts,\n updateProduct,\n} from \"../controllers/product-controller\"\n\nexport const productRoute = Router()\n\nproductRoute.get(\"/\", getProducts)\nproductRoute.post(\"/\", createProduct)\nproductRoute.patch(\"/:id\", updateProduct)\nproductRoute.delete(\"/:id\", deleteProduct)\n","language":"ts","filename":"","files":"[{\"id\":\"x8j9ls19n\",\"name\":\"code\",\"code\":\"import { Router } from \\\"express\\\"\\nimport {\\n createProduct,\\n deleteProduct,\\n getProducts,\\n updateProduct,\\n} from \\\"../controllers/product-controller\\\"\\n\\nexport const productRoute = Router()\\n\\nproductRoute.get(\\\"/\\\", getProducts)\\nproductRoute.post(\\\"/\\\", createProduct)\\nproductRoute.patch(\\\"/:id\\\", updateProduct)\\nproductRoute.delete(\\\"/:id\\\", deleteProduct)\\n\",\"language\":\"ts\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2771bac9-7f44-44ca-8172-05666d85b8be","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"API endpoints:","styles":{}}],"children":[]},{"id":"3e8db67d-1391-48f4-9cab-38b25b2e39ec","type":"procode","props":{"code":"GET /api/products\nPOST /api/products\nPATCH /api/products/:id\nDELETE /api/products/:id\n","language":"txt","filename":"","files":"[{\"id\":\"fsiabo0qa\",\"name\":\"code\",\"code\":\"GET /api/products\\nPOST /api/products\\nPATCH /api/products/:id\\nDELETE /api/products/:id\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0936dd48-dee9-4ed8-a028-f5fc2f822f7b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"c2e61f4c-28ba-4ff3-a103-fa192d3e6f6c","type":"procode","props":{"code":"Product route defines CRUD endpoints.\n","language":"txt","filename":"","files":"[{\"id\":\"xo0nbzdtx\",\"name\":\"code\",\"code\":\"Product route defines CRUD endpoints.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d1563e1b-c76c-4636-89a2-e79cc26cb4af","type":"divider","props":{},"children":[]},{"id":"4b761214-fa75-422c-9e66-8e5260a43c05","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 14: Product Controller","styles":{}}],"children":[]},{"id":"65d06fe4-3fd6-404d-a1f5-8ee8f1fda78c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"backend/src/controllers/product-controller.ts","styles":{"code":true}}],"children":[]},{"id":"5380c0ff-5afe-40a2-86ec-e7588955e19b","type":"procode","props":{"code":"import type { Request, Response } from \"express\"\nimport { prisma } from \"../utils/prisma\"\n\nexport async function getProducts(req: Request, res: Response) {\n const products = await prisma.product.findMany({\n orderBy: {\n createdAt: \"desc\",\n },\n })\n\n res.json({\n data: products,\n })\n}\n\nexport async function createProduct(req: Request, res: Response) {\n const product = await prisma.product.create({\n data: {\n name: req.body.name,\n price: req.body.price,\n description: req.body.description,\n userId: 1,\n },\n })\n\n res.status(201).json({\n data: product,\n })\n}\n\nexport async function updateProduct(req: Request, res: Response) {\n const id = Number(req.params.id)\n\n const product = await prisma.product.update({\n where: {\n id,\n },\n data: {\n name: req.body.name,\n price: req.body.price,\n description: req.body.description,\n },\n })\n\n res.json({\n data: product,\n })\n}\n\nexport async function deleteProduct(req: Request, res: Response) {\n const id = Number(req.params.id)\n\n await prisma.product.delete({\n where: {\n id,\n },\n })\n\n res.json({\n message: \"Product deleted\",\n })\n}\n","language":"ts","filename":"","files":"[{\"id\":\"vijthaq4e\",\"name\":\"code\",\"code\":\"import type { Request, Response } from \\\"express\\\"\\nimport { prisma } from \\\"../utils/prisma\\\"\\n\\nexport async function getProducts(req: Request, res: Response) {\\n const products = await prisma.product.findMany({\\n orderBy: {\\n createdAt: \\\"desc\\\",\\n },\\n })\\n\\n res.json({\\n data: products,\\n })\\n}\\n\\nexport async function createProduct(req: Request, res: Response) {\\n const product = await prisma.product.create({\\n data: {\\n name: req.body.name,\\n price: req.body.price,\\n description: req.body.description,\\n userId: 1,\\n },\\n })\\n\\n res.status(201).json({\\n data: product,\\n })\\n}\\n\\nexport async function updateProduct(req: Request, res: Response) {\\n const id = Number(req.params.id)\\n\\n const product = await prisma.product.update({\\n where: {\\n id,\\n },\\n data: {\\n name: req.body.name,\\n price: req.body.price,\\n description: req.body.description,\\n },\\n })\\n\\n res.json({\\n data: product,\\n })\\n}\\n\\nexport async function deleteProduct(req: Request, res: Response) {\\n const id = Number(req.params.id)\\n\\n await prisma.product.delete({\\n where: {\\n id,\\n },\\n })\\n\\n res.json({\\n message: \\\"Product deleted\\\",\\n })\\n}\\n\",\"language\":\"ts\"}]","width":"100%","height":"auto"},"children":[]},{"id":"32e6b7c9-602c-4c31-af7d-05d791c9d37f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"ddc3f378-6f6c-4dda-8317-d92b03f71bcc","type":"procode","props":{"code":"Product controller\n├── Gets products\n├── Creates product\n├── Updates product\n└── Deletes product\n","language":"txt","filename":"","files":"[{\"id\":\"9m37bmbr6\",\"name\":\"code\",\"code\":\"Product controller\\n├── Gets products\\n├── Creates product\\n├── Updates product\\n└── Deletes product\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5fb6d78d-3e25-4ef0-af09-fc39b05f3323","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"For learning, ","styles":{}},{"type":"text","text":"userId: 1","styles":{"code":true}},{"type":"text","text":" is okay temporarily.","styles":{}}],"children":[]},{"id":"6eae503a-0ba6-4d1d-a9bd-299591360a7a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Later, replace it with authenticated user ID from token.","styles":{}}],"children":[]},{"id":"bb2e6cfb-80b7-4ca1-bf84-03f05913973e","type":"divider","props":{},"children":[]},{"id":"9495de91-5a14-4664-8fde-26ba939a0588","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 15: Frontend API Client","styles":{}}],"children":[]},{"id":"06f8a06e-4fed-4376-99c7-21cf1910c939","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"frontend/src/lib/api-client.ts","styles":{"code":true}}],"children":[]},{"id":"42844150-66a0-473d-b313-48dbe0ee5977","type":"procode","props":{"code":"const API_URL = import.meta.env.VITE_API_URL\n\nexport async function apiClient(path: string, options?: RequestInit) {\n const token = localStorage.getItem(\"token\")\n\n const response = await fetch(`${API_URL}${path}`, {\n ...options,\n headers: {\n \"Content-Type\": \"application/json\",\n Authorization: token ? `Bearer ${token}` : \"\",\n ...options?.headers,\n },\n })\n\n if (!response.ok) {\n throw new Error(\"API request failed\")\n }\n\n return response.json()\n}\n","language":"ts","filename":"","files":"[{\"id\":\"rxxk1238y\",\"name\":\"code\",\"code\":\"const API_URL = import.meta.env.VITE_API_URL\\n\\nexport async function apiClient(path: string, options?: RequestInit) {\\n const token = localStorage.getItem(\\\"token\\\")\\n\\n const response = await fetch(`${API_URL}${path}`, {\\n ...options,\\n headers: {\\n \\\"Content-Type\\\": \\\"application/json\\\",\\n Authorization: token ? `Bearer ${token}` : \\\"\\\",\\n ...options?.headers,\\n },\\n })\\n\\n if (!response.ok) {\\n throw new Error(\\\"API request failed\\\")\\n }\\n\\n return response.json()\\n}\\n\",\"language\":\"ts\"}]","width":"100%","height":"auto"},"children":[]},{"id":"39c0a77d-3a8a-4de3-9ed3-2000718e1371","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"b9161509-2d1f-44ca-ba01-097953a44071","type":"procode","props":{"code":"api-client.ts\n├── Stores base API logic\n├── Reads token\n├── Sends JSON header\n├── Handles error response\n└── Reused by feature services\n","language":"txt","filename":"","files":"[{\"id\":\"mxflc45ow\",\"name\":\"code\",\"code\":\"api-client.ts\\n├── Stores base API logic\\n├── Reads token\\n├── Sends JSON header\\n├── Handles error response\\n└── Reused by feature services\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"554e9905-4169-4cc1-9440-98fce95f611b","type":"divider","props":{},"children":[]},{"id":"12e27649-9469-4b86-9672-f376aa962013","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 16: Auth API Service","styles":{}}],"children":[]},{"id":"89694428-1233-4e8c-9c35-ddf05911a7a5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"frontend/src/features/auth/services/auth-api.ts","styles":{"code":true}}],"children":[]},{"id":"3b9bd396-f208-4ae2-94d7-5b24e4dad8e1","type":"procode","props":{"code":"import { apiClient } from \"../../../lib/api-client\"\n\ntype LoginPayload = {\n email: string\n password: string\n}\n\ntype RegisterPayload = {\n name: string\n email: string\n password: string\n}\n\nexport function login(payload: LoginPayload) {\n return apiClient(\"/auth/login\", {\n method: \"POST\",\n body: JSON.stringify(payload),\n })\n}\n\nexport function register(payload: RegisterPayload) {\n return apiClient(\"/auth/register\", {\n method: \"POST\",\n body: JSON.stringify(payload),\n })\n}\n","language":"ts","filename":"","files":"[{\"id\":\"x6nd1hz07\",\"name\":\"code\",\"code\":\"import { apiClient } from \\\"../../../lib/api-client\\\"\\n\\ntype LoginPayload = {\\n email: string\\n password: string\\n}\\n\\ntype RegisterPayload = {\\n name: string\\n email: string\\n password: string\\n}\\n\\nexport function login(payload: LoginPayload) {\\n return apiClient(\\\"/auth/login\\\", {\\n method: \\\"POST\\\",\\n body: JSON.stringify(payload),\\n })\\n}\\n\\nexport function register(payload: RegisterPayload) {\\n return apiClient(\\\"/auth/register\\\", {\\n method: \\\"POST\\\",\\n body: JSON.stringify(payload),\\n })\\n}\\n\",\"language\":\"ts\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8c86e615-6207-4425-9b69-ee287f27b9bc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"882dc603-990a-4721-8667-664ab707fffe","type":"procode","props":{"code":"auth-api.ts\n├── Sends login request\n├── Sends register request\n└── Keeps auth API logic outside UI\n","language":"txt","filename":"","files":"[{\"id\":\"ze4xs86rl\",\"name\":\"code\",\"code\":\"auth-api.ts\\n├── Sends login request\\n├── Sends register request\\n└── Keeps auth API logic outside UI\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f3250d2b-e5d3-4425-8dd0-c64445eb7e20","type":"divider","props":{},"children":[]},{"id":"e1b8aeb0-b335-4208-98da-da56fb973b3c","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 17: Product API Service","styles":{}}],"children":[]},{"id":"d3ecb5b6-3fec-44de-85f8-1b89b29205f7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"frontend/src/features/products/services/product-api.ts","styles":{"code":true}}],"children":[]},{"id":"7178647a-23af-464b-a382-7989f5d15db8","type":"procode","props":{"code":"import { apiClient } from \"../../../lib/api-client\"\n\nexport type ProductPayload = {\n name: string\n price: number\n description?: string\n}\n\nexport function getProducts() {\n return apiClient(\"/products\")\n}\n\nexport function createProduct(payload: ProductPayload) {\n return apiClient(\"/products\", {\n method: \"POST\",\n body: JSON.stringify(payload),\n })\n}\n\nexport function updateProduct(id: number, payload: ProductPayload) {\n return apiClient(`/products/${id}`, {\n method: \"PATCH\",\n body: JSON.stringify(payload),\n })\n}\n\nexport function deleteProduct(id: number) {\n return apiClient(`/products/${id}`, {\n method: \"DELETE\",\n })\n}\n","language":"ts","filename":"","files":"[{\"id\":\"n0msiz9un\",\"name\":\"code\",\"code\":\"import { apiClient } from \\\"../../../lib/api-client\\\"\\n\\nexport type ProductPayload = {\\n name: string\\n price: number\\n description?: string\\n}\\n\\nexport function getProducts() {\\n return apiClient(\\\"/products\\\")\\n}\\n\\nexport function createProduct(payload: ProductPayload) {\\n return apiClient(\\\"/products\\\", {\\n method: \\\"POST\\\",\\n body: JSON.stringify(payload),\\n })\\n}\\n\\nexport function updateProduct(id: number, payload: ProductPayload) {\\n return apiClient(`/products/${id}`, {\\n method: \\\"PATCH\\\",\\n body: JSON.stringify(payload),\\n })\\n}\\n\\nexport function deleteProduct(id: number) {\\n return apiClient(`/products/${id}`, {\\n method: \\\"DELETE\\\",\\n })\\n}\\n\",\"language\":\"ts\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5bd9ca47-e6fd-49b1-927e-d509e620d33f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"9973e63f-308b-4ffd-a562-3c14c6d3cf6b","type":"procode","props":{"code":"product-api.ts\n├── Gets product list\n├── Creates product\n├── Updates product\n├── Deletes product\n└── Keeps product API logic reusable\n","language":"txt","filename":"","files":"[{\"id\":\"w4f6fmiuw\",\"name\":\"code\",\"code\":\"product-api.ts\\n├── Gets product list\\n├── Creates product\\n├── Updates product\\n├── Deletes product\\n└── Keeps product API logic reusable\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9f69d32b-be6b-428f-b731-9613019e846e","type":"divider","props":{},"children":[]},{"id":"00b8fa83-07ec-49a5-b1ee-c63ba47edb50","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 18: React Router Setup","styles":{}}],"children":[]},{"id":"66553321-40b0-4d19-add9-2d503d485744","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"frontend/src/routes/app-routes.tsx","styles":{"code":true}}],"children":[]},{"id":"1d1be44c-97d3-4532-8226-52eb01f35d90","type":"procode","props":{"code":"import { createBrowserRouter, RouterProvider } from \"react-router-dom\"\nimport { LoginPage } from \"../features/auth/pages/login-page\"\nimport { RegisterPage } from \"../features/auth/pages/register-page\"\nimport { CreateProductPage } from \"../features/products/pages/create-product-page\"\nimport { EditProductPage } from \"../features/products/pages/edit-product-page\"\nimport { ProductsPage } from \"../features/products/pages/products-page\"\nimport { ProtectedRoute } from \"./protected-route\"\n\nconst router = createBrowserRouter([\n {\n path: \"/login\",\n element: ,\n },\n {\n path: \"/register\",\n element: ,\n },\n {\n path: \"/products\",\n element: (\n \n \n \n ),\n },\n {\n path: \"/products/create\",\n element: (\n \n \n \n ),\n },\n {\n path: \"/products/:id/edit\",\n element: (\n \n \n \n ),\n },\n])\n\nexport function AppRoutes() {\n return \n}\n","language":"tsx","filename":"","files":"[{\"id\":\"yx1rirvvm\",\"name\":\"code\",\"code\":\"import { createBrowserRouter, RouterProvider } from \\\"react-router-dom\\\"\\nimport { LoginPage } from \\\"../features/auth/pages/login-page\\\"\\nimport { RegisterPage } from \\\"../features/auth/pages/register-page\\\"\\nimport { CreateProductPage } from \\\"../features/products/pages/create-product-page\\\"\\nimport { EditProductPage } from \\\"../features/products/pages/edit-product-page\\\"\\nimport { ProductsPage } from \\\"../features/products/pages/products-page\\\"\\nimport { ProtectedRoute } from \\\"./protected-route\\\"\\n\\nconst router = createBrowserRouter([\\n {\\n path: \\\"/login\\\",\\n element: ,\\n },\\n {\\n path: \\\"/register\\\",\\n element: ,\\n },\\n {\\n path: \\\"/products\\\",\\n element: (\\n \\n \\n \\n ),\\n },\\n {\\n path: \\\"/products/create\\\",\\n element: (\\n \\n \\n \\n ),\\n },\\n {\\n path: \\\"/products/:id/edit\\\",\\n element: (\\n \\n \\n \\n ),\\n },\\n])\\n\\nexport function AppRoutes() {\\n return \\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"86f6bdc1-3ea7-47f4-badf-ca3a1f2e65e8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"c44fbaf3-4a62-4ab1-97be-bc8c6fe5908d","type":"procode","props":{"code":"App routes\n├── Public login page\n├── Public register page\n├── Protected product page\n├── Protected create page\n└── Protected edit page\n","language":"txt","filename":"","files":"[{\"id\":\"3jbs43j25\",\"name\":\"code\",\"code\":\"App routes\\n├── Public login page\\n├── Public register page\\n├── Protected product page\\n├── Protected create page\\n└── Protected edit page\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"56ae5620-754f-4c09-81f3-870c376818c9","type":"divider","props":{},"children":[]},{"id":"57324676-a965-438d-a22f-2ebe14ecbead","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 19: Protected Route","styles":{}}],"children":[]},{"id":"27837ded-916e-41e2-9a37-64add75087eb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"frontend/src/routes/protected-route.tsx","styles":{"code":true}}],"children":[]},{"id":"173d57bf-aabc-44c6-9a78-515b7f395949","type":"procode","props":{"code":"import { Navigate } from \"react-router-dom\"\n\ntype ProtectedRouteProps = {\n children: React.ReactNode\n}\n\nexport function ProtectedRoute({ children }: ProtectedRouteProps) {\n const token = localStorage.getItem(\"token\")\n\n if (!token) {\n return \n }\n\n return children\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"fhnn7utdg\",\"name\":\"code\",\"code\":\"import { Navigate } from \\\"react-router-dom\\\"\\n\\ntype ProtectedRouteProps = {\\n children: React.ReactNode\\n}\\n\\nexport function ProtectedRoute({ children }: ProtectedRouteProps) {\\n const token = localStorage.getItem(\\\"token\\\")\\n\\n if (!token) {\\n return \\n }\\n\\n return children\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0425a2f2-32e3-4cd9-9174-7c0feb6dbbd7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"79edff77-fd9c-40e1-a46c-a0a53ee315e6","type":"procode","props":{"code":"ProtectedRoute\n├── Checks token\n├── Allows logged-in users\n└── Redirects guests to login\n","language":"txt","filename":"","files":"[{\"id\":\"n34dmu4dw\",\"name\":\"code\",\"code\":\"ProtectedRoute\\n├── Checks token\\n├── Allows logged-in users\\n└── Redirects guests to login\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"766ab2c8-f70a-444b-a62f-cad3668839d0","type":"divider","props":{},"children":[]},{"id":"27d9f080-6551-460f-9920-1329ae194194","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 20: App Component","styles":{}}],"children":[]},{"id":"e4cdd43b-8c31-4d0b-b226-8247c7a29ee9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"frontend/src/App.tsx","styles":{"code":true}}],"children":[]},{"id":"10d35085-e47d-4f0f-ae1b-dcb7167b9af7","type":"procode","props":{"code":"import { AppRoutes } from \"./routes/app-routes\"\n\nexport default function App() {\n return \n}\n","language":"tsx","filename":"","files":"[{\"id\":\"ffp0xk6fb\",\"name\":\"code\",\"code\":\"import { AppRoutes } from \\\"./routes/app-routes\\\"\\n\\nexport default function App() {\\n return \\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a23c1205-122f-4aa6-a4fa-05db27ca25c0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"4f880985-b98c-48e6-a5f6-60693998fb2b","type":"procode","props":{"code":"App.tsx\n└── Loads all routes\n","language":"txt","filename":"","files":"[{\"id\":\"yeipx6efr\",\"name\":\"code\",\"code\":\"App.tsx\\n└── Loads all routes\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4bcc624b-1b43-4ef3-b5a3-5e7a1f79c22f","type":"divider","props":{},"children":[]},{"id":"f6b5bbcb-ab39-4324-a2b8-1b09c94f4a14","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 21: Login Page","styles":{}}],"children":[]},{"id":"6d73d658-40a2-4bce-a781-36b16926f3c3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"frontend/src/features/auth/pages/login-page.tsx","styles":{"code":true}}],"children":[]},{"id":"c87158bf-d5bd-46f1-b9f4-44418e7e2bde","type":"procode","props":{"code":"import { useState } from \"react\"\nimport { useNavigate } from \"react-router-dom\"\nimport { login } from \"../services/auth-api\"\n\nexport function LoginPage() {\n const navigate = useNavigate()\n\n const [email, setEmail] = useState(\"\")\n const [password, setPassword] = useState(\"\")\n const [error, setError] = useState(\"\")\n\n async function handleSubmit(event: React.FormEvent) {\n event.preventDefault()\n\n try {\n const result = await login({\n email,\n password,\n })\n\n localStorage.setItem(\"token\", result.data.token)\n\n navigate(\"/products\")\n } catch {\n setError(\"Email or password is incorrect\")\n }\n }\n\n return (\n

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"rkszz8avu\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\nimport { useNavigate } from \\\"react-router-dom\\\"\\nimport { login } from \\\"../services/auth-api\\\"\\n\\nexport function LoginPage() {\\n const navigate = useNavigate()\\n\\n const [email, setEmail] = useState(\\\"\\\")\\n const [password, setPassword] = useState(\\\"\\\")\\n const [error, setError] = useState(\\\"\\\")\\n\\n async function handleSubmit(event: React.FormEvent) {\\n event.preventDefault()\\n\\n try {\\n const result = await login({\\n email,\\n password,\\n })\\n\\n localStorage.setItem(\\\"token\\\", result.data.token)\\n\\n navigate(\\\"/products\\\")\\n } catch {\\n setError(\\\"Email or password is incorrect\\\")\\n }\\n }\\n\\n return (\\n

\\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1c7a260d-4d6d-4555-afdb-9c5042fc11b2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"bed72aaa-6fc9-4893-93da-8b18424a5ab2","type":"procode","props":{"code":"Login Page\n├── Collects email\n├── Collects password\n├── Sends login request\n├── Saves token\n└── Redirects to products page\n","language":"txt","filename":"","files":"[{\"id\":\"61fcqnt3t\",\"name\":\"code\",\"code\":\"Login Page\\n├── Collects email\\n├── Collects password\\n├── Sends login request\\n├── Saves token\\n└── Redirects to products page\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1d3197fb-a9db-451d-a054-a238f36c2c39","type":"divider","props":{},"children":[]},{"id":"d8295027-b886-43f6-938a-30f89d81bc9e","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 22: Products Page","styles":{}}],"children":[]},{"id":"f3fec363-b4e0-4045-abbe-81f7aab1e850","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"frontend/src/features/products/pages/products-page.tsx","styles":{"code":true}}],"children":[]},{"id":"65b52d36-69f8-4f7e-aa85-7a6a80e2b8f5","type":"procode","props":{"code":"import { useEffect, useState } from \"react\"\nimport { Link } from \"react-router-dom\"\nimport { deleteProduct, getProducts } from \"../services/product-api\"\n\ntype Product = {\n id: number\n name: string\n price: number\n description?: string\n}\n\nexport function ProductsPage() {\n const [products, setProducts] = useState([])\n const [loading, setLoading] = useState(true)\n const [error, setError] = useState(\"\")\n\n async function loadProducts() {\n try {\n setLoading(true)\n\n const result = await getProducts()\n\n setProducts(result.data)\n } catch {\n setError(\"Failed to load products\")\n } finally {\n setLoading(false)\n }\n }\n\n async function handleDelete(id: number) {\n await deleteProduct(id)\n await loadProducts()\n }\n\n useEffect(() => {\n loadProducts()\n }, [])\n\n if (loading) {\n return

Loading products...

\n }\n\n if (error) {\n return

{error}

\n }\n\n return (\n

Products

\n\n \n Create Product\n \n

\n\n \n \n \n \n \n \n \n \n\n \n {products.map((product) => (\n \n \n \n \n \n ))}\n \n

Name	Price	Action
{product.name}	{product.price}	\n \n Edit\n \n\n \n

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"x0ozg07c4\",\"name\":\"code\",\"code\":\"import { useEffect, useState } from \\\"react\\\"\\nimport { Link } from \\\"react-router-dom\\\"\\nimport { deleteProduct, getProducts } from \\\"../services/product-api\\\"\\n\\ntype Product = {\\n id: number\\n name: string\\n price: number\\n description?: string\\n}\\n\\nexport function ProductsPage() {\\n const [products, setProducts] = useState([])\\n const [loading, setLoading] = useState(true)\\n const [error, setError] = useState(\\\"\\\")\\n\\n async function loadProducts() {\\n try {\\n setLoading(true)\\n\\n const result = await getProducts()\\n\\n setProducts(result.data)\\n } catch {\\n setError(\\\"Failed to load products\\\")\\n } finally {\\n setLoading(false)\\n }\\n }\\n\\n async function handleDelete(id: number) {\\n await deleteProduct(id)\\n await loadProducts()\\n }\\n\\n useEffect(() => {\\n loadProducts()\\n }, [])\\n\\n if (loading) {\\n return

Loading products...

\\n }\\n\\n if (error) {\\n return

{error}

\\n }\\n\\n return (\\n

\\n

Products

\\n\\n \\n Create Product\\n \\n

\\n\\n \\n \\n \\n \\n \\n \\n \\n \\n\\n \\n {products.map((product) => (\\n \\n \\n \\n \\n \\n ))}\\n \\n

Name	Price	Action
{product.name}	{product.price}	\\n \\n Edit\\n \\n\\n \\n

\\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"766bef53-86b3-4cc8-9709-77802dfa579c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"851d6fba-8116-4642-92cd-58e6150b4557","type":"procode","props":{"code":"Products Page\n├── Loads product data\n├── Shows loading state\n├── Shows error state\n├── Shows product table\n├── Links to create page\n├── Links to edit page\n└── Deletes product\n","language":"txt","filename":"","files":"[{\"id\":\"kxdno5t5u\",\"name\":\"code\",\"code\":\"Products Page\\n├── Loads product data\\n├── Shows loading state\\n├── Shows error state\\n├── Shows product table\\n├── Links to create page\\n├── Links to edit page\\n└── Deletes product\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"10a8446a-40a9-44c5-9fa9-f688b342f5d6","type":"divider","props":{},"children":[]},{"id":"3be446a8-5653-4abf-8901-4a15ccc13383","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 23: Product Form Component","styles":{}}],"children":[]},{"id":"3633a8ea-c09e-42a7-a457-fc7908c8df2c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"frontend/src/features/products/components/product-form.tsx","styles":{"code":true}}],"children":[]},{"id":"1a546e5e-b183-4285-91de-1e6648f21832","type":"procode","props":{"code":"import { useState } from \"react\"\n\ntype ProductFormProps = {\n defaultValues?: {\n name: string\n price: number\n description?: string\n }\n onSubmit: (data: {\n name: string\n price: number\n description?: string\n }) => void\n}\n\nexport function ProductForm({ defaultValues, onSubmit }: ProductFormProps) {\n const [name, setName] = useState(defaultValues?.name ?? \"\")\n const [price, setPrice] = useState(defaultValues?.price ?? 0)\n const [description, setDescription] = useState(\n defaultValues?.description ?? \"\"\n )\n\n function handleSubmit(event: React.FormEvent) {\n event.preventDefault()\n\n onSubmit({\n name,\n price,\n description,\n })\n }\n\n return (\n

\n setName(event.target.value)}\n placeholder=\"Product name\"\n />\n\n setPrice(Number(event.target.value))}\n placeholder=\"Price\"\n />\n\n setDescription(event.target.value)}\n placeholder=\"Description\"\n />\n\n \n \n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"wksy9l103\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\n\\ntype ProductFormProps = {\\n defaultValues?: {\\n name: string\\n price: number\\n description?: string\\n }\\n onSubmit: (data: {\\n name: string\\n price: number\\n description?: string\\n }) => void\\n}\\n\\nexport function ProductForm({ defaultValues, onSubmit }: ProductFormProps) {\\n const [name, setName] = useState(defaultValues?.name ?? \\\"\\\")\\n const [price, setPrice] = useState(defaultValues?.price ?? 0)\\n const [description, setDescription] = useState(\\n defaultValues?.description ?? \\\"\\\"\\n )\\n\\n function handleSubmit(event: React.FormEvent) {\\n event.preventDefault()\\n\\n onSubmit({\\n name,\\n price,\\n description,\\n })\\n }\\n\\n return (\\n

\\n setName(event.target.value)}\\n placeholder=\\\"Product name\\\"\\n />\\n\\n setPrice(Number(event.target.value))}\\n placeholder=\\\"Price\\\"\\n />\\n\\n setDescription(event.target.value)}\\n placeholder=\\\"Description\\\"\\n />\\n\\n \\n \\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a91d1742-c8b3-498d-8107-8173280b4ba2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"5ce78f96-8250-4b80-9c3b-7c7eddbf817b","type":"procode","props":{"code":"ProductForm\n├── Reusable for create page\n├── Reusable for edit page\n├── Handles product input\n└── Sends form data to parent\n","language":"txt","filename":"","files":"[{\"id\":\"6qcd06jih\",\"name\":\"code\",\"code\":\"ProductForm\\n├── Reusable for create page\\n├── Reusable for edit page\\n├── Handles product input\\n└── Sends form data to parent\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bbfa6314-fd60-4d72-91e6-0143898a9198","type":"divider","props":{},"children":[]},{"id":"5cc42fb5-ba61-4693-bafa-ffe44bb28710","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 24: Create Product Page","styles":{}}],"children":[]},{"id":"285acd9b-37ae-4c32-9131-b31f83501cda","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"frontend/src/features/products/pages/create-product-page.tsx","styles":{"code":true}}],"children":[]},{"id":"eed52f46-d144-4166-bb3b-7cd2c672ff18","type":"procode","props":{"code":"import { useNavigate } from \"react-router-dom\"\nimport { ProductForm } from \"../components/product-form\"\nimport { createProduct } from \"../services/product-api\"\n\nexport function CreateProductPage() {\n const navigate = useNavigate()\n\n async function handleSubmit(data: {\n name: string\n price: number\n description?: string\n }) {\n await createProduct(data)\n\n navigate(\"/products\")\n }\n\n return (\n

Create Product

\n\n \n

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"oedny56r1\",\"name\":\"code\",\"code\":\"import { useNavigate } from \\\"react-router-dom\\\"\\nimport { ProductForm } from \\\"../components/product-form\\\"\\nimport { createProduct } from \\\"../services/product-api\\\"\\n\\nexport function CreateProductPage() {\\n const navigate = useNavigate()\\n\\n async function handleSubmit(data: {\\n name: string\\n price: number\\n description?: string\\n }) {\\n await createProduct(data)\\n\\n navigate(\\\"/products\\\")\\n }\\n\\n return (\\n

\\n

Create Product

\\n\\n \\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"48af5594-5799-42d8-befb-143aae81c4df","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"21d5a2f0-a06d-4a0f-8984-db46947aacf0","type":"procode","props":{"code":"Create Product Page\n├── Shows product form\n├── Sends POST request\n└── Redirects back to product list\n","language":"txt","filename":"","files":"[{\"id\":\"l007wnk4j\",\"name\":\"code\",\"code\":\"Create Product Page\\n├── Shows product form\\n├── Sends POST request\\n└── Redirects back to product list\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c59c613f-ed71-42fe-b384-2d09023d9a4a","type":"divider","props":{},"children":[]},{"id":"8e2ba9f0-f727-493c-ae69-9262550cc883","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 25: Run and Test","styles":{}}],"children":[]},{"id":"edce9206-5fb5-4f35-b587-d7fc7a928348","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Run backend:","styles":{}}],"children":[]},{"id":"4c1e8b52-e876-4a39-92ca-bb1e38ee3896","type":"procode","props":{"code":"cd backend\npnpm dev\n","language":"bash","filename":"","files":"[{\"id\":\"y0ljtyjsp\",\"name\":\"code\",\"code\":\"cd backend\\npnpm dev\\n\",\"language\":\"bash\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8947b67a-3e27-4fac-b7b4-b7a7c2f7f445","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Run frontend:","styles":{}}],"children":[]},{"id":"326f23a4-317e-4923-a431-ee44eb7a1d3c","type":"procode","props":{"code":"cd frontend\npnpm dev\n","language":"bash","filename":"","files":"[{\"id\":\"kxugnxmrf\",\"name\":\"code\",\"code\":\"cd frontend\\npnpm dev\\n\",\"language\":\"bash\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b1403d7d-c5f5-4ac9-9ac8-1fe4d9aadb5e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Test these URLs:","styles":{}}],"children":[]},{"id":"6e018ab5-0955-46d5-aa22-a365b77ad359","type":"procode","props":{"code":"Testing Checklist\n├── /login opens login page\n├── /register opens register page\n├── /products redirects guest to login\n├── Login saves token\n├── /products opens after login\n├── Products load from backend\n├── Create product works\n├── Edit product works\n├── Delete product works\n├── Refresh page still works\n├── API errors show message\n└── Backend database stores data\n","language":"txt","filename":"","files":"[{\"id\":\"sczxuoyve\",\"name\":\"code\",\"code\":\"Testing Checklist\\n├── /login opens login page\\n├── /register opens register page\\n├── /products redirects guest to login\\n├── Login saves token\\n├── /products opens after login\\n├── Products load from backend\\n├── Create product works\\n├── Edit product works\\n├── Delete product works\\n├── Refresh page still works\\n├── API errors show message\\n└── Backend database stores data\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f2f2776e-0c76-4c33-9b87-75e41725523a","type":"divider","props":{},"children":[]},{"id":"17245218-8867-47e8-8605-434f4566ae89","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"What This Project Teaches","styles":{}}],"children":[]},{"id":"afa5568d-0660-4263-8bea-2ff088a2126b","type":"procode","props":{"code":"This project teaches:\n├── React frontend structure\n├── Feature-based folder structure\n├── React Router setup\n├── Protected route concept\n├── Login and register flow\n├── REST API integration\n├── Backend route structure\n├── Controller and service pattern\n├── Prisma database connection\n├── CRUD operations\n├── Environment variables\n├── Loading and error handling\n└── Fullstack deployment thinking\n","language":"txt","filename":"","files":"[{\"id\":\"vyvuyijdh\",\"name\":\"code\",\"code\":\"This project teaches:\\n├── React frontend structure\\n├── Feature-based folder structure\\n├── React Router setup\\n├── Protected route concept\\n├── Login and register flow\\n├── REST API integration\\n├── Backend route structure\\n├── Controller and service pattern\\n├── Prisma database connection\\n├── CRUD operations\\n├── Environment variables\\n├── Loading and error handling\\n└── Fullstack deployment thinking\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4fd68588-a4dd-4fb1-b28e-251d35fb19cc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This is a good practice project after learning React basics, routing, forms, REST API, authentication, and deployment.","styles":{}}],"children":[]},{"id":"343516e7-9c23-49ed-83f9-fc886829bc2e","type":"divider","props":{},"children":[]},{"id":"36d3b05d-4cd7-472b-a44a-b6eaf6fc5f22","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Possible Improvements","styles":{}}],"children":[]},{"id":"1481b7b9-e8ea-4010-ab5b-b56e8371d348","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"After finishing the simple version, you can improve it.","styles":{}}],"children":[]},{"id":"b604475e-d89f-4c1e-9086-ce4d70443e84","type":"procode","props":{"code":"Possible Improvements\n├── Add React Hook Form\n├── Add Zod validation\n├── Add TanStack Query\n├── Add pagination\n├── Add search feature\n├── Add category table\n├── Add product image upload\n├── Add role-based access\n├── Add refresh token\n├── Add toast notification\n├── Add component testing\n├── Add backend API testing\n├── Add Docker setup\n├── Add CI/CD deployment\n└── Deploy to VPS with Nginx\n","language":"txt","filename":"","files":"[{\"id\":\"rpbnoivp2\",\"name\":\"code\",\"code\":\"Possible Improvements\\n├── Add React Hook Form\\n├── Add Zod validation\\n├── Add TanStack Query\\n├── Add pagination\\n├── Add search feature\\n├── Add category table\\n├── Add product image upload\\n├── Add role-based access\\n├── Add refresh token\\n├── Add toast notification\\n├── Add component testing\\n├── Add backend API testing\\n├── Add Docker setup\\n├── Add CI/CD deployment\\n└── Deploy to VPS with Nginx\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"da11d1c5-053d-4377-8fb2-7b5ef265f9cf","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Start simple first.","styles":{}}],"children":[]},{"id":"3e9ac460-9e4e-457b-a7e0-d2fb9ea36fe5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Add extra features step by step.","styles":{}}],"children":[]},{"id":"66a49c27-e881-4130-b00c-923e02a58edf","type":"divider","props":{},"children":[]},{"id":"00e61f3f-2238-4077-8ef2-d548e1f17def","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Common Mistakes","styles":{}}],"children":[]},{"id":"a945a195-df76-4ced-9df8-79c49406a8eb","type":"procode","props":{"code":"Mistake 1: Building frontend before planning API\nMistake 2: React directly connects to database\nMistake 3: Putting secret keys in React env\nMistake 4: Not separating frontend and backend\nMistake 5: Not using service files for API requests\nMistake 6: Not handling loading state\nMistake 7: Not handling error state\nMistake 8: Not protecting private routes\nMistake 9: Not validating backend request\nMistake 10: Deploying before testing production build\n","language":"txt","filename":"","files":"[{\"id\":\"ow57ctwpz\",\"name\":\"code\",\"code\":\"Mistake 1: Building frontend before planning API\\nMistake 2: React directly connects to database\\nMistake 3: Putting secret keys in React env\\nMistake 4: Not separating frontend and backend\\nMistake 5: Not using service files for API requests\\nMistake 6: Not handling loading state\\nMistake 7: Not handling error state\\nMistake 8: Not protecting private routes\\nMistake 9: Not validating backend request\\nMistake 10: Deploying before testing production build\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d741359c-7938-45ef-a391-3bd263e364b1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better approach:","styles":{}}],"children":[]},{"id":"3eb08f99-2b43-48f6-a653-a2af3f0a42fd","type":"procode","props":{"code":"Plan database first.\nBuild backend API.\nTest API.\nBuild React pages.\nConnect React to API.\nAdd protected routes.\nHandle loading and error states.\nDeploy after testing.\n","language":"txt","filename":"","files":"[{\"id\":\"nsvl2hzzm\",\"name\":\"code\",\"code\":\"Plan database first.\\nBuild backend API.\\nTest API.\\nBuild React pages.\\nConnect React to API.\\nAdd protected routes.\\nHandle loading and error states.\\nDeploy after testing.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8149b6bc-7ecc-4633-a6ac-13e2a2631b26","type":"divider","props":{},"children":[]},{"id":"80405822-3f9b-4490-b8f2-7e5e4b1babb3","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Professional Pattern","styles":{}}],"children":[]},{"id":"e61dd5a8-5f92-44e7-a0d4-ddec2224f074","type":"procode","props":{"code":"Professional Fullstack React Pattern\n├── Use frontend/backend separation\n├── Use React for UI\n├── Use React Router for pages\n├── Use feature-based frontend structure\n├── Use service files for API requests\n├── Use backend routes for endpoints\n├── Use controllers for request and response\n├── Use services for business logic\n├── Use Prisma for database access\n├── Use environment variables\n├── Keep secrets in backend only\n├── Hash user passwords\n├── Use token or session auth\n├── Protect private frontend routes\n├── Validate backend request body\n├── Handle loading and error states\n├── Test frontend and backend flow\n└── Deploy frontend and backend properly\n","language":"txt","filename":"","files":"[{\"id\":\"pvfhnb839\",\"name\":\"code\",\"code\":\"Professional Fullstack React Pattern\\n├── Use frontend/backend separation\\n├── Use React for UI\\n├── Use React Router for pages\\n├── Use feature-based frontend structure\\n├── Use service files for API requests\\n├── Use backend routes for endpoints\\n├── Use controllers for request and response\\n├── Use services for business logic\\n├── Use Prisma for database access\\n├── Use environment variables\\n├── Keep secrets in backend only\\n├── Hash user passwords\\n├── Use token or session auth\\n├── Protect private frontend routes\\n├── Validate backend request body\\n├── Handle loading and error states\\n├── Test frontend and backend flow\\n└── Deploy frontend and backend properly\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f27bcd33-8e6e-4504-9fc4-f585fc6a6e2b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Professional structure:","styles":{}}],"children":[]},{"id":"40e378e0-68d2-45d3-9070-a9f36fdfe4eb","type":"procode","props":{"code":"fullstack-react-project/\n├── frontend/\n│ └── src/\n│ ├── components/\n│ ├── features/\n│ ├── lib/\n│ └── routes/\n│\n├── backend/\n│ ├── prisma/\n│ └── src/\n│ ├── controllers/\n│ ├── middleware/\n│ ├── routes/\n│ ├── services/\n│ ├── utils/\n│ └── validators/\n│\n└── README.md\n","language":"txt","filename":"","files":"[{\"id\":\"dszildy3t\",\"name\":\"code\",\"code\":\"fullstack-react-project/\\n├── frontend/\\n│ └── src/\\n│ ├── components/\\n│ ├── features/\\n│ ├── lib/\\n│ └── routes/\\n│\\n├── backend/\\n│ ├── prisma/\\n│ └── src/\\n│ ├── controllers/\\n│ ├── middleware/\\n│ ├── routes/\\n│ ├── services/\\n│ ├── utils/\\n│ └── validators/\\n│\\n└── README.md\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e1d6488c-2bd3-4cfa-baa5-6842f53dd8f9","type":"divider","props":{},"children":[]},{"id":"880e906c-a524-431d-9494-6d4f77172cb3","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Simple Mental Model","styles":{}}],"children":[]},{"id":"4774869d-6395-4258-b441-b9f8b8c22ff0","type":"procode","props":{"code":"Fullstack React Project = complete real web app\n","language":"txt","filename":"","files":"[{\"id\":\"zueoeqx6p\",\"name\":\"code\",\"code\":\"Fullstack React Project = complete real web app\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b1142e3c-2761-4c5f-a573-1cb430228575","type":"procode","props":{"code":"Need UI? React frontend\nNeed pages? React Router\nNeed API? Express backend\nNeed database? Prisma + PostgreSQL/MySQL\nNeed login? Auth routes + token\nNeed private pages? ProtectedRoute\nNeed CRUD? Product API + Product pages\nNeed deploy? Build frontend + run backend\n","language":"txt","filename":"","files":"[{\"id\":\"u4ig09m84\",\"name\":\"code\",\"code\":\"Need UI? React frontend\\nNeed pages? React Router\\nNeed API? Express backend\\nNeed database? Prisma + PostgreSQL/MySQL\\nNeed login? Auth routes + token\\nNeed private pages? ProtectedRoute\\nNeed CRUD? Product API + Product pages\\nNeed deploy? Build frontend + run backend\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d223d1e0-4762-4bc3-9836-b4e02013e628","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Flow:","styles":{}}],"children":[]},{"id":"a0bd4cd5-3d8f-47a0-bf26-1d0c7fb02c6f","type":"procode","props":{"code":"User action\n├── React handles UI event\n├── React calls backend API\n├── Backend validates request\n├── Backend talks to database\n├── Backend returns JSON\n└── React updates UI\n","language":"txt","filename":"","files":"[{\"id\":\"xneaxuf01\",\"name\":\"code\",\"code\":\"User action\\n├── React handles UI event\\n├── React calls backend API\\n├── Backend validates request\\n├── Backend talks to database\\n├── Backend returns JSON\\n└── React updates UI\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0effbc9a-fbc9-48c8-bf37-4690b2fabba5","type":"divider","props":{},"children":[]},{"id":"e3343280-500c-4c23-a1c5-d2c135058d85","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Summary","styles":{}}],"children":[]},{"id":"8605557b-e35a-421f-8185-5e23717b421c","type":"procode","props":{"code":"Fullstack React Project\n├── Good final practice project\n├── Uses React frontend\n├── Uses backend API\n├── Uses database\n├── Uses authentication\n├── Uses protected routes\n├── Uses CRUD operations\n├── Uses service files\n├── Uses backend routes\n├── Uses controller-service pattern\n├── Uses Prisma schema\n├── Uses environment variables\n├── Handles loading and error states\n├── Can be improved with validation and testing\n└── Helps practice real production app architecture\n","language":"txt","filename":"","files":"[{\"id\":\"6er196fw1\",\"name\":\"code\",\"code\":\"Fullstack React Project\\n├── Good final practice project\\n├── Uses React frontend\\n├── Uses backend API\\n├── Uses database\\n├── Uses authentication\\n├── Uses protected routes\\n├── Uses CRUD operations\\n├── Uses service files\\n├── Uses backend routes\\n├── Uses controller-service pattern\\n├── Uses Prisma schema\\n├── Uses environment variables\\n├── Handles loading and error states\\n├── Can be improved with validation and testing\\n└── Helps practice real production app architecture\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a2ef0e61-4efa-4ea5-b602-d0dc2b421ab2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Fullstack React Project is important as a practice project because it teaches how to connect frontend, backend, database, authentication, CRUD features, and deployment into one complete application.","styles":{}}],"children":[]},{"id":"d9cf4ec4-05cb-467c-b71a-bca40980569a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]