🦄 Unicorn Checklist App ✨

A magical, fully static web app that allows users to create shareable checklists entirely encoded within the URL. No backend or database required!

Screenshots

Features

• No State Server Required: Checklist data is saved and shared via URL.
• Three URL Formats Supported:
  • Base64 (Recommended): Safely handles special characters (?data=...)
  • Query Params: Simple comma-separated list (?items=a,b,c)
  • URL Hash: Comma-separated list after the hash symbol (#a,b,c)
• Interactive UI: Built with Microsoft Fluent UI components for a modern, accessible feel.
• Playful Theme: Beautiful rainbow gradients and unicorn emojis!
• GitHub Pages Ready: Automated CI/CD for deployments.

How It Works

1. Visit the app landing page without any parameters.
2. Enter your checklist items (one per line) in the editor.
3. Select your preferred URL format.
4. Click "Generate Magic Link".
5. Share the generated link with anyone. When they open it, the app decodes the URL and renders an interactive checklist.

(Note: The checked/unchecked state of items is not saved to a database and will reset upon page refresh. It is designed for simple, quick task tracking.)

Development

This project was bootstrapped with Vite and React TypeScript.

Prerequisites

• Node.js (v18 or higher)
• npm

Installation

# Clone the repository
# Navigate to the project directory
npm install

Running Locally

npm run dev

The app will start on http://localhost:5173 (or another available port).

Testing

Tests are written using Vitest.

# Run unit tests
npx vitest run

Building for Production

npm run build

Deployment

This app uses GitHub Actions to automatically deploy to GitHub Pages whenever changes are pushed to the main branch.

Make sure to enable GitHub Pages in your repository settings:

1. Go to Settings > Pages
2. Under "Build and deployment", set "Source" to GitHub Actions

Deployment

The app is deployed using GitHub Pages and can be found at: Unicorn Checklist