Project Description
REACT JS CODE
import React, { useEffect, useState } from 'react';
import axios from 'axios';
function App() {
const [items, setItems] = useState([]);
const [newItem, setNewItem] = useState('');
const [editingIndex, setEditingIndex] = useState(null);
const [editingText, setEditingText] = useState('');
const API_URL = 'http://localhost:5000/items';
const fetchItems = async () => {
try {
const response = await axios.get(API_URL);
setItems(response.data);
} catch (error) {
console.error('Error fetching items:', error);
}
};
useEffect(() => {
fetchItems();
}, []);
const addItem = async () => {
if (newItem.trim()) {
try {
const response = await axios.post(API_URL, { name: newItem });
setItems([...items, response.data]);
setNewItem('');
} catch (error) {
console.error('Error adding item:', error);
}
}
};
const deleteItem = async (id) => {
try {
await axios.delete(`${API_URL}/${id}`);
setItems(items.filter(item => item.id !== id));
} catch (error) {
console.error('Error deleting item:', error);
}
};
const editItem = (index) => {
setEditingIndex(index);
setEditingText(items[index].name);
};
const updateItem = async (id) => {
const updatedItem = { name: editingText };
try {
const response = await axios.put(`${API_URL}/${id}`, updatedItem);
const updatedItems = items.map((item, index) => (index === editingIndex ? response.data : item));
setItems(updatedItems);
setEditingIndex(null);
setEditingText('');
} catch (error) {
console.error('Error updating item:', error);
}
};
return (
<div className="min-h-screen bg-gray-100 flex items-center justify-center p-5">
<div className="bg-white shadow-md rounded-lg p-6 max-w-md w-full">
<h1 className="text-2xl font-bold text-center mb-4">CRUD To Do App in React</h1>
{/* Add Item */}
<div className="flex items-center space-x-2 mb-4">
<input
type="text"
value={newItem}
onChange={(e) => setNewItem(e.target.value)}
placeholder="Enter new item"
className="border p-2 rounded w-full"
/>
<button onClick={addItem} className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
Add
</button>
</div>
{/* Item List */}
<ul className="space-y-2">
{items.map((item, index) => (
<li key={item.id} className="flex justify-between items-center bg-gray-100 p-2 rounded">
{editingIndex === index ? (
<input
type="text"
value={editingText}
onChange={(e) => setEditingText(e.target.value)}
className="border p-2 rounded w-full"
/>
) : (
<span>{item.name}</span>
)}
<div className="space-x-2 flex">
{editingIndex === index ? (
<button onClick={() => updateItem(item.id)} className="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 ml-2">
Save
</button>
) : (
<button
onClick={() => editItem(index)}
className="bg-yellow-500 text-white px-4 py-2 rounded hover:bg-yellow-600"
>
Edit
</button>
)}
{editingIndex === index ? (
<button
onClick={() => setEditingIndex(null)}
className="bg-slate-500 text-white px-4 py-2 rounded hover:bg-red-600"
>
Cancel
</button>
) : (
<button
onClick={() => deleteItem(item.id)}
className="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600"
>
Delete
</button>
)}
</div>
</li>
))}
</ul>
</div>
</div>
);
}
export default App;
EXPRESS JS CODE
const express = require('express');
const sqlite3 = require('sqlite3').verbose();
const cors = require('cors'); // Import cors
const app = express();
const PORT = 5000;
// Use CORS middleware
app.use(cors({
origin: 'http://localhost:3000' // Allow requests from this origin
}));
app.use(express.json());
// Open a database connection to a file
const db = new sqlite3.Database('mydatabase.db'); // Replace with your database file path
// Initialize the database
db.serialize(() => {
db.get("SELECT name FROM sqlite_master WHERE type='table' AND name='items'", (err, row) => {
if (err) {
console.error('Error checking table existence:', err);
return;
}
if (!row) {
db.run("CREATE TABLE items (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT)", (err) => {
if (err) {
console.error('Error creating table:', err);
} else {
console.log('Table created successfully');
}
});
} else {
console.log('Table already exists');
}
});
});
// CRUD operations (unchanged)
app.post('/items', (req, res) => {
const { name } = req.body;
if (!name) {
return res.status(400).json({ message: 'Name is are required' });
}
const stmt = db.prepare("INSERT INTO items (name) VALUES (?)");
stmt.run(name, function (err) {
if (err) {
return res.status(500).json({ message: 'Database error' });
}
res.status(201).json({ id: this.lastID, name });
});
stmt.finalize();
});
app.get('/items', (req, res) => {
db.all("SELECT * FROM items", (err, rows) => {
if (err) {
return res.status(500).json({ message: 'Database error' });
}
res.json(rows);
});
});
app.get('/items/:id', (req, res) => {
const id = parseInt(req.params.id);
db.get("SELECT * FROM items WHERE id = ?", [id], (err, row) => {
if (err) {
return res.status(500).json({ message: 'Database error' });
}
if (!row) {
return res.status(404).json({ message: 'Item not found' });
}
res.json(row);
});
});
app.put('/items/:id', (req, res) => {
const id = parseInt(req.params.id);
const { name } = req.body;
if (!name) {
return res.status(400).json({ message: 'Name is required' });
}
const stmt = db.prepare("UPDATE items SET name = ? WHERE id = ?");
stmt.run(name, id, function (err) {
if (err) {
return res.status(500).json({ message: 'Database error' });
}
if (this.changes === 0) {
return res.status(404).json({ message: 'Item not found' });
}
res.json({ id, name });
});
stmt.finalize();
});
app.delete('/items/:id', (req, res) => {
const id = parseInt(req.params.id);
const stmt = db.prepare("DELETE FROM items WHERE id = ?");
stmt.run(id, function (err) {
if (err) {
return res.status(500).json({ message: 'Database error' });
}
if (this.changes === 0) {
return res.status(404).json({ message: 'Item not found' });
}
res.status(204).end(); // No content to send back
});
stmt.finalize();
});
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});