Day 30 - Final Project

Zemerik · Zemerik · commit 9c5146a2890c · 2025-05-06T14:37:38.000+10:00
diff --git a/Day 30 - Final Project/README.md b/Day 30 - Final Project/README.md
@@ -0,0 +1,25 @@
+# Day 30: Final Project
+
+## What You'll Learn:
+- Integrated frontend/backend development
+- REST API design
+- Database integration
+- User authentication
+- Deployment considerations
+
+## Files:
+1. `app/` - Flask backend
+2. `templates/` - Frontend HTML templates
+3. `static/` - CSS/JavaScript files
+4. `requirements.txt` - Dependencies
+5. `database.py` - SQLAlchemy models
+
+## Exercises:
+1. Extend the application to:
+   - Add user registration/login functionality
+   - Implement email notifications
+   - Add search/filter capabilities
+2. Deploy the application to:
+   - Cloud platform (Heroku/DigitalOcean)
+   - Configure production database
+   - Set up CI/CD pipeline
diff --git a/Day 30 - Final Project/Running.mdx b/Day 30 - Final Project/Running.mdx
@@ -0,0 +1,9 @@
+```bash
+# Install dependencies
+pip install -r requirements.txt
+
+# Start application
+python app.py
+
+# Access at http://localhost:5000
+```
diff --git a/Day 30 - Final Project/app.py b/Day 30 - Final Project/app.py
@@ -0,0 +1,33 @@
+from flask import Flask, render_template, jsonify, request
+from database import db, Task
+
+app = Flask(__name__)
+app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///tasks.db'
+db.init_app(app)
+
+@app.route('/')
+def home():
+    return render_template('index.html')
+
+@app.route('/api/tasks', methods=['GET', 'POST'])
+def tasks():
+    if request.method == 'POST':
+        new_task = Task(
+            title=request.json['title'],
+            description=request.json.get('description', '')
+        )
+        db.session.add(new_task)
+        db.session.commit()
+        return jsonify({"message": "Task created"}), 201
+    
+    tasks = Task.query.all()
+    return jsonify([{
+        "id": task.id,
+        "title": task.title,
+        "description": task.description
+    } for task in tasks])
+
+if __name__ == '__main__':
+    with app.app_context():
+        db.create_all()
+    app.run(debug=True)
diff --git a/Day 30 - Final Project/database.py b/Day 30 - Final Project/database.py
@@ -0,0 +1,10 @@
+from sqlalchemy import create_engine, Column, Integer, String, Text
+from sqlalchemy.orm import declarative_base
+
+Base = declarative_base()
+
+class Task(Base):
+    __tablename__ = 'tasks'
+    id = Column(Integer, primary_key=True)
+    title = Column(String(100), nullable=False)
+    description = Column(Text)
diff --git a/Day 30 - Final Project/requirements.txt b/Day 30 - Final Project/requirements.txt
@@ -0,0 +1,2 @@
+Flask==2.3.2
+SQLAlchemy==2.0.20
diff --git a/Day 30 - Final Project/static/app.js b/Day 30 - Final Project/static/app.js
@@ -0,0 +1,39 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const form = document.getElementById('taskForm');
+    const taskList = document.getElementById('taskList');
+
+    // Load tasks on startup
+    fetch('/api/tasks')
+        .then(res => res.json())
+        .then(tasks => renderTasks(tasks));
+
+    form.addEventListener('submit', (e) => {
+        e.preventDefault();
+        const newTask = {
+            title: document.getElementById('title').value,
+            description: document.getElementById('description').value
+        };
+
+        fetch('/api/tasks', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify(newTask)
+        })
+        .then(() => location.reload());
+    });
+
+    function renderTasks(tasks) {
+        taskList.innerHTML = tasks.map(task => `
+            <div class="task">
+                <h3>${task.title}</h3>
+                <p>${task.description}</p>
+                <button onclick="deleteTask(${task.id})">Complete</button>
+            </div>
+        `).join('');
+    }
+});
+
+function deleteTask(id) {
+    fetch(`/api/tasks/${id}`, { method: 'DELETE' })
+        .then(() => location.reload());
+}
diff --git a/Day 30 - Final Project/templates/index.html b/Day 30 - Final Project/templates/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Task Manager</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+</head>
+<body>
+    <div class="container">
+        <h1>Task Manager</h1>
+        <form id="taskForm">
+            <input type="text" id="title" placeholder="Task title" required>
+            <textarea id="description" placeholder="Description"></textarea>
+            <button type="submit">Add Task</button>
+        </form>
+        <div id="taskList"></div>
+    </div>
+    <script src="{{ url_for('static', filename='app.js') }}"></script>
+</body>
+</html>
