I started by laying out all the html for the project planner.
I wanted it to feel more like an actual app instead of just a bunch of dashboard cards, so I added the sidebar, top search bar and separate pages for everything.

The pages i added are:

• Dashboard
• Projects
• New project form
• Project overview
• Tasks and milestones
• BOM / parts list
• Journal, files and notes
• Ideas board
• Shopping list
• Activity and settings

Once the html was laid out i started on the javascript.
I put all the demo projects, tasks, parts and ideas into a seed object instead of writing the data directly into every html section.

The site uses hash routing, so changing pages doesnt refresh the browser. I made a render function for every page and the navigation just swaps between them.

Then i added local storage so projects, completed tasks, purchased items, settings and dark mode dont reset every time the page is refreshed.

I also added:

• New project wizard
• Task drawer
• Add task and BOM forms
• Complete and reopen tasks
• BOM quantity controls
• Idea to project flow
• Search menu with ctrl/cmd + k
• Toast messages
• Reset demo data button
• Lucide icons

The Lucide files are included locally instead of using a cdn, so it should still work without internet.

Next

• Test all the buttons and forms again
• Make the mobile navigation work properly
• Start the css