What it does
Recipe to Website helps beginners build a useful app by editing small, ordered code recipes. Choose a to-do list, task manager, or finance manager, then work through Layout, Design, Actions, Saving, and Extras. Run edits in an isolated preview and download a complete standalone HTML app.
The setup guide walks through preparing index.html, testing locally, uploading to GitHub, and deploying to Vercel. A downloadable vercel.json provides the static-site configuration.
Who it is for
Beginners who want concrete examples, a visible result, and clear instructions about where code belongs.
Features
- To-do list: add, complete, delete, and filter tasks.
- Task manager: project, priority, due date, completion, and high-priority/overdue filters.
- Finance manager: SAR income and expense records, monthly totals, budget, and CSV export.
- Editable HTML, CSS, and JavaScript with per-recipe drafts during the session.
- Desktop and mobile preview controls, JavaScript syntax feedback, and standalone export.
How it was built
Codex used the Devpost Learn Skill Pack and planning documents to scope and implement the project. The scope, PRD, technical specification, and checklist are in the public repository's devpost directory. The participant reviewed the original design and requested useful app recipes and setup/deployment instructions. Codex wrote the implementation in HTML, CSS, and vanilla JavaScript. The app itself makes no AI calls.
Testing
Open the builder, choose a recipe, change the accent color in Design, and press Run my code. Try adding, completing, deleting, and filtering records. Download the app, serve it locally, add a record, and reload to check browser storage. For finance, test monthly totals and CSV export. Script checks and automated checks covered record creation, safe text rendering, storage reload, filters, and finance totals.
Limitations
Records save only in each visitor's browser when localStorage is available. There is no account, cloud sync, or bank integration. The isolated preview cannot persist records. Builder edits reset on page reload. The finance app is a manual tracker, and export includes the selected month.
Learning reflection
A personal learning reflection will be added before final submission.
Built With
- codex
- css
- devpost-learn
- html
- javascript