// backend/server.js const express = require('express'); const mongoose = require('mongoose'); const cors = require('cors'); const app = express(); // Middleware app.use(cors()); app.use(express.json()); // Connect to MongoDB mongoose.connect('mongodb://localhost:27017/todoapp', { useNewUrlParser: true, useUnifiedTopology: true }); // Todo Model const Todo = mongoose.model('Todo', { title: { type: String, required: true }, completed: { type: Boolean, default: false }, createdAt: { type: Date, default: Date.now } }); // Routes // Get all todos app.get('/api/todos', async (req, res) => { try { const todos = await Todo.find().sort({ createdAt: -1 }); res.json(todos); } catch (error) { res.status(500).json({ error: error.message }); } }); // Create todo app.post('/api/todos', async (req, res) => { try { const todo = new Todo({ title: req.body.title }); await todo.save(); res.status(201).json(todo); } catch (error) { res.status(400).json({ error: error.message }); } }); // Update todo app.put('/api/todos/:id', async (req, res) => { try { const todo = await Todo.findByIdAndUpdate( req.params.id, { completed: req.body.completed }, { new: true } ); res.json(todo); } catch (error) { res.status(400).json({ error: error.message }); } }); // Delete todo app.delete('/api/todos/:id', async (req, res) => { try { await Todo.findByIdAndDelete(req.params.id); res.json({ message: 'Todo deleted' }); } catch (error) { res.status(400).json({ error: error.message }); } }); const PORT = process.env.PORT || 5000; app.listen(PORT, () => { console.log(`Server running on port ${PORT}`); });

// frontend/src/App.js import React, { useState, useEffect } from 'react'; import axios from 'axios'; import './App.css'; const API_URL = 'http://localhost:5000/api/todos'; function App() { const [todos, setTodos] = useState([]); const [newTodo, setNewTodo] = useState(''); const [loading, setLoading] = useState(true); // Fetch todos on component mount useEffect(() => { fetchTodos(); }, []); const fetchTodos = async () => { try { const response = await axios.get(API_URL); setTodos(response.data); setLoading(false); } catch (error) { console.error('Error fetching todos:', error); setLoading(false); } }; const addTodo = async (e) => { e.preventDefault(); if (!newTodo.trim()) return; try { const response = await axios.post(API_URL, { title: newTodo }); setTodos([response.data, ...todos]); setNewTodo(''); } catch (error) { console.error('Error adding todo:', error); } }; const toggleTodo = async (id, completed) => { try { const response = await axios.put(`${API_URL}/${id}`, { completed: !completed }); setTodos(todos.map(todo => todo._id === id ? response.data : todo )); } catch (error) { console.error('Error updating todo:', error); } }; const deleteTodo = async (id) => { try { await axios.delete(`${API_URL}/${id}`); setTodos(todos.filter(todo => todo._id !== id)); } catch (error) { console.error('Error deleting todo:', error); } }; if (loading) return ; return ( ); } export default App;

/* frontend/src/App.css */ .App { max-width: 600px; margin: 50px auto; padding: 20px; font-family: Arial, sans-serif; } h1 { text-align: center; color: #333; } form { display: flex; gap: 10px; margin-bottom: 20px; } input[type="text"] { flex: 1; padding: 10px; border: 2px solid #ddd; border-radius: 5px; font-size: 16px; } button { padding: 10px 20px; background: #f5576c; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; } button:hover { background: #e74c3c; } .todo-list { list-style: none; padding: 0; } .todo-list li { display: flex; align-items: center; gap: 10px; padding: 15px; background: #f8f9fa; margin-bottom: 10px; border-radius: 5px; } .todo-list li.completed span { text-decoration: line-through; color: #999; } .todo-list span { flex: 1; }

// Backend - User authentication const jwt = require('jsonwebtoken'); const bcrypt = require('bcryptjs'); // User Model const User = mongoose.model('User', { email: { type: String, required: true, unique: true }, password: { type: String, required: true }, name: String }); // Register app.post('/api/auth/register', async (req, res) => { try { const { email, password, name } = req.body; // Check if user exists const existingUser = await User.findOne({ email }); if (existingUser) { return res.status(400).json({ error: 'User already exists' }); } // Hash password const hashedPassword = await bcrypt.hash(password, 10); // Create user const user = new User({ email, password: hashedPassword, name }); await user.save(); // Generate token const token = jwt.sign( { userId: user._id }, 'your-secret-key', { expiresIn: '24h' } ); res.status(201).json({ token, user: { id: user._id, email, name } }); } catch (error) { res.status(500).json({ error: error.message }); } }); // Login app.post('/api/auth/login', async (req, res) => { try { const { email, password } = req.body; // Find user const user = await User.findOne({ email }); if (!user) { return res.status(401).json({ error: 'Invalid credentials' }); } // Check password const isValidPassword = await bcrypt.compare(password, user.password); if (!isValidPassword) { return res.status(401).json({ error: 'Invalid credentials' }); } // Generate token const token = jwt.sign( { userId: user._id }, 'your-secret-key', { expiresIn: '24h' } ); res.json({ token, user: { id: user._id, email: user.email, name: user.name } }); } catch (error) { res.status(500).json({ error: error.message }); } }); // Middleware to verify token const authenticate = (req, res, next) => { const token = req.headers.authorization?.split(' ')[1]; if (!token) { return res.status(401).json({ error: 'No token provided' }); } try { const decoded = jwt.verify(token, 'your-secret-key'); req.userId = decoded.userId; next(); } catch (error) { res.status(401).json({ error: 'Invalid token' }); } }; // Protected route app.get('/api/profile', authenticate, async (req, res) => { const user = await User.findById(req.userId).select('-password'); res.json(user); });

# 1. Install Heroku CLI # Download from heroku.com # 2. Login to Heroku heroku login # 3. Create Heroku app heroku create my-fullstack-app # 4. Add MongoDB heroku addons:create mongolab:sandbox # 5. Set environment variables heroku config:set JWT_SECRET=your-secret-key # 6. Deploy git push heroku main # 7. Open app heroku open