Project 3~90 minutesSolo Challenge

Notes App

Interview Scenario: "Build a notes application. Users should be able to create notes with a title and body, edit existing notes, and delete them. Notes should persist in a database."

This is a Solo Challenge

No code is provided for this project. Apply everything you learned in Projects 1 and 2. If you get stuck, refer back to the Task Tracker implementation.

Requirements

Data Model

  • id — Integer, primary key
  • title — String
  • body — Text (longer content)
  • created_at — DateTime
  • updated_at — DateTime (auto-updates on edit)

UI Features

  • List view showing all notes (title + preview of body)
  • Click a note to view/edit it
  • "New Note" button to create
  • Delete note with confirmation
  • Show timestamps (created/updated)
Loading...

Hints (Only If Stuck)

Hint 1: Database Model
from sqlalchemy import Column, Integer, String, Text, DateTime
from datetime import datetime

created_at = Column(DateTime, default=datetime.utcnow)
updated_at = Column(DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
Hint 2: Edit Mode Pattern
const [editingNote, setEditingNote] = useState<Note | null>(null)

// When editingNote is null, show the list
// When it has a value, show the edit form
Hint 3: Conditional Rendering
{editingNote ? (
  <EditForm note={editingNote} onSave={...} onCancel={...} />
) : (
  <NotesList notes={notes} onSelect={setEditingNote} />
)}

Self-Assessment Checklist

Bonus Challenge

If you finish early, add search/filter functionality. This shows initiative and is a common follow-up question in interviews.

Completed Day 1!

Great work! Tomorrow you'll tackle more advanced topics: URL shorteners, real-time WebSockets, and a mini e-commerce simulation.

Day 2: URL Shortener