Project Plan: PWA iCal Editor with AI Integration

Phase 0 — Set Up Your Workspace (1 day)

Goal: Ensure your dev environment and project skeleton are ready.
Tasks:

1. Install bun runtime and Docker locally.
2. Create a GitHub repo for your project.
3. Set up a kanban board (e.g., GitHub Projects, Trello, or even a whiteboard) with columns: Backlog → In Progress → Done.
4. Initialize Next.js project with bun:

   bun create next-app my-ical-pwa
   

5. Integrate shadcn/ui + TailwindCSS.

   npx shadcn-ui init
   

6. Install TurboPack config for faster builds.
7. Commit and push to GitHub.

✅ Success criteria: You can run bun dev and see the starter NextJS page with a shadcn component rendering.

---

Phase 1 — PWA Foundations (2–3 days)

Goal: Make your app installable, offline-capable, and structured.
Tasks:

1. Configure NextJS PWA using the next-pwa plugin or manual service worker.
2. Add manifest.json (name, icons, start_url).
3. Ensure offline caching works for basic pages.
4. Build your base layout with shadcn (Navigation bar, App shell).

✅ Success criteria:

• App can be installed on desktop/mobile.
• Basic UI framework in place (navigation, header).
• Works offline in basic form.

---

Phase 2 — Local Calendar CRUD (3–4 days)

Goal: Create, Read, Update, and Delete events in IndexedDB (calendar data stored locally).
Tasks:

1. Set up IndexedDB wrapper (recommend idb library for simplicity).
2. Design minimal event model:

   type CalendarEvent = {
     id: string;
     title: string;
     start: Date;
     end: Date;
     description?: string;
   };
   

3. Build Add Event form (shadcn modal or page).
4. Render events in list view.
5. Enable edit/delete logic.
6. Store small user preferences (theme, last viewed date) in localStorage.

✅ Success criteria:

• You can add, edit, and delete events without reloading.
• Changes persist after refresh.

---

Phase 3 — iCal File Import/Export (3 days)

Goal: Read .ics files and export your event list as iCal.
Tasks:

1. Use ical.js or ical-generator to handle parsing.
2. Create import button (upload local iCal file and store events in IndexedDB).
3. Create export button that takes current events and downloads .ics.

✅ Success criteria:

• Importing an .ics populates your list.
• Export downloads a valid .ics file.

---

Phase 4 — AI Integration (OpenRouter) (3–5 days)

Goal: Add AI-assisted event creation / summarization.
Tasks:

1. Set up API route in Next.js that calls OpenRouter API.
2. Write prompt format for:
   • Turning natural language into structured event JSON.
   • Summarizing events into a bullet list.
3. Add text input where the user can type: "Lunch with Sarah next Friday at noon" → generates event form populated automatically.
4. Integrate results directly into CRUD flow.

✅ Success criteria:

• User can create an event by typing in natural language and AI fills in details.
• AI can summarize selected events.

---

Phase 5 — Polish & Deployment (2–3 days)

Goal: Dockerize and deploy to bare metal.
Tasks:

1. Write Dockerfile for bun + NextJS app.
2. Add .dockerignore to optimize build.
3. Deploy to your server using docker-compose or raw docker run.
4. Enable HTTPS with Caddy or Nginx reverse proxy.

✅ Success criteria:

• App is live, installable, and can read/write iCal files with AI support.
• Access from phone and desktop.

---

ADHD-Friendly Productivity Tips for This Project

• Visual progress: Keep your kanban board visible; drag at least 1 card to "Done" daily.
• Micro-goals: Define tasks as “Under 1 hour” pieces (e.g., “Add startDate field to form” versus “Build CRUD forms”).
• Pomodoros with variety: Alternate coding with light tasks (docs, UI tweaks).
• Celebrate small wins: Even “icons rendering right” counts.
• Hyperfocus harness: Save creative coding (like AI prompt design) for your high-focus times.
• Body doubling: Work in a co-working video call or stream to keep momentum.

---

Suggested Timeline

If you work ~2–3 focused hours/day:

• Week 1: Phases 0–2 (setup, PWA, local CRUD)
• Week 2: Phases 3–4 (iCal import/export, AI integration)
• Week 3: Phase 5 (polish, deployment)

---

Next Steps for You

1. Confirm if you want to start from plain NextJS or grab a PWA boilerplate to save time.
2. Decide which AI model via OpenRouter to use (cheap + fast, or high-quality outputs?).
3. Pick a calendar UI approach — minimal list view or visual calendar grid from the start?