The Palos Publishing Company

Follow Us On The X Platform @PalosPublishing
Categories We Write About

Build a _Today I Learned_ collector

Here’s a simple “Today I Learned” (TIL) collector app built in React. It allows users to input a short learning from their day, saves it locally, and displays a list of entries.

javascript
// TILCollector.jsx import React, { useState, useEffect } from "react"; import { Card, CardContent } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Textarea } from "@/components/ui/textarea"; const TILCollector = () => { const [entry, setEntry] = useState(""); const [tilList, setTilList] = useState([]); // Load from localStorage on mount useEffect(() => { const stored = JSON.parse(localStorage.getItem("tilList")) || []; setTilList(stored); }, []); // Save to localStorage on change useEffect(() => { localStorage.setItem("tilList", JSON.stringify(tilList)); }, [tilList]); const handleAdd = () => { if (!entry.trim()) return; const newEntry = { id: Date.now(), text: entry, date: new Date().toLocaleDateString() }; setTilList([newEntry, ...tilList]); setEntry(""); }; const handleDelete = (id) => { const updated = tilList.filter(item => item.id !== id); setTilList(updated); }; return ( <div className="max-w-2xl mx-auto p-4 space-y-6"> <h1 className="text-3xl font-bold text-center">Today I Learned</h1> <div className="space-y-2"> <Textarea placeholder="What did you learn today?" value={entry} onChange={(e) => setEntry(e.target.value)} className="min-h-[100px]" /> <Button onClick={handleAdd} className="w-full">Add Entry</Button> </div> <div className="space-y-4"> {tilList.length === 0 ? ( <p className="text-center text-gray-500">No entries yet.</p> ) : ( tilList.map((item) => ( <Card key={item.id} className="relative"> <CardContent className="p-4 space-y-2"> <p className="text-sm text-gray-500">{item.date}</p> <p>{item.text}</p> <Button variant="outline" size="sm" className="absolute top-2 right-2" onClick={() => handleDelete(item.id)} > Delete </Button> </CardContent> </Card> )) )} </div> </div> ); }; export default TILCollector;

Key Features:

  • Users write what they learned.

  • Saves entries in localStorage for persistence.

  • Allows deletion of entries.

  • Minimal UI using shadcn/ui components.

Let me know if you’d like this extended with features like tagging, search, Markdown support, or export options.

Share this Page your favorite way: Click any app below to share.

Enter your email below to join The Palos Publishing Company Email List

We respect your email privacy

Categories We Write About