"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", h1: "h1", h2: "h2", h3: "h3", li: "li", ol: "ol", p: "p", pre: "pre", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }, {BestStack, MeetMentor, TalkToOur} = _components; if (!BestStack) _missingMdxReference("BestStack", true); if (!MeetMentor) _missingMdxReference("MeetMentor", true); if (!TalkToOur) _missingMdxReference("TalkToOur", true); return _jsxs(_Fragment, { children: [_jsx(_components.h1, { children: "Building Your First CRUD Application: A Step-by-Step Guide" }), "\n", _jsx(_components.p, { children: "Learn how to create a complete CRUD (Create, Read, Update, Delete) application from scratch using modern web technologies." }), "\n", _jsx(_components.h2, { children: "Understanding CRUD Operations" }), "\n", _jsx(_components.p, { children: "CRUD represents the four basic operations of persistent storage:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Create" }), ": Adding new records"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Read" }), ": Retrieving existing records"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Update" }), ": Modifying existing records"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Delete" }), ": Removing records"] }), "\n"] }), "\n", _jsx(_components.h2, { children: "Project Setup" }), "\n", _jsx(_components.p, { children: "Let's create a simple Task Management application using React and Node.js." }), "\n", _jsx(_components.h3, { children: "1. Frontend Setup" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-jsx", children: "// App.js\nimport React, { useState, useEffect } from 'react';\nimport axios from 'axios';\n\nfunction App() {\n const [tasks, setTasks] = useState([]);\n const [newTask, setNewTask] = useState('');\n\n useEffect(() => {\n fetchTasks();\n }, []);\n\n const fetchTasks = async () => {\n try {\n const response = await axios.get('http://localhost:5000/api/tasks');\n setTasks(response.data);\n } catch (error) {\n console.error('Error fetching tasks:', error);\n }\n };\n\n return (\n

Task Manager

\n {/* Task form and list will go here */}\n

\n );\n}\n\nexport default App;\n" }) }), "\n", _jsx(BestStack, {}), "\n", _jsx(_components.h3, { children: "2. Backend Setup" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "// server.js\nconst express = require('express');\nconst cors = require('cors');\nconst app = express();\n\napp.use(cors());\napp.use(express.json());\n\nlet tasks = [];\n\n// Create\napp.post('/api/tasks', (req, res) => {\n const task = {\n id: Date.now(),\n title: req.body.title,\n completed: false\n };\n tasks.push(task);\n res.status(201).json(task);\n});\n\n// Read\napp.get('/api/tasks', (req, res) => {\n res.json(tasks);\n});\n\n// Update\napp.put('/api/tasks/:id', (req, res) => {\n const task = tasks.find(t => t.id === parseInt(req.params.id));\n if (!task) return res.status(404).json({ message: 'Task not found' });\n \n task.title = req.body.title;\n task.completed = req.body.completed;\n res.json(task);\n});\n\n// Delete\napp.delete('/api/tasks/:id', (req, res) => {\n const taskIndex = tasks.findIndex(t => t.id === parseInt(req.params.id));\n if (taskIndex === -1) return res.status(404).json({ message: 'Task not found' });\n \n tasks.splice(taskIndex, 1);\n res.status(204).send();\n});\n\napp.listen(5000, () => {\n console.log('Server running on port 5000');\n});\n" }) }), "\n", _jsx(_components.h2, { children: "Implementing CRUD Operations" }), "\n", _jsx(_components.h3, { children: "1. Create Operation" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-jsx", children: "// TaskForm.js\nconst TaskForm = ({ onAddTask }) => {\n const [title, setTitle] = useState('');\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n try {\n const response = await axios.post('http://localhost:5000/api/tasks', {\n title\n });\n onAddTask(response.data);\n setTitle('');\n } catch (error) {\n console.error('Error creating task:', error);\n }\n };\n\n return (\n

\n setTitle(e.target.value)}\n placeholder=\"Add new task\"\n className=\"border p-2 mr-2\"\n />\n \n \n );\n};\n" }) }), "\n", _jsx(_components.h3, { children: "2. Read Operation" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-jsx", children: "// TaskList.js\nconst TaskList = ({ tasks, onUpdateTask, onDeleteTask }) => {\n return (\n

\n {tasks.map(task => (\n

\n \n {task.title}\n \n

\n onUpdateTask(task.id, { ...task, completed: !task.completed })}\n className=\"text-green-500\"\n >\n {task.completed ? 'Undo' : 'Complete'}\n \n onDeleteTask(task.id)}\n className=\"text-red-500\"\n >\n Delete\n \n

\n ))}\n

\n );\n};\n" }) }), "\n", _jsx(_components.h3, { children: "3. Update Operation" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-jsx", children: "// Update task function\nconst updateTask = async (id, updatedTask) => {\n try {\n const response = await axios.put(`http://localhost:5000/api/tasks/${id}`, updatedTask);\n setTasks(tasks.map(task => \n task.id === id ? response.data : task\n ));\n } catch (error) {\n console.error('Error updating task:', error);\n }\n};\n" }) }), "\n", _jsx(_components.h3, { children: "4. Delete Operation" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-jsx", children: "// Delete task function\nconst deleteTask = async (id) => {\n try {\n await axios.delete(`http://localhost:5000/api/tasks/${id}`);\n setTasks(tasks.filter(task => task.id !== id));\n } catch (error) {\n console.error('Error deleting task:', error);\n }\n};\n" }) }), "\n", _jsx(_components.h2, { children: "Adding Error Handling" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-jsx", children: "// Error handling component\nconst ErrorMessage = ({ message }) => {\n return (\n

\n {message}\n

\n );\n};\n\n// Usage in App.js\nconst [error, setError] = useState(null);\n\n// In your API calls\ntry {\n // API call\n} catch (error) {\n setError(error.response?.data?.message || 'An error occurred');\n}\n" }) }), "\n", _jsx(TalkToOur, {}), "\n", _jsx(_components.h2, { children: "Adding Loading States" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-jsx", children: "// Loading state component\nconst LoadingSpinner = () => {\n return (\n

\n );\n};\n\n// Usage in App.js\nconst [loading, setLoading] = useState(false);\n\n// In your API calls\nsetLoading(true);\ntry {\n // API call\n} finally {\n setLoading(false);\n}\n" }) }), "\n", _jsx(_components.h2, { children: "Best Practices" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: ["\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "State Management" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Use proper state management for larger applications" }), "\n", _jsx(_components.li, { children: "Consider using Redux or Context API" }), "\n", _jsx(_components.li, { children: "Keep state as local as possible" }), "\n"] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Error Handling" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Implement proper error boundaries" }), "\n", _jsx(_components.li, { children: "Show user-friendly error messages" }), "\n", _jsx(_components.li, { children: "Log errors for debugging" }), "\n"] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Performance" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Implement pagination for large datasets" }), "\n", _jsx(_components.li, { children: "Use proper indexing in the database" }), "\n", _jsx(_components.li, { children: "Optimize API calls" }), "\n"] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Security" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Implement proper authentication" }), "\n", _jsx(_components.li, { children: "Validate input data" }), "\n", _jsx(_components.li, { children: "Use HTTPS" }), "\n", _jsx(_components.li, { children: "Implement rate limiting" }), "\n"] }), "\n"] }), "\n"] }), "\n", _jsx(_components.h2, { children: "Testing Your CRUD Application" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "// Example test using Jest\ndescribe('Task API', () => {\n test('should create a new task', async () => {\n const response = await axios.post('http://localhost:5000/api/tasks', {\n title: 'Test Task'\n });\n expect(response.status).toBe(201);\n expect(response.data.title).toBe('Test Task');\n });\n\n test('should get all tasks', async () => {\n const response = await axios.get('http://localhost:5000/api/tasks');\n expect(response.status).toBe(200);\n expect(Array.isArray(response.data)).toBe(true);\n });\n});\n" }) }), "\n", _jsx(_components.h2, { children: "Conclusion" }), "\n", _jsx(_components.p, { children: "Building a CRUD application is a fundamental skill for web developers. This guide has covered:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Setting up a full-stack application" }), "\n", _jsx(_components.li, { children: "Implementing all CRUD operations" }), "\n", _jsx(_components.li, { children: "Adding error handling and loading states" }), "\n", _jsx(_components.li, { children: "Following best practices" }), "\n", _jsx(_components.li, { children: "Testing the application" }), "\n"] }), "\n", _jsx(_components.p, { children: "Remember to:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Keep your code organized" }), "\n", _jsx(_components.li, { children: "Follow security best practices" }), "\n", _jsx(_components.li, { children: "Write tests for your application" }), "\n", _jsx(_components.li, { children: "Handle errors gracefully" }), "\n", _jsx(_components.li, { children: "Consider scalability from the start" }), "\n"] }), "\n", _jsx(MeetMentor, {}), "\n", _jsx(_components.h2, { children: "Next Steps" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Add user authentication" }), "\n", _jsx(_components.li, { children: "Implement a proper database" }), "\n", _jsxs(_components.li, { children: ["Add more features like:", "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Task categories" }), "\n", _jsx(_components.li, { children: "Due dates" }), "\n", _jsx(_components.li, { children: "Priority levels" }), "\n", _jsx(_components.li, { children: "Search functionality" }), "\n"] }), "\n"] }), "\n"] }), "\n", _jsx(_components.h2, { children: "Resources" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://reactjs.org/docs/getting-started.html", children: "React Documentation" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://expressjs.com/", children: "Express.js Documentation" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://docs.mongodb.com/", children: "MongoDB Documentation" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://jestjs.io/docs/getting-started", children: "Jest Documentation" }) }), "\n"] }), "\n", _jsx(_components.h2, { children: "Citations" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://reactjs.org/docs/state-and-lifecycle.html", children: "React Documentation - State and Lifecycle" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://expressjs.com/en/api.html", children: "Express.js - API Reference" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://docs.mongodb.com/manual/crud/", children: "MongoDB - CRUD Operations" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://jestjs.io/docs/getting-started", children: "Jest - Testing Framework" }) }), "\n"] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }