{"id":18946718,"url":"https://github.com/elixpo/lixwish","last_synced_at":"2026-04-10T23:02:38.500Z","repository":{"id":223079784,"uuid":"759276567","full_name":"Circuit-Overtime/Birthday","owner":"Circuit-Overtime","description":"Welcome to Birthday.asm, is an experimental playfull method to create dynamic Birthday Cards for your loved ones. It uses interactive feature with an users microphone, to detect air blowing sounds to detonate candles and reveal the secret birthday message for the recipent!","archived":false,"fork":false,"pushed_at":"2024-03-03T06:10:14.000Z","size":931,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-01T00:42:29.870Z","etag":null,"topics":["css","dbms","firebase","html","js","ui"],"latest_commit_sha":null,"homepage":"https://circuit-overtime.github.io/Birthday/birthdayCard.html","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Circuit-Overtime.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-02-18T06:06:47.000Z","updated_at":"2024-02-27T17:41:59.000Z","dependencies_parsed_at":"2024-03-02T11:29:58.916Z","dependency_job_id":"ed593b68-004c-4043-adde-81cbe129ad33","html_url":"https://github.com/Circuit-Overtime/Birthday","commit_stats":null,"previous_names":["circuit-overtime/birthday"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Circuit-Overtime%2FBirthday","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Circuit-Overtime%2FBirthday/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Circuit-Overtime%2FBirthday/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Circuit-Overtime%2FBirthday/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Circuit-Overtime","download_url":"https://codeload.github.com/Circuit-Overtime/Birthday/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239946871,"owners_count":19723014,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","dbms","firebase","html","js","ui"],"created_at":"2024-11-08T13:07:44.158Z","updated_at":"2026-04-10T23:02:38.492Z","avatar_url":"https://github.com/Circuit-Overtime.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# LixWish - Birthday Card Generator (Next.js + Cloudflare D1)\n\nA modern, interactive birthday card generator built with Next.js, React, and Cloudflare D1 database.\n\n## Features\n\n✨ **Interactive Birthday Cards**\n- Create personalized birthday cards with name, age, and custom messages\n- Unique 6-digit alphanumeric access keys for security\n- URL slug-based sharing (e.g., `/john` or `/john-birthday`)\n- Multiple cards can exist under the same slug with different access keys\n\n🎂 **Visual Effects**\n- Animated birthday cake with candles (count matches age)\n- Microphone detection to blow out candles\n- Confetti celebration effect\n- Gradient animated backgrounds\n- Smooth typewriter text effect\n\n🔒 **Security \u0026 Privacy**\n- Access key protection prevents unauthorized viewing\n- Context menu and developer tools blocking\n- No external dependencies for core functionality\n\n## Tech Stack\n\n- **Framework**: Next.js 16+ (App Router)\n- **Styling**: Tailwind CSS v4\n- **Database**: Cloudflare D1 (Serverless SQL)\n- **Deployment**: Cloudflare Pages/Workers\n- **Icons**: Lucide React\n\n## Project Structure\n\n```\n├── app/\n│   ├── layout.tsx              # Root layout\n│   ├── page.tsx                # Home - Card creator\n│   ├── globals.css             # Global Tailwind styles\n│   ├── [name]/\n│   │   ├── page.tsx            # Card slug page (key prompt)\n│   │   └── [id]/\n│   │       └── page.tsx        # Card viewer (with access)\n│   └── api/\n│       └── cards/\n│           ├── route.ts        # Create/list cards API\n│           └── [slug]/route.ts # Get card by slug API\n├── components/\n│   ├── CardCreator.tsx         # Card creation form\n│   ├── CardViewer.tsx          # Main card view\n│   ├── KeyPrompt.tsx           # Access key input\n│   ├── Candles.tsx             # Animated candles\n│   ├── Confetti.tsx            # Confetti effect\n│   ├── MicrophoneButton.tsx    # Microphone access \u0026 blow detection\n│   └── ContextMenuProtection.tsx  # Dev tools blocking\n├── lib/\n│   ├── db.ts                   # Database initialization\n│   └── utils.ts                # Utility functions\n├── public/                      # Static assets\n├── wrangler.toml               # Cloudflare configuration\n├── schema.sql                  # D1 database schema\n└── CLOUDFLARE_SETUP.md         # Deployment guide\n```\n\n## Getting Started\n\n### Local Development\n\n1. **Install dependencies**:\n   ```bash\n   npm install\n   ```\n\n2. **Create environment file**:\n   ```bash\n   cp .env.local.example .env.local\n   # Update with your configuration\n   ```\n\n3. **Run development server**:\n   ```bash\n   npm run dev\n   ```\n\n4. Open [http://localhost:3000](http://localhost:3000)\n\n### Creating a Card\n\n1. Fill in the form with:\n   - Birthday person's name\n   - Their age\n   - (Optional) Custom message\n   - (Optional) Custom URL slug\n\n2. Click \"Create Birthday Card\"\n\n3. Get a shareable link with a unique 6-digit access key\n\n### Accessing a Card\n\n1. Go to the shared link (e.g., `https://example.com/john`)\n2. Enter the 6-digit access key\n3. Click \"Access Card\"\n4. Click the microphone button and blow on your microphone\n5. Watch the candles blow out and celebrate with confetti!\n\n## Cloudflare D1 Setup\n\nSee [CLOUDFLARE_SETUP.md](./CLOUDFLARE_SETUP.md) for detailed deployment instructions.\n\nQuick start:\n```bash\n# Create database\nwrangler d1 create lixwish\n\n# Initialize schema\nwrangler d1 execute lixwish --file ./schema.sql\n\n# Deploy\nnpm run build\nwrangler deploy\n```\n\n## API Reference\n\n### Create Card\n```\nPOST /api/cards\nContent-Type: application/json\n\n{\n  \"name\": \"John\",\n  \"age\": 25,\n  \"message\": \"Happy Birthday!\",\n  \"slug\": \"john-birthday\" // optional\n}\n\nResponse:\n{\n  \"id\": \"ABC123\",\n  \"name\": \"John\",\n  \"age\": 25,\n  \"message\": \"Happy Birthday!\",\n  \"slug\": \"john-birthday\",\n  \"created_at\": \"2024-02-17T...\"\n}\n```\n\n### Get Cards by Slug\n```\nGET /api/cards/john-birthday\n\nResponse:\n[\n  {\n    \"id\": \"ABC123\",\n    \"name\": \"John\",\n    \"age\": 25,\n    ...\n  }\n]\n```\n\n### Get Specific Card\n```\nGET /api/cards/john-birthday?id=ABC123\n\nResponse:\n{\n  \"id\": \"ABC123\",\n  \"name\": \"John\",\n  ...\n}\n```\n\n## URL Structure\n\n- `/` - Card creator home page\n- `/{slug}` - Card access page (prompts for key)\n- `/{slug}/{id}` - Card viewer (requires valid ID)\n\nExample:\n- Create a card for \"john\" → generates ID \"ABC123\"\n- Share: `https://example.com/john/ABC123`\n- Without ID: `https://example.com/john` → prompts for access key \"ABC123\"\n\n## Styling\n\nThe application uses Tailwind CSS v4 with custom animations:\n\n- `.animate-blob` - Floating blob animation\n- `.animate-float` - Gentle floating motion\n- `.animate-fadeInScale` - Fade in with scale effect\n- `.animate-slideInUp` - Slide in from bottom\n\n## Browser Support\n\n- Chrome/Edge 90+\n- Firefox 88+\n- Safari 14+\n- Opera 76+\n\nRequires:\n- JavaScript enabled\n- Microphone permissions (for candle blowing)\n- Modern CSS support (CSS Grid, Flexbox, CSS Variables)\n\n## License\n\nMIT - Feel free to use this project for creating birthday cards!\n\n## Contributing\n\nContributions welcome! Feel free to submit issues and pull requests.\n\n## Future Enhancements\n\n- [ ] Email sharing with embedded preview\n- [ ] Multiple backgrounds/themes\n- [ ] Custom color schemes\n- [ ] Voice recording greeting\n- [ ] Photo upload support\n- [ ] Social media integration\n- [ ] Analytics dashboard\n- [ ] Custom domain support\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felixpo%2Flixwish","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felixpo%2Flixwish","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felixpo%2Flixwish/lists"}