Feature: Bucket List for Travel Goals

[source-rashi]

Fixes #897
This PR adds a comprehensive Bucket List feature to AdventureLog, allowing users to track their travel dreams and goals. Users can create, edit, delete, and manage bucket list items with full status tracking and progress visualization.

🎯 Features Added

Core Functionality

• ✅ Create Bucket List Items - Add new travel goals with detailed information
• ✅ Edit Items - Update existing items including status changes
• ✅ Delete Items - Remove bucket list items
• ✅ Status Tracking - Track items as Planned, In Progress, or Completed
• ✅ Progress Visualization - Dynamic progress bar showing completion percentage
• ✅ Filter by Status - Filter items by their current status (All, Planned, In Progress, Completed)

Item Properties

Each bucket list item includes:

• Title (required) - Main goal description
• Description - Detailed notes about the travel goal
• Tags - Comma-separated tags for categorization (e.g., adventure, nature, photography)
• Status - Planned / In Progress / Completed
• Notes - Additional details or requirements
• Privacy - Public/private visibility (defaults to private)
• Location Link - Optional link to an existing location (future enhancement)

🏗️ Technical Implementation

Backend (Django)

New Files:

• backend/server/bucketlist/__init__.py - App initialization
• backend/server/bucketlist/models.py - BucketItem model with UUID, tags array, status choices
• backend/server/bucketlist/views.py - ViewSet with permissions and filtering
• backend/server/bucketlist/serializers.py - API serialization
• backend/server/bucketlist/urls.py - API routing
• backend/server/bucketlist/admin.py - Django admin integration
• backend/server/bucketlist/migrations/0001_initial.py - Database migration

Database Schema:

class BucketItem(models.Model):
    id = UUIDField (primary key)
    user = ForeignKey(User)
    title = CharField(max_length=200)
    description = TextField (optional)
    tags = ArrayField(CharField, optional)
    status = CharField (choices: planned, in_progress, completed)
    location = ForeignKey(Location, optional)
    notes = TextField (optional)
    is_public = BooleanField (default: False)
    created_at = DateTimeField (auto)
    updated_at = DateTimeField (auto)
    images = GenericRelation (ContentImage)
    attachments = GenericRelation (ContentAttachment)

API Endpoints:

• GET /api/bucketlist/items/ - List all items (user's + public)
• POST /api/bucketlist/items/ - Create new item
• GET /api/bucketlist/items/{id}/ - Get specific item
• PUT /api/bucketlist/items/{id}/ - Update item
• DELETE /api/bucketlist/items/{id}/ - Delete item

Permissions:

• IsAuthenticatedOrReadOnly - Authentication required for modifications
• IsOwnerOrReadOnly - Only owners can edit/delete their items
• Users can view their own items + public items from others

Frontend (SvelteKit)

New Files:

• frontend/src/routes/bucketlist/+page.svelte - Main UI component
• frontend/src/routes/bucketlist/+page.server.ts - Server-side data loading and form actions

UI Components:

• Header - Title, description, and "Add Item" button with Target icon
• Progress Bar - Visual representation of completion percentage
• Status Filters - Filter buttons with item counts for each status
• Item Cards - Display bucket list items with badges, tags, and action buttons
• Add Modal - Form for creating new items
• Edit Modal - Form for updating existing items with pre-filled data
• Delete Button - Inline delete functionality with confirmation

Form Actions (SvelteKit):

• ?/create - Server-side item creation with CSRF protection
• ?/update - Server-side item update with CSRF protection
• ?/delete - Server-side item deletion with CSRF protection

Authentication Flow:

• Server-side fetch uses PUBLIC_SERVER_URL environment variable
• Session cookies passed via Cookie header
• CSRF tokens fetched and included in all POST/PUT/DELETE requests
• Proper error handling with user-friendly messages

Navigation Integration

Modified Files:

• Navigation bar updated to include Bucket List link with Target icon

🔧 Configuration Changes

Modified Files:

• backend/server/main/settings.py - Added 'bucketlist' to INSTALLED_APPS
• backend/server/main/urls.py - Included bucketlist URLs

🎨 UI/UX Features

Status Badges

• Planned - Default badge color
• In Progress - Warning/yellow badge
• Completed - Success/green badge

Progress Tracking

• Automatic calculation: (completed items / total items) × 100
• Visual progress bar updates in real-time
• Shows completion count (e.g., "3 of 10 completed")

Responsive Design

• Mobile-friendly card layout
• Modal forms work on all screen sizes
• DaisyUI components for consistent styling

🐛 Bug Fixes & Improvements

Issues Resolved During Development:

1. CSRF Token Issues - Added proper CSRF token handling using fetchCSRFToken()
2. API Endpoint 308 Redirects - Fixed by using full backend URLs with ${endpoint}
3. Authentication - Properly pass session cookies in server-side fetch calls
4. Form State Management - Separate state for create and edit modals

📝 Testing

Manual Testing Performed:

• ✅ Create bucket list items
• ✅ Edit existing items
• ✅ Change item status (Planned → In Progress → Completed)
• ✅ Delete items
• ✅ Filter by status
• ✅ Progress bar updates correctly
• ✅ Authentication required for all modifications
• ✅ User can only edit/delete their own items

Backend API Testing:

• ✅ GET requests return user's items + public items
• ✅ POST creates items with authenticated user
• ✅ PUT updates items (owner only)
• ✅ DELETE removes items (owner only)
• ✅ Permissions enforced correctly

🔒 Security Considerations

• ✅ CSRF protection on all form submissions
• ✅ Authentication required for create/update/delete
• ✅ Owner-only permissions for editing/deleting
• ✅ Server-side validation of all inputs
• ✅ No SQL injection risk (uses Django ORM)
• ✅ XSS protection through proper escaping

📦 Database Migrations

Migration Applied:

python manage.py migrate bucketlist

Creates the bucketlist_bucketitem table with all necessary fields and indexes.

🚀 Deployment Notes

Docker Build:

• Frontend rebuild required: docker compose build web
• No backend rebuild needed (Python hot reload)
• Restart containers: docker compose up -d

Environment Variables:

• Uses existing PUBLIC_SERVER_URL for API communication
• No new environment variables required

📸 Screenshots

Main View

• Progress bar showing completion percentage
• Status filter buttons with counts
• Item cards with status badges

Add/Edit Modals

• Title (required field)
• Description, Tags, Status, Notes (optional)
• Clear validation messages

Item Cards

• Display all item information
• Edit and Delete buttons
• Status badge with color coding
• Tags displayed as chips

🔄 Future Enhancements

Potential improvements for future PRs:

• 📍 Link bucket list items to existing locations
• 📅 Add target dates for goals
• 📊 Statistics dashboard (most common tags, completion trends)
• 🌍 Map view of bucket list locations
• 📤 Share bucket lists publicly
• ✅ Subtasks/checklists for each item
• 🖼️ Image attachments for items
• 🔔 Notifications for upcoming or overdue items

✅ Checklist

• Backend models created and migrated
• API endpoints implemented with proper permissions
• Frontend UI components created
• Server-side form actions implemented
• CSRF protection added
• Authentication flow working
• Edit functionality added
• Delete functionality added
• Progress tracking working
• Status filtering working
• Manual testing completed
• Code follows project conventions
• No console errors or warnings

[vercel]

@source-rashi is attempting to deploy a commit to the Sean Morley's Projects Team on Vercel.

A member of the Team first needs to authorize it.

[seanmorley15]

Looking good!

Here are some things I still want to add, mainly frontend stuff and it should all be supported in the backend already.

• Location linking
• Photo upload
• Attachment upload