NextStep

• 

  NextStep: AI-generated steps, saved plans, progress tracking, and a focus timer.

Inspiration

A big task is often easier to postpone than to start. NextStep explores a small intervention: turn a goal and an available time budget into a concrete first plan, then focus on one action at a time.

What it does

Enter a task and choose 5–120 minutes. A real local language model generates actionable steps. Select a step, start or pause its focus timer, mark it complete, and return to saved progress in the same browser. The interface uses an electric blue and violet visual theme.

How it was built

NextStep uses HTML, CSS, JavaScript and a small Node.js server with no third-party npm dependencies. Ollama runs llama3.2 on the local machine. The server validates inputs and model responses and fits step durations to the selected time budget. Plans and timer state are stored in browser localStorage.

The Devpost Learn Skill Pack was installed in a new project folder. The participant chose the idea, real AI generation, local operation and electric visual direction through conversation. The scope, product requirements, technical specification and build order were written and reviewed before implementation.

Challenges and testing

The small local model sometimes returns weak phrasing or invalid content. Structured output, response validation and visible errors prevent failed requests from appearing successful. The focus timer uses a deadline so background-tab throttling does not accumulate timing errors. Storage problems are surfaced without silently overwriting unreadable records.

Nine automated tests cover input validation, time allocation across all supported budgets, schema limits, compatibility with older saved plans, timer calculation, stored state, concurrent requests and HTTP boundaries. Live checks verified real model generation and valid time allocation. Browser checks verified timer start, pause, reset and reload; saved progress; keyboard focus after step and history actions; error recovery; and safe display of HTML-like model output. Layout checks at five widths found no horizontal overflow. Unused CSS was removed while preserving the desktop and mobile appearance.

Current limitations

This proof of concept runs locally and keeps data in one browser. It does not sync devices. The local model may mix languages or suggest imperfect steps; users should review its advice.

Next steps

Participant feedback led to a simpler interface and a stronger electric theme. The public source repository is available on GitHub. A short demo video is now available. Future improvements will focus on task-specific wording.

Built With

• css3
• html5
• javascript
• node.js
• ollama