Shared Tasks

A password-protected shared task/calendar web app. People add activities to one central list, optionally attach dates, and everything shows up on a shared calendar. No user accounts — just a shared password and a display name.

Tech Stack

• Frontend: React + Vite + Tailwind CSS + Framer Motion + react-big-calendar
• Backend: Azure Functions v4 (TypeScript)
• Database: SQLite (local via libsql) — swappable to PostgreSQL
• Auth: Shared password → JWT session cookie

Setup

Prerequisites

• Node.js 20+
• Azure Functions Core Tools (npm i -g azure-functions-core-tools@4)

Environment Variables

Copy the example env file and customize:

cp .env.example api/local.settings.json  # Already preconfigured for local dev

Edit api/local.settings.json and set:

Variable	Description	Default
APP_PASSWORD	Shared password for app access	changeme
SESSION_SECRET	JWT signing secret	dev-session-secret-change-me
DATABASE_URL	SQLite file path	file:./dev.db
CALENDAR_FEED_TOKEN	Token for ICS feed URL	dev-calendar-token-change-me

Install Dependencies

cd shared && npm install
cd ../api && npm install
cd ../web && npm install

Run Development Servers

Backend (runs on port 7071):

cd api
func start

Frontend (runs on port 5173, proxies /api to backend):

cd web
npm run dev

Open http://localhost:5173 and enter the password you set in APP_PASSWORD.

Database

The SQLite database auto-creates on first request. No migration step needed for local dev — the schema is created automatically.

For production PostgreSQL, update DATABASE_URL and swap the database service implementation.

Calendar Feed Subscription

The app generates an ICS subscription feed for external calendar apps.

Feed URL: http://localhost:7071/api/calendar.ics?token=YOUR_CALENDAR_FEED_TOKEN

Apple Calendar

1. Open Calendar app
2. File → New Calendar Subscription
3. Paste the feed URL
4. Click Subscribe

Google Calendar

1. Go to Google Calendar Settings
2. "Other calendars" → + → "From URL"
3. Paste the feed URL
4. Click "Add calendar"

The feed includes all dated activities. Completed items show as [Done] Activity name.

Project Structure

├── api/           Azure Functions backend
│   ├── src/
│   │   ├── functions/   One handler per API route
│   │   ├── services/    Database service + config
│   │   ├── middleware/  Auth (JWT session)
│   │   └── errors/      Error types + response helper
│   └── drizzle/         Schema definition
├── web/           React frontend
│   └── src/
│       ├── components/  UI components
│       ├── pages/       Route pages
│       ├── hooks/       Data hooks
│       └── api/         Typed API client
└── shared/        Shared types & validation schemas

API Routes

Method	Path	Description
POST	/api/auth/login	Validate shared password
POST	/api/auth/logout	Clear session
GET	/api/activities	List all activities
POST	/api/activities	Create activity
PUT	/api/activities/:id	Update activity
DELETE	/api/activities/:id	Soft-delete activity
PATCH	/api/activities/:id/toggle	Toggle completion
GET	/api/calendar.ics?token=...	ICS subscription feed
GET	/api/health	Health check