Curio 💎

Intelligent Content Capture & Organization Hub

Curio is a modern, privacy-focused Progressive Web App (PWA) designed to curate, organize, and explore your digital discoveries. Whether it's a YouTube video, a news article, or an Instagram post, Curio transforms your scattered links into a beautiful, searchable personal library.

✨ Key Features

• 🔍 Intelligent Parsing: Automatically detects content type (Video, Article, Social) and fetching rich metadata via Microlink.
• ⚡ Smart Caching: Custom in-memory and local storage caching system for instant image loading and reduced API usage.
• 📱 Installable PWA: Full native-like experience on iOS and Android. Add to Home Screen and use offline.
• 🎨 Glassmorphic UI: A premium, dark-mode-first design with dynamic gradients, micro-interactions, and smooth animations.
• 📊 Google Sheets Backend: Your data stays yours. Syncs seamlessly with a private Google Sheet for infinite flexibility.
• 👁️ Smart Previews: Direct YouTube thumbnail extraction and intelligent fallbacks for all other media.

🛠️ Tech Stack

This project uses a robust, modern frontend stack optimized for performance and UX:

• Core: React 18 + TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS (Custom Config + JIT)
• Icons: Google Material Symbols
• Data Source: Google Apps Script (Custom JSON API)
• Link Previews: Microlink API
• State Management: React Hooks + LocalStorage Persistence

🚀 Deployment (Firebase Hosting)

Curio is optimized for deployment on Firebase Hosting.

Prerequisites

1. Install Firebase CLI: npm install -g firebase-tools
2. Login: firebase login

Build & Deploy

1. Initialize Firebase in project root (first time):

   firebase init hosting
   # Select 'dist' as your public directory
   # Configure as a single-page app (Yes)

2. Build the project:

   npm run build

3. Deploy to production:

   firebase deploy

📂 Project Structure

Curio/
├── public/              # Static assets (PWA icons, manifest)
├── src/
│   ├── components/      # Reusable UI components
│   ├── services/        # API integrations (Google Sheets, Cache)
│   ├── App.tsx          # Main Application Logic
│   └── index.css        # Tailwind directives & global styles
└── ...config files

🔮 Future Roadmap

• Offline Sync: Queue actions when offline.
• AI Tagging: Auto-categorize content using LLMs.
• Multi-User: Team curation features.

---

Built with ❤️ by AppFlow Solutions