Lesson 10. Practical project: Web application (CRUD)
CRUD (Create, Read, Update, Delete) is the foundation of any web application. In this lesson you will build a complete application: viewing a contact list, adding a new one, editing data, and deleting. Frontend + Backend + Database — all using AI.
Topic breakdown
CRUD operations are the core of almost any web app: Create, Read, Update, Delete. For example: in Instagram, creating a post (Create), viewing it (Read), editing it (Update), and deleting it (Delete). Once you master this pattern, you can build any application.
In this lesson we create a 'Contact List' app: adding a new contact, viewing all contacts, editing info, and deleting. It sounds simple, but covers all essential concepts.
Tech stack: React (frontend — what the user sees), Express.js (backend — server logic), and a JSON file or SQLite (database — storing data). The AI creates all parts and ensures they work together.
Important concept: frontend and backend operate separately. Frontend lives in the browser, backend on the server. They communicate via API (HTTP requests). The AI understands this architecture and sets up the correct structure.
What you'll learn
- Practically mastering CRUD operations
- Creating a dynamic UI (user interface) with React
- Writing a simple API server with Express.js
- Understanding Frontend and Backend integration
- Learning data persistence
- Building and testing a complete web application
Deep dive
The CRUD pattern is the foundation of almost all commercial applications: CRM systems (managing clients), inventory systems (goods), blog platforms (articles), e-commerce (orders) — all are CRUD. Once you grasp this pattern, you can apply it in any domain.
Frontend-Backend Architecture: Frontend (React) is what the user sees and interacts with. It sends HTTP requests to the API (via fetch or axios). Backend (Express) receives requests, interacts with the database, and returns responses. This separation of concerns is standard in real projects.
Choosing a Database: In this lesson, we use a JSON file (simplest for learning). For real projects: SQLite (free, local), PostgreSQL (scalable, reliable), MongoDB (document-oriented). The AI knows them all — just specify your choice in the prompt.
Next steps: Based on this CRUD app, you can add authentication (login/register), roles (admin/user), file uploads, pagination, and advanced search. Write a separate AI prompt for each new feature. Thus, a simple CRUD gradually scales into a full SaaS platform.
Ready prompt template
Copy and adaptCreate a complete CRUD web app. Topic: Contact Management. Stack: React + TypeScript (frontend), Express.js (backend), JSON file (database). Features: 1) View all contacts (table format), 2) Add a new contact (form: name, phone, email), 3) Edit contact (modal window), 4) Delete (with confirmation prompt). API endpoints: GET /api/contacts, POST /api/contacts, PUT /api/contacts/:id, DELETE /api/contacts/:id. Project structure: /client (React), /server (Express). npm scripts: dev (to run both concurrently).
Why it works
Stack: 'React + TypeScript + Express.js + JSON' — the full technology suite defined
Features: 4 CRUD operations clearly stated
API design: 'GET, POST, PUT, DELETE' — aligns with REST API standards
Structure: '/client, /server' — frontend and backend separated in folders
DX: 'npm scripts: dev' — convenience for startup
Practice
- Create a new folder: 'contacts-app' and open in Cursor
- In Agent mode, enter the prompt above
- Review all the files generated by Agent
- In terminal: run 'npm install' in both folders, then 'npm run dev' in the root
- Open localhost:3000 in your browser and test the app
- Add a new contact, edit it, and delete it
- In Chat, ask: 'Add a search function — filter by name'
- Verify the result and ensure it works properly
Common mistakes
- Using the same port for frontend and backend — typically frontend is :3000, backend is :4000
- Forgetting CORS setup — in Express, you must add cors() middleware
- Skipping data validation — empty names or invalid emails must be checked
- Failing to show error states — UI is needed for loading, error, and empty states
- Not testing the API separately — check API functionality via Postman or curl
Lesson FAQ
Is a JSON file reliable as a database?
For learning and small projects — yes. When you exceed 100+ users or require frequent writes, transition to SQLite or PostgreSQL. The AI can help with migration.
Can I use another framework instead of React?
Yes. Vue, Svelte, or even vanilla JavaScript — any can be used to build CRUD. The AI knows them all; just mention the framework in the prompt.
Can this app be hosted online?
Yes. The frontend on Vercel/Netlify, and the backend on Railway/Render. All within free tiers. In the next lesson, we'll cover deployment in detail.