🔗 URL Manager

A production-deployed Flask web application to save, organize, and manage website URLs with smart tagging, search functionality, and PostgreSQL database integration. Live and operational at https://url-manager-project.onrender.com/

🌟 Features

🗄️ Database Architecture

• PostgreSQL Integration with Neon.tech for production
• SQLite Fallback for local development
• SQLAlchemy ORM for robust database operations
• Multi-Table Schema with users, URLs, tags, and relationships
• Deployed on Render.com with zero-downtime deployments

🎯 Core Functionality

• ➕ Add URLs with automatic title scraping using BeautifulSoup
• 🏷️ Smart Tagging System with predefined categories (Work, Programming, Research, Personal, News)
• 📦 Archive/Unarchive System for temporary URL storage
• 🔍 Advanced Search across titles and URLs with real-time results
• ✅ URL Validation and error handling

🎨 Tag Management

• 🌈 Color-coded tags for visual organization (Blue, Green, Purple, Orange, Red)
• 📊 Interactive Tag Sidebar with dropdown URL lists
• ❌ Remove tags from individual URLs with one click
• 🔍 Tag-based filtering and URL grouping

✨ User Experience

• 🔍 Real-time Search with 2-second auto-search delay
• 📋 One-click URL copying with visual feedback
• ⚠️ Confirmation dialogs for destructive actions
• 📱 Responsive design with clean, modern interface
• 🎯 Separate views for Active and Archived URLs

🛠️ Technical Stack

🔧 Backend

• Framework: 🐍 Flask (Python)
• Database: 🐘 PostgreSQL (Production - Neon.tech) / SQLite (Development)
• ORM: 🔄 SQLAlchemy
• URL Processing: 🕸️ BeautifulSoup4 for automatic title extraction
• HTTP Requests: 🌐 Requests library with custom headers
• URL Validation: ✅ Validators library

### 🎨 **Frontend**
- **Templating**: Jinja2 with template inheritance
- **Styling**: Custom CSS with color-coded tag system and responsive design
- **Interactivity**: Vanilla JavaScript for tag selection, search, and URL copying
- **Layout**: Flexbox for responsive container and sidebar

## 🚀 **Live Deployment**

### **Production Application**
🌐 **Live URL**: [https://url-manager-project.onrender.com/](https://url-manager-project.onrender.com/)

### **Production Infrastructure**
- **Platform**: Render.com
- **Database**: Neon.tech PostgreSQL
- **Status**: ✅ Fully Operational
- **Uptime**: 24/7 with auto-scaling

## 🛠️ **Installation & Setup**

### **Local Development**
1. **Clone the repository**
   ```bash
   git clone https://github.com/darshan2456/url_manager_project.git
   cd url_manager_project

2. Install dependencies

   pip install flask flask-sqlalchemy beautifulsoup4 requests validators

3. Initialize the database

   python app.py

   Then visit http://localhost:5000/start to create tables and default tags

4. Run the application

   python app.py

   Visit http://localhost:5000 to use the application

Production Deployment (Render.com)

1. Connect your GitHub repository to Render
2. Set environment variables:
   • DATABASE_URL: Your Neon PostgreSQL connection string
3. Automatic deployment on git push to main branch
4. Visit /start once to initialize database schema

📁 Project Structure

url_manager_project/
├── 🐍 app.py                 # Main Flask application with DB config
├── 🗄️ url_manager.db        # SQLite database (local development)
├── 🎨 static/
│   ├── style.css           # Comprehensive styling with responsive design
│   └── script.js           # Frontend interactions & search functionality
├── 📄 templates/
│   └── index.html          # Main template with tag system & search
└── 📋 requirements.txt     # Production dependencies

🔄 Database Configuration

Automatic Environment Detection

def get_database_uri():
    if 'DATABASE_URL' in os.environ:
        # Production - PostgreSQL (Render + Neon.tech)
        uri = os.environ['DATABASE_URL']
        if uri.startswith('postgres://'):
            uri = uri.replace('postgres://', 'postgresql://', 1)
        return uri
    else:
        # Development - SQLite (local)
        return 'sqlite:///url_manager.db'

Auto-Initialization

Visit /start to automatically:

• Create all database tables
• Insert default tags with colors
• Prepare the application for first use

🎮 How to Use

Adding URLs

1. Enter a valid URL in the input field (e.g., https://example.com)
2. Select relevant tags from the color-coded buttons
3. Click "Add URL" - the title will be automatically fetched and saved!

Searching URLs

• Real-time Search: Type in the search box - results update automatically
• Search Scope: Searches both active and archived URLs
• Clear Search: Click "Clear" to return to all URLs

Managing URLs

• 🔗 Visit: Click on any URL to open it in a new tab
• 📋 Copy: Use the "Copy URL" button for quick sharing (turns green when copied)
• 📦 Archive: Click "Archive" to temporarily hide URLs
• 📥 Unarchive: Restore from the archived section
• 🗑️ Delete: Remove permanently with confirmation dialog
• ❌ Remove Tags: Click the × on any tag to remove it from a URL

Using Tags

• 🎯 Filter: Click tags in the sidebar to view related URLs
• 📊 Overview: See tag counts in the sidebar
• 🎨 Visual Organization: Colors help quickly identify categories
• 🔽 Dropdown Lists: Click sidebar tags to see all URLs in that category

🔧 API Endpoints

• GET / - Main application interface with search
• GET /search - Search functionality with query parameters
• POST /add - Add new URL with tags and auto-title fetching
• POST /delete/<id> - Delete URL with confirmation
• POST /archive/<id> - Archive URL
• POST /unarchive/<id> - Unarchive URL
• GET /remove-tag/<id>/<tag> - Remove tag from URL
• GET /start - Initialize database (first-time setup)
• GET /check-tables - Debug endpoint to verify database setup

🚀 Deployment Features

Production Ready & Deployed

• ✅ Live on Render.com with 24/7 uptime
• ✅ Neon.tech PostgreSQL for scalable data storage
• ✅ Environment-based configuration
• ✅ Port configuration for cloud platforms
• ✅ Proper database connection handling
• ✅ Error handling and rollbacks

🔍 Search Features

• Real-time Processing: Auto-searches after 2 seconds of typing
• Comprehensive Search: Matches both URL titles and full URLs
• Separate Results: Shows active and archived results separately
• Result Counts: Displays number of matches in each category
• Quick Clear: Easy return to full URL list

🚀 Future Enhancements

• 👥 User authentication and personal collections
• 🔄 Bulk operations for multiple URLs
• 🔗 API endpoints for external integrations

---

📞 Support

⭐ Star this repo if you find it useful!

🐛 Found a bug? Open an issue on GitHub!

💡 Have a feature request? We'd love to hear your ideas!

🌐 Using the live app? Visit https://url-manager-project.onrender.com/

---

Built with 🐍 Flask + 🐘 PostgreSQL + ❤️ by Darshan
Successfully deployed on Render.com with Neon.tech database