Devlog 4

Turn any goal written in natural language into a structured, actionable to-do list. Powered by OpenAI.

Progress Done

It’s the final development session. The app is fully deployed and working end-to-end: user opens the GitHub Pages link, types any goal, gets back a structured AI-generated plan as task cards, checks off tasks, and the whole state persists in the browser. I finished the interaction layer (progress bar, statistics, localStorage persistence, clear plan) and polished the UI with animations, hover states, and an empty state. The project is now feature-complete.

Features Added/Worked on

• Progress bar with smooth width animation on checkbox click
• Task counter (3 / 8 tasks completed) and live percentage
• Total estimated time calculated from all tasks
• Priority statistics (High / Medium / Low counts)
• Save full plan + checkbox state to localStorage
• Automatic restore of plan and checked tasks on page reload
• Clear Plan button to wipe localStorage and return to empty state
• Empty state hint shown when no plan exists
• Card hover effect with subtle right shift
• Card fade-in animation on first render
• Fixed localStorage edge cases with try / catch
• Added data-task-id on cards for reliable state restoration

What new I learnt

• I learnt how localStorage works and why JSON.stringify / JSON.parse are required
• I learnt why localStorage access must be wrapped in try / catch (private mode, quota)
• I learnt how to restore UI state from storage on page load
• I learnt how CSS animations work with animation-delay for staggered effects
• I learnt that CSS specificity matters when the same class is styled twice
• I learnt how to design an empty state that guides the user
• I learnt how data-task-id attributes bridge DOM and app state
• I learnt to keep the app resilient: even if one part fails, the rest keeps working

Try It

Live Demo - fully working, backend on Render

Note: the first request may take up to 1 minute while the free Render instance wakes up. Subsequent requests are fast.

Devlog 3

Turn any goal written in natural language into a structured, actionable to-do list. Powered by OpenAI.

Progress Done

It’s the 7th hour into the project, and the app is now fully deployed and working end-to-end in the browser. A user opens the GitHub Pages link, types any goal, and the frontend sends a request to a live backend on Render, which calls gpt-4o-mini and returns structured task cards rendered on the page. I have connected OpenAI with Structured Outputs, added validation, loading and error states, interactive checkboxes, and deployed the backend with CORS configured for GitHub Pages.

Features Added/Worked on

• Connected OpenAI gpt-4o-mini with Structured Outputs (JSON Schema)
• Created openai.js as an isolated module for the model call
• Added POST /api/generate with validation (non-empty string, max 500 chars)
• Added error mapping for 401, 429 and generic failures
• System prompt tuned to produce specific, actionable tasks with priorities, time estimates, and dependencies
• Rendered task cards with priority-colored left border, priority badge and estimated time
• Added interactive checkboxes with completed state (dimmed + strikethrough)
• Added live character counter for the textarea
• Added loading spinner and error box
• Deployed backend to Render (Free tier) with OPENAI_API_KEY as an environment variable
• Added CORS middleware allowing requests from GitHub Pages and localhost
• Configured frontend to switch API base URL between localhost and Render

What new I learnt

• I learnt how Structured Outputs work in the OpenAI API (strict schema, additionalProperties)
• I learnt why API keys must live in .env on the server and never in frontend code
• I learnt that fetch does not throw on HTTP 4xx/5xx - you have to check response.ok manually
• I learnt how try / catch / finally works for cleaning up UI state on errors
• I learnt BEM-style class naming for state variants (taskCard–done)
• I learnt building DOM with createElement + appendChild instead of innerHTML (safer, no XSS)
• I learnt how CORS works and why browsers block cross-origin requests by default
• I learnt how to deploy a Node.js backend to Render and connect it to a static frontend on GitHub Pages

Try It

Live Demo - fully working, backend on Render

• First Generate can be until 1 minute wait please until server will wake up ;)

AI To Do List

Turn any goal written in natural language into a structured, actionable to-do list. Powered by OpenAI.

What works now

• Frontend UI: gradient header, glassmorphism goal card, textarea, “Generate Plan” button
• Live character counter (updates on every keystroke)
• Loading spinner while waiting for the backend
• Error box for empty input, auto-clears on retry
• Backend: Express server serving /docs and exposing GET /api/health
• POST /api/generate - validates the goal (non-empty, max 500 chars) and returns a hardcoded JSON plan with three tasks
• GitHub Pages previews the static UI

No AI yet - the endpoint exists so the data shape and client flow can be tested first.

What’s next

• Connect OpenAI gpt-4o-mini with Structured Outputs (JSON Schema)
• Replace the fake response in /api/generate with a real model call
• Replace the frontend placeholder with a real fetch() to the backend
• Render task cards: title, description, priority, time, dependencies
• Checkbox + progress bar + total time
• Priority statistics
• Save plan to localStorage
• Polish, mobile pass, deploy

Stack

• Frontend: HTML, CSS, vanilla JS
• Backend: Node.js, Express 5
• AI: OpenAI gpt-4o-mini, Structured Outputs (planned)
• Persistence: localStorage (planned)
• Preview: GitHub Pages (/docs)

Try It

Live Demo - UI only, backend not connected yet

AI To Do List

Turn any goal written in natural language into a structured, actionable to-do list. Powered by OpenAI.

Progress

• Project restructured into a single directory layout
• Frontend UI finished: gradient header, glassmorphism card with textarea, static character counter, “Generate Plan” button, hidden loading/error/dashboard sections
• server.js - Express server, serves /docs, exposes GET /api/health
• package.json - scripts start / dev, deps: express, dotenv, openai
• .env.example - template for PORT and OPENAI_API_KEY
• .gitignore - protects .env and node_modules/
• docs/style.css - dark theme, gradients, glass cards, responsive
• GitHub Pages previews the UI from docs/

No AI yet - that comes next.

Goal

Remove the “where do I start?” problem. A user types any goal - “build a portfolio website”, “prepare for a C++ exam”, “organize a birthday party” - and gets back a concrete, ordered list of tasks with priorities, time estimates, and dependencies.

The AI must not just rephrase the goal. It must decompose it into specific, actionable steps.

Stack

• Frontend: HTML, CSS, vanilla JS
• Backend: Node.js, Express 5
• AI: OpenAI gpt-4o-mini, Structured Outputs
• Persistence: localStorage (planned)
• Preview: GitHub Pages (/docs)

Try It

Live Demo - UI only, backend not connected yet