129 lines
4.9 KiB
Markdown
129 lines
4.9 KiB
Markdown
## **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**:
|
||
```bash
|
||
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`](https://github.com/shadowwalker/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`](https://github.com/jakearchibald/idb) library for simplicity).
|
||
2. Design minimal event model:
|
||
```ts
|
||
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`](https://github.com/mozilla-comm/ical.js) or [`ical-generator`](https://github.com/sebbo2002/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?
|