initial commit

Dockerfile

@@ -0,0 +1,11 @@
+FROM python:3.11-slim
+
+WORKDIR /app
+
+COPY . .
+
+RUN pip install --no-cache-dir -r requirements.txt
+
+EXPOSE 7860
+
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -0,0 +1,54 @@
+# Quick Notes MVP
+
+Quick Notes is a beginner-friendly portfolio project that demonstrates full CRUD with a FastAPI backend, SQLite database, and a vanilla HTML/CSS/JavaScript frontend.
+
+## Stack
+
+- Backend: FastAPI
+- Database: SQLite
+- Frontend: HTML, CSS, Vanilla JavaScript
+- Deployment target: Hugging Face Spaces (Docker)
+
+## Core Features
+
+- Create note
+- View all notes (latest first)
+- Edit note
+- Delete note
+- Store and display timestamps (`created_at`, `updated_at`)
+
+## Nice Features
+
+- Search notes by keyword
+- Character counter
+- Copy note button
+- Dark mode toggle
+
+## Database Schema
+
+`notes(id, content, created_at, updated_at)`
+
+## API Endpoints
+
+- `POST /notes`
+- `GET /notes`
+- `PUT /notes/{id}`
+- `DELETE /notes/{id}`
+
+## Run Locally
+
+```bash
+pip install -r requirements.txt
+uvicorn app:app --reload
+```
+
+Open `http://127.0.0.1:8000`.
+
+## Docker
+
+```bash
+docker build -t quick-notes .
+docker run -p 7860:7860 quick-notes
+```
+
+Open `http://127.0.0.1:7860`.

app.py

@@ -0,0 +1,144 @@
+import sqlite3
+from datetime import datetime
+from pathlib import Path
+
+from fastapi import FastAPI, HTTPException
+from fastapi.responses import FileResponse
+from fastapi.staticfiles import StaticFiles
+from pydantic import BaseModel, Field
+
+BASE_DIR = Path(__file__).resolve().parent
+DB_PATH = BASE_DIR / "notes.db"
+
+app = FastAPI(title="Quick Notes MVP")
+
+
+class NotePayload(BaseModel):
+    content: str = Field(..., min_length=1)
+
+
+def get_connection() -> sqlite3.Connection:
+    connection = sqlite3.connect(DB_PATH)
+    connection.row_factory = sqlite3.Row
+    return connection
+
+
+def init_db() -> None:
+    connection = get_connection()
+    connection.execute(
+        """
+        CREATE TABLE IF NOT EXISTS notes (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            content TEXT NOT NULL,
+            created_at TEXT NOT NULL,
+            updated_at TEXT NOT NULL
+        )
+        """
+    )
+    connection.commit()
+    connection.close()
+
+
+def row_to_dict(row: sqlite3.Row) -> dict:
+    return {
+        "id": row["id"],
+        "content": row["content"],
+        "created_at": row["created_at"],
+        "updated_at": row["updated_at"],
+    }
+
+
+@app.on_event("startup")
+def on_startup() -> None:
+    init_db()
+
+
+app.mount("/static", StaticFiles(directory=BASE_DIR / "static"), name="static")
+
+
+@app.get("/")
+def home() -> FileResponse:
+    return FileResponse(BASE_DIR / "static" / "index.html")
+
+
+@app.get("/notes")
+def get_notes() -> list[dict]:
+    connection = get_connection()
+    rows = connection.execute(
+        (
+            "SELECT id, content, created_at, updated_at "
+            "FROM notes ORDER BY id DESC"
+        )
+    ).fetchall()
+    connection.close()
+    return [row_to_dict(row) for row in rows]
+
+
+@app.post("/notes")
+def create_note(payload: NotePayload) -> dict:
+    content = payload.content.strip()
+    if not content:
+        raise HTTPException(
+            status_code=400,
+            detail="Note content cannot be empty",
+        )
+
+    now = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
+
+    connection = get_connection()
+    cursor = connection.execute(
+        "INSERT INTO notes (content, created_at, updated_at) VALUES (?, ?, ?)",
+        (content, now, now),
+    )
+    connection.commit()
+    note_id = cursor.lastrowid
+    row = connection.execute(
+        "SELECT id, content, created_at, updated_at FROM notes WHERE id = ?",
+        (note_id,),
+    ).fetchone()
+    connection.close()
+
+    return row_to_dict(row)
+
+
+@app.put("/notes/{note_id}")
+def update_note(note_id: int, payload: NotePayload) -> dict:
+    content = payload.content.strip()
+    if not content:
+        raise HTTPException(
+            status_code=400,
+            detail="Note content cannot be empty",
+        )
+
+    now = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
+
+    connection = get_connection()
+    cursor = connection.execute(
+        "UPDATE notes SET content = ?, updated_at = ? WHERE id = ?",
+        (content, now, note_id),
+    )
+    connection.commit()
+
+    if cursor.rowcount == 0:
+        connection.close()
+        raise HTTPException(status_code=404, detail="Note not found")
+
+    row = connection.execute(
+        "SELECT id, content, created_at, updated_at FROM notes WHERE id = ?",
+        (note_id,),
+    ).fetchone()
+    connection.close()
+    return row_to_dict(row)
+
+
+@app.delete("/notes/{note_id}")
+def delete_note(note_id: int) -> dict:
+    connection = get_connection()
+    cursor = connection.execute("DELETE FROM notes WHERE id = ?", (note_id,))
+    connection.commit()
+    connection.close()
+
+    if cursor.rowcount == 0:
+        raise HTTPException(status_code=404, detail="Note not found")
+
+    return {"message": "Note deleted"}

requirements.txt

@@ -0,0 +1,2 @@
+fastapi
+uvicorn

static/app.js

@@ -0,0 +1,161 @@
+const noteInput = document.getElementById("note-input");
+const charCount = document.getElementById("char-count");
+const saveBtn = document.getElementById("save-btn");
+const searchInput = document.getElementById("search-input");
+const notesList = document.getElementById("notes-list");
+const emptyState = document.getElementById("empty-state");
+const noteTemplate = document.getElementById("note-template");
+const themeToggle = document.getElementById("theme-toggle");
+
+let notes = [];
+let editingNoteId = null;
+
+const THEME_KEY = "quick-notes-theme";
+
+function formatDate(dateString) {
+  const date = new Date(dateString.replace(" ", "T"));
+  if (Number.isNaN(date.getTime())) {
+    return dateString;
+  }
+  return date.toLocaleString();
+}
+
+function updateCounter() {
+  charCount.textContent = `${noteInput.value.length} characters`;
+}
+
+function applySavedTheme() {
+  const saved = localStorage.getItem(THEME_KEY);
+  if (saved === "dark") {
+    document.body.classList.add("dark");
+  }
+}
+
+function toggleTheme() {
+  document.body.classList.toggle("dark");
+  const active = document.body.classList.contains("dark") ? "dark" : "light";
+  localStorage.setItem(THEME_KEY, active);
+}
+
+async function fetchNotes() {
+  const response = await fetch("/notes");
+  if (!response.ok) {
+    throw new Error("Failed to fetch notes");
+  }
+  notes = await response.json();
+  renderNotes();
+}
+
+async function saveNote() {
+  const content = noteInput.value.trim();
+  if (!content) {
+    alert("Please write a note before saving.");
+    return;
+  }
+
+  const method = editingNoteId ? "PUT" : "POST";
+  const endpoint = editingNoteId ? `/notes/${editingNoteId}` : "/notes";
+
+  const response = await fetch(endpoint, {
+    method,
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ content }),
+  });
+
+  if (!response.ok) {
+    alert("Could not save note.");
+    return;
+  }
+
+  editingNoteId = null;
+  noteInput.value = "";
+  updateCounter();
+  saveBtn.textContent = "Save Note";
+  await fetchNotes();
+}
+
+async function deleteNote(noteId) {
+  const confirmed = confirm("Delete this note?");
+  if (!confirmed) {
+    return;
+  }
+
+  const response = await fetch(`/notes/${noteId}`, { method: "DELETE" });
+  if (!response.ok) {
+    alert("Could not delete note.");
+    return;
+  }
+
+  if (editingNoteId === noteId) {
+    editingNoteId = null;
+    noteInput.value = "";
+    saveBtn.textContent = "Save Note";
+    updateCounter();
+  }
+
+  await fetchNotes();
+}
+
+async function copyNote(content) {
+  try {
+    await navigator.clipboard.writeText(content);
+    alert("Note copied.");
+  } catch (error) {
+    alert("Clipboard copy failed.");
+  }
+}
+
+function beginEdit(note) {
+  editingNoteId = note.id;
+  noteInput.value = note.content;
+  saveBtn.textContent = "Update Note";
+  updateCounter();
+  noteInput.focus();
+}
+
+function renderNotes() {
+  const query = searchInput.value.trim().toLowerCase();
+  const filteredNotes = notes.filter((note) =>
+    note.content.toLowerCase().includes(query)
+  );
+
+  notesList.innerHTML = "";
+
+  if (filteredNotes.length === 0) {
+    emptyState.style.display = "block";
+    emptyState.textContent = query
+      ? "No notes matched your search."
+      : "No notes yet. Save your first one.";
+    return;
+  }
+
+  emptyState.style.display = "none";
+
+  filteredNotes.forEach((note, index) => {
+    const fragment = noteTemplate.content.cloneNode(true);
+    const noteItem = fragment.querySelector(".note-item");
+
+    noteItem.style.animationDelay = `${index * 45}ms`;
+    fragment.querySelector(".note-content").textContent = note.content;
+    fragment.querySelector(".note-created").textContent = `Created: ${formatDate(note.created_at)}`;
+    fragment.querySelector(".note-updated").textContent = `Updated: ${formatDate(note.updated_at)}`;
+
+    fragment.querySelector(".edit-btn").addEventListener("click", () => beginEdit(note));
+    fragment.querySelector(".delete-btn").addEventListener("click", () => deleteNote(note.id));
+    fragment.querySelector(".copy-btn").addEventListener("click", () => copyNote(note.content));
+
+    notesList.appendChild(fragment);
+  });
+}
+
+noteInput.addEventListener("input", updateCounter);
+saveBtn.addEventListener("click", saveNote);
+searchInput.addEventListener("input", renderNotes);
+themeToggle.addEventListener("click", toggleTheme);
+
+applySavedTheme();
+updateCounter();
+fetchNotes().catch(() => {
+  emptyState.style.display = "block";
+  emptyState.textContent = "Could not load notes. Refresh to retry.";
+});

static/index.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Quick Notes</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=DM+Serif+Display:ital@0;1&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="/static/style.css" />
+</head>
+<body>
+  <div class="ambient ambient-a"></div>
+  <div class="ambient ambient-b"></div>
+
+  <main class="shell">
+    <section class="header-card">
+      <p class="eyebrow">Quick Notes MVP</p>
+      <h1>Write fast. Find later.</h1>
+      <p class="subtitle">A lightweight notes board powered by FastAPI and SQLite.</p>
+      <button id="theme-toggle" class="theme-toggle" type="button">Toggle Dark Mode</button>
+    </section>
+
+    <section class="composer card">
+      <label for="note-input">Your note</label>
+      <textarea id="note-input" rows="5" placeholder="Capture thoughts, todos, and ideas..."></textarea>
+      <div class="composer-footer">
+        <span id="char-count">0 characters</span>
+        <button id="save-btn" type="button">Save Note</button>
+      </div>
+    </section>
+
+    <section class="notes-panel card">
+      <div class="notes-toolbar">
+        <h2>All Notes</h2>
+        <input id="search-input" type="search" placeholder="Search notes..." />
+      </div>
+      <p id="empty-state" class="empty-state">No notes yet. Save your first one.</p>
+      <div id="notes-list" class="notes-list"></div>
+    </section>
+  </main>
+
+  <template id="note-template">
+    <article class="note-item">
+      <p class="note-content"></p>
+      <div class="note-meta">
+        <span class="note-created"></span>
+        <span class="note-updated"></span>
+      </div>
+      <div class="note-actions">
+        <button class="copy-btn" type="button">Copy</button>
+        <button class="edit-btn" type="button">Edit</button>
+        <button class="delete-btn" type="button">Delete</button>
+      </div>
+    </article>
+  </template>
+
+  <script src="/static/app.js"></script>
+</body>
+</html>

static/style.css

@@ -0,0 +1,251 @@
+:root {
+  --bg: #f7f4ef;
+  --bg-soft: #efe8dc;
+  --card: rgba(255, 255, 255, 0.78);
+  --text: #1f2328;
+  --muted: #61656b;
+  --accent: #d74722;
+  --accent-strong: #ac3418;
+  --border: rgba(31, 35, 40, 0.12);
+  --shadow: 0 18px 50px rgba(0, 0, 0, 0.14);
+}
+
+body.dark {
+  --bg: #14181d;
+  --bg-soft: #1d2530;
+  --card: rgba(31, 39, 50, 0.72);
+  --text: #eef2f7;
+  --muted: #adb8c5;
+  --accent: #ff8b44;
+  --accent-strong: #ff7331;
+  --border: rgba(255, 255, 255, 0.15);
+  --shadow: 0 18px 55px rgba(0, 0, 0, 0.4);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  font-family: "Space Grotesk", sans-serif;
+  color: var(--text);
+  background:
+    radial-gradient(circle at 10% 10%, rgba(215, 71, 34, 0.16), transparent 45%),
+    radial-gradient(circle at 80% 95%, rgba(33, 126, 204, 0.18), transparent 40%),
+    linear-gradient(160deg, var(--bg), var(--bg-soft));
+  overflow-x: hidden;
+}
+
+.ambient {
+  position: fixed;
+  width: 350px;
+  height: 350px;
+  border-radius: 50%;
+  filter: blur(65px);
+  z-index: -1;
+  pointer-events: none;
+}
+
+.ambient-a {
+  top: -80px;
+  left: -60px;
+  background: rgba(239, 129, 69, 0.45);
+}
+
+.ambient-b {
+  right: -110px;
+  bottom: -90px;
+  background: rgba(53, 146, 226, 0.35);
+}
+
+.shell {
+  width: min(980px, 92vw);
+  margin: 2.5rem auto;
+  display: grid;
+  gap: 1.1rem;
+  animation: rise-in 480ms ease;
+}
+
+.header-card h1 {
+  font-family: "DM Serif Display", serif;
+  font-size: clamp(2rem, 3.2vw, 3rem);
+  margin: 0.2rem 0;
+}
+
+.eyebrow {
+  margin: 0;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--muted);
+  font-size: 0.82rem;
+}
+
+.subtitle {
+  margin-top: 0.5rem;
+  color: var(--muted);
+}
+
+.card,
+.header-card {
+  backdrop-filter: blur(8px);
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 22px;
+  padding: 1rem 1.1rem;
+  box-shadow: var(--shadow);
+}
+
+.theme-toggle,
+button {
+  border: 0;
+  border-radius: 12px;
+  background: var(--accent);
+  color: #fff;
+  font-weight: 700;
+  cursor: pointer;
+  transition: transform 180ms ease, background 180ms ease;
+}
+
+button:hover {
+  transform: translateY(-1px);
+  background: var(--accent-strong);
+}
+
+.theme-toggle {
+  padding: 0.55rem 0.85rem;
+}
+
+.composer {
+  display: grid;
+  gap: 0.7rem;
+}
+
+.composer textarea,
+.notes-toolbar input {
+  width: 100%;
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 0.8rem;
+  font: inherit;
+  color: var(--text);
+  background: rgba(255, 255, 255, 0.4);
+}
+
+body.dark .composer textarea,
+body.dark .notes-toolbar input {
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.composer-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+#save-btn {
+  padding: 0.65rem 1rem;
+}
+
+#char-count {
+  color: var(--muted);
+  font-size: 0.93rem;
+}
+
+.notes-toolbar {
+  display: grid;
+  grid-template-columns: 1fr minmax(200px, 320px);
+  gap: 0.8rem;
+  align-items: center;
+}
+
+.notes-toolbar h2 {
+  margin: 0;
+}
+
+.notes-list {
+  margin-top: 0.9rem;
+  display: grid;
+  gap: 0.8rem;
+}
+
+.note-item {
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  padding: 0.9rem;
+  background: rgba(255, 255, 255, 0.45);
+  opacity: 0;
+  transform: translateY(7px);
+  animation: note-in 260ms ease forwards;
+}
+
+body.dark .note-item {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.note-content {
+  margin: 0;
+  white-space: pre-wrap;
+}
+
+.note-meta {
+  display: flex;
+  gap: 1rem;
+  margin-top: 0.7rem;
+  color: var(--muted);
+  font-size: 0.83rem;
+}
+
+.note-actions {
+  margin-top: 0.75rem;
+  display: flex;
+  gap: 0.55rem;
+}
+
+.note-actions button {
+  padding: 0.45rem 0.7rem;
+  font-size: 0.86rem;
+}
+
+.empty-state {
+  color: var(--muted);
+  margin-top: 0.75rem;
+}
+
+@keyframes rise-in {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes note-in {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 700px) {
+  .shell {
+    margin: 1rem auto 1.5rem;
+  }
+
+  .notes-toolbar {
+    grid-template-columns: 1fr;
+  }
+
+  .note-meta {
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .note-actions {
+    flex-wrap: wrap;
+  }
+}