train_model.py feature_engineering.py index.html RELEASE_NOTES.md Rakefile

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ruby To-Do List Application - Complete Task Management System</title>
    <meta name="description" content="A comprehensive Ruby on Rails to-do list application with task management, categories, file attachments, API, and email notifications.">
    <meta name="keywords" content="Ruby on Rails, To-Do List, Task Management, PostgreSQL, API, Bootstrap">
    <meta name="author" content="Molla Samser">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <style>
        :root {
            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            --success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            --info-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
            --warning-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
            --danger-gradient: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
        }

        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
        }

        .hero-section {
            background: var(--primary-gradient);
            color: white;
            padding: 100px 0;
            position: relative;
            overflow: hidden;
        }

        .hero-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="0.5" fill="%23ffffff" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
            pointer-events: none;
        }

        .hero-title {
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }

        .hero-subtitle {
            font-size: 1.25rem;
            margin-bottom: 2rem;
            opacity: 0.9;
        }

        .feature-card {
            background: white;
            border-radius: 15px;
            padding: 2rem;
            margin-bottom: 2rem;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            border: none;
            height: 100%;
        }

        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
        }

        .feature-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1rem;
            font-size: 1.5rem;
        }

        .feature-icon.primary { background: var(--primary-gradient); color: white; }
        .feature-icon.secondary { background: var(--secondary-gradient); color: white; }
        .feature-icon.success { background: var(--success-gradient); color: white; }
        .feature-icon.info { background: var(--info-gradient); color: white; }
        .feature-icon.warning { background: var(--warning-gradient); color: black; }
        .feature-icon.danger { background: var(--danger-gradient); color: black; }

        .tech-stack {
            background: white;
            border-radius: 15px;
            padding: 3rem;
            margin: 3rem 0;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }

        .tech-badge {
            display: inline-block;
            padding: 0.5rem 1rem;
            margin: 0.25rem;
            border-radius: 25px;
            font-size: 0.875rem;
            font-weight: 500;
            background: var(--primary-gradient);
            color: white;
        }

        .file-tree {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 1.5rem;
            font-family: 'Courier New', monospace;
            font-size: 0.875rem;
            line-height: 1.5;
        }

        .file-tree ul {
            margin: 0;
            padding-left: 1rem;
        }

        .file-tree li {
            margin: 0.25rem 0;
        }

        .file-tree .folder { color: #007bff; font-weight: 600; }
        .file-tree .file { color: #6c757d; }
        .file-tree .config { color: #28a745; }
        .file-tree .view { color: #e83e8c; }
        .file-tree .controller { color: #fd7e14; }
        .file-tree .model { color: #6f42c1; }

        .demo-section {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 4rem 0;
            margin: 3rem 0;
        }

        .screenshot {
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            transition: transform 0.3s ease;
        }

        .screenshot:hover {
            transform: scale(1.05);
        }

        .api-endpoint {
            background: #f8f9fa;
            border-left: 4px solid #007bff;
            padding: 1rem;
            margin: 1rem 0;
            border-radius: 0 5px 5px 0;
        }

        .method {
            font-weight: 600;
            color: #007bff;
        }

        .endpoint {
            font-family: 'Courier New', monospace;
            color: #495057;
        }

        .stats-counter {
            font-size: 2.5rem;
            font-weight: 700;
            color: #007bff;
            margin-bottom: 0.5rem;
        }

        .watermark {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: rgba(255, 255, 255, 0.9);
            padding: 0.5rem 1rem;
            border-radius: 25px;
            font-size: 0.875rem;
            color: #6c757d;
            font-weight: 500;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            z-index: 1000;
        }

        .floating-action {
            position: fixed;
            bottom: 20px;
            left: 20px;
            background: var(--primary-gradient);
            color: white;
            border: none;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            transition: all 0.3s ease;
            z-index: 1000;
        }

        .floating-action:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 20px rgba(0,0,0,0.4);
        }

        @media (max-width: 768px) {
            .hero-title {
                font-size: 2.5rem;
            }

            .hero-subtitle {
                font-size: 1rem;
            }

            .watermark {
                position: static;
                margin: 2rem auto;
                display: block;
                text-align: center;
            }

            .floating-action {
                bottom: 20px;
                right: 20px;
                left: auto;
            }
        }
    </style>
</head>
<body>
    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark" style="background: var(--primary-gradient);">
        <div class="container">
            <a class="navbar-brand fw-bold" href="#home">
                <i class="fas fa-tasks me-2"></i>Ruby To-Do List
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item"><a class="nav-link" href="#features">Features</a></li>
                    <li class="nav-item"><a class="nav-link" href="#technologies">Tech Stack</a></li>
                    <li class="nav-item"><a class="nav-link" href="#files">Files</a></li>
                    <li class="nav-item"><a class="nav-link" href="#demo">Demo</a></li>
                    <li class="nav-item"><a class="nav-link" href="#api">API</a></li>
                    <li class="nav-item"><a class="nav-link" href="#installation">Install</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section id="home" class="hero-section">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-8">
                    <h1 class="hero-title">Ruby To-Do List</h1>
                    <p class="hero-subtitle">A complete task management application built with Ruby on Rails featuring advanced functionality, modern UI/UX, and comprehensive API support.</p>
                    <div class="d-flex gap-3 flex-wrap">
                        <a href="#demo" class="btn btn-light btn-lg px-4">
                            <i class="fas fa-eye me-2"></i>View Demo
                        </a>
                        <a href="#installation" class="btn btn-outline-light btn-lg px-4">
                            <i class="fas fa-download me-2"></i>Get Started
                        </a>
                        <a href="https://github.com" class="btn btn-outline-light btn-lg px-4">
                            <i class="fab fa-github me-2"></i>Source Code
                        </a>
                    </div>
                </div>
                <div class="col-lg-4 text-center mt-4 mt-lg-0">
                    <div class="feature-icon primary mx-auto mb-3" style="width: 120px; height: 120px; font-size: 3rem;">
                        <i class="fas fa-tasks"></i>
                    </div>
                    <div class="stats-counter">2026</div>
                    <p class="mb-0">Latest Version</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section id="features" class="py-5">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="fw-bold mb-3">Powerful Features</h2>
                <p class="text-muted lead">Everything you need for efficient task management</p>
            </div>

            <div class="row">
                <div class="col-lg-4 col-md-6">
                    <div class="feature-card">
                        <div class="feature-icon primary">
                            <i class="fas fa-plus-circle"></i>
                        </div>
                        <h5 class="fw-bold">Task Management</h5>
                        <p>Create, edit, delete, and organize tasks with ease. Full CRUD operations with intuitive interfaces.</p>
                        <ul class="list-unstyled small text-muted">
                            <li><i class="fas fa-check text-success me-1"></i> Create/Edit/Delete Tasks</li>
                            <li><i class="fas fa-check text-success me-1"></i> Priority Levels (Low/Medium/High)</li>
                            <li><i class="fas fa-check text-success me-1"></i> Due Date Scheduling</li>
                            <li><i class="fas fa-check text-success me-1"></i> Completion Tracking</li>
                        </ul>
                    </div>
                </div>

                <div class="col-lg-4 col-md-6">
                    <div class="feature-card">
                        <div class="feature-icon secondary">
                            <i class="fas fa-search"></i>
                        </div>
                        <h5 class="fw-bold">Advanced Search</h5>
                        <p>Find tasks instantly with PostgreSQL full-text search. Filter by title, description, and metadata.</p>
                        <ul class="list-unstyled small text-muted">
                            <li><i class="fas fa-check text-success me-1"></i> Real-time Search</li>
                            <li><i class="fas fa-check text-success me-1"></i> PostgreSQL Full-text</li>
                            <li><i class="fas fa-check text-success me-1"></i> Debounced Input</li>
                            <li><i class="fas fa-check text-success me-1"></i> Prefix Matching</li>
                        </ul>
                    </div>
                </div>

                <div class="col-lg-4 col-md-6">
                    <div class="feature-card">
                        <div class="feature-icon success">
                            <i class="fas fa-tags"></i>
                        </div>
                        <h5 class="fw-bold">Smart Categories</h5>
                        <p>Organize tasks with custom categories and color coding. Default categories included.</p>
                        <ul class="list-unstyled small text-muted">
                            <li><i class="fas fa-check text-success me-1"></i> Custom Categories</li>
                            <li><i class="fas fa-check text-success me-1"></i> Color Coding</li>
                            <li><i class="fas fa-check text-success me-1"></i> Task Statistics</li>
                            <li><i class="fas fa-check text-success me-1"></i> Default Categories</li>
                        </ul>
                    </div>
                </div>

                <div class="col-lg-4 col-md-6">
                    <div class="feature-card">
                        <div class="feature-icon info">
                            <i class="fas fa-paperclip"></i>
                        </div>
                        <h5 class="fw-bold">File Attachments</h5>
                        <p>Attach files, images, and documents to tasks. Secure file storage with Active Storage.</p>
                        <ul class="list-unstyled small text-muted">
                            <li><i class="fas fa-check text-success me-1"></i> Multiple File Types</li>
                            <li><i class="fas fa-check text-success me-1"></i> Secure Storage</li>
                            <li><i class="fas fa-check text-success me-1"></i> Download Links</li>
                            <li><i class="fas fa-check text-success me-1"></i> File Validation</li>
                        </ul>
                    </div>
                </div>

                <div class="col-lg-4 col-md-6">
                    <div class="feature-card">
                        <div class="feature-icon warning">
                            <i class="fas fa-envelope"></i>
                        </div>
                        <h5 class="fw-bold">Email Notifications</h5>
                        <p>Automated email reminders for due and overdue tasks. Background job processing.</p>
                        <ul class="list-unstyled small text-muted">
                            <li><i class="fas fa-check text-success me-1"></i> Due Date Reminders</li>
                            <li><i class="fas fa-check text-success me-1"></i> Overdue Alerts</li>
                            <li><i class="fas fa-check text-success me-1"></i> Background Jobs</li>
                            <li><i class="fas fa-check text-success me-1"></i> HTML/Text Templates</li>
                        </ul>
                    </div>
                </div>

                <div class="col-lg-4 col-md-6">
                    <div class="feature-card">
                        <div class="feature-icon danger">
                            <i class="fas fa-code"></i>
                        </div>
                        <h5 class="fw-bold">REST API</h5>
                        <p>Complete JSON API for mobile app integration. All CRUD operations available.</p>
                        <ul class="list-unstyled small text-muted">
                            <li><i class="fas fa-check text-success me-1"></i> Full REST API</li>
                            <li><i class="fas fa-check text-success me-1"></i> JSON Responses</li>
                            <li><i class="fas fa-check text-success me-1"></i> Authentication</li>
                            <li><i class="fas fa-check text-success me-1"></i> Mobile Integration</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Technologies Section -->
    <section id="technologies" class="tech-stack">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="fw-bold mb-3">Technology Stack</h2>
                <p class="text-muted lead">Built with modern technologies and best practices</p>
            </div>

            <div class="row">
                <div class="col-lg-6">
                    <h4 class="fw-bold mb-3">Backend</h4>
                    <div>
                        <span class="tech-badge">Ruby 3.3.10</span>
                        <span class="tech-badge">Rails 7.1.3</span>
                        <span class="tech-badge">PostgreSQL</span>
                        <span class="tech-badge">Devise</span>
                        <span class="tech-badge">pg_search</span>
                        <span class="tech-badge">Active Storage</span>
                        <span class="tech-badge">Sidekiq</span>
                        <span class="tech-badge">Redis</span>
                    </div>
                </div>
                <div class="col-lg-6">
                    <h4 class="fw-bold mb-3">Frontend</h4>
                    <div>
                        <span class="tech-badge">Bootstrap 5</span>
                        <span class="tech-badge">JavaScript</span>
                        <span class="tech-badge">jQuery</span>
                        <span class="tech-badge">SCSS</span>
                        <span class="tech-badge">Font Awesome</span>
                        <span class="tech-badge">Google Fonts</span>
                    </div>
                </div>
            </div>

            <div class="row mt-4">
                <div class="col-lg-6">
                    <h4 class="fw-bold mb-3">Deployment</h4>
                    <div>
                        <span class="tech-badge">Docker</span>
                        <span class="tech-badge">Docker Compose</span>
                        <span class="tech-badge">Heroku</span>
                        <span class="tech-badge">Puma</span>
                    </div>
                </div>
                <div class="col-lg-6">
                    <h4 class="fw-bold mb-3">Development</h4>
                    <div>
                        <span class="tech-badge">RSpec</span>
                        <span class="tech-badge">Capybara</span>
                        <span class="tech-badge">Factory Bot</span>
                        <span class="tech-badge">Shoulda Matchers</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- File Structure Section -->
    <section id="files" class="py-5">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="fw-bold mb-3">Project Structure</h2>
                <p class="text-muted lead">Complete file organization with 200+ files</p>
            </div>

            <div class="row">
                <div class="col-lg-8 mx-auto">
                    <div class="file-tree">
                        <div class="folder">ruby-todo-list/</div>
                        <ul>
                            <li class="folder">app/</li>
                            <ul>
                                <li class="folder">assets/</li>
                                <ul>
                                    <li class="folder">stylesheets/ <span class="text-muted">- SCSS styles</span></li>
                                    <li class="folder">javascripts/ <span class="text-muted">- JavaScript enhancements</span></li>
                                    <li class="config">config/manifest.js <span class="text-muted">- Asset manifest</span></li>
                                </ul>
                                <li class="folder">controllers/ <span class="text-muted">- MVC controllers</span></li>
                                <ul>
                                    <li class="folder">api/v1/ <span class="text-muted">- REST API endpoints</span></li>
                                    <li class="controller">tasks_controller.rb</li>
                                    <li class="controller">categories_controller.rb</li>
                                    <li class="controller">application_controller.rb</li>
                                </ul>
                                <li class="folder">helpers/ <span class="text-muted">- View helpers</span></li>
                                <ul>
                                    <li>application_helper.rb</li>
                                    <li>tasks_helper.rb</li>
                                    <li>categories_helper.rb</li>
                                </ul>
                                <li class="folder">jobs/ <span class="text-muted">- Background jobs</span></li>
                                <ul>
                                    <li>task_notification_job.rb</li>
                                </ul>
                                <li class="folder">mailers/ <span class="text-muted">- Email functionality</span></li>
                                <ul>
                                    <li>task_mailer.rb</li>
                                    <li>application_mailer.rb</li>
                                </ul>
                                <li class="folder">models/ <span class="text-muted">- Data models</span></li>
                                <ul>
                                    <li class="model">user.rb</li>
                                    <li class="model">task.rb</li>
                                    <li class="model">category.rb</li>
                                </ul>
                                <li class="folder">views/ <span class="text-muted">- Templates</span></li>
                                <ul>
                                    <li class="folder">layouts/ <span class="view">- Application layout</span></li>
                                    <li class="folder">tasks/ <span class="view">- Task views</span></li>
                                    <li class="folder">categories/ <span class="view">- Category views</span></li>
                                    <li class="folder">devise/ <span class="view">- Authentication views</span></li>
                                    <li class="folder">task_mailer/ <span class="view">- Email templates</span></li>
                                </ul>
                            </ul>
                            <li class="folder">config/ <span class="text-muted">- Configuration files</span></li>
                            <ul>
                                <li class="config">application.rb</li>
                                <li class="config">database.yml</li>
                                <li class="config">routes.rb</li>
                                <li class="config">puma.rb</li>
                                <li class="folder">environments/</li>
                                <li class="folder">initializers/</li>
                                <li class="folder">locales/</li>
                            </ul>
                            <li class="folder">db/ <span class="text-muted">- Database files</span></li>
                            <ul>
                                <li class="folder">migrate/ <span class="text-muted">- Database migrations</span></li>
                                <li>schema.rb</li>
                            </ul>
                            <li class="folder">lib/ <span class="text-muted">- Library code</span></li>
                            <ul>
                                <li class="folder">tasks/ <span class="text-muted">- Rake tasks</span></li>
                            </ul>
                            <li class="folder">test/ <span class="text-muted">- Test suite</span></li>
                            <li class="folder">public/ <span class="text-muted">- Static assets</span></li>
                            <li class="folder">tmp/ <span class="text-muted">- Temporary files</span></li>
                            <li class="folder">vendor/ <span class="text-muted">- Third-party code</span></li>
                            <li>Gemfile & Gemfile.lock</li>
                            <li>README.md</li>
                            <li class="config">Dockerfile</li>
                            <li class="config">docker-compose.yml</li>
                            <li class="config">Procfile</li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="row mt-4">
                <div class="col-md-4">
                    <div class="text-center">
                        <div class="stats-counter">200+</div>
                        <p class="text-muted">Total Files</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="text-center">
                        <div class="stats-counter">15+</div>
                        <p class="text-muted">Models & Controllers</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="text-center">
                        <div class="stats-counter">25+</div>
                        <p class="text-muted">Views & Templates</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Demo Section -->
    <section id="demo" class="demo-section">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="fw-bold mb-3">Live Demo</h2>
                <p class="lead">Experience the application in action</p>
            </div>

            <div class="row">
                <div class="col-lg-8 mx-auto text-center">
                    <div class="screenshot mb-4">
                        <img src="https://via.placeholder.com/800x500/667eea/white?text=Ruby+To-Do+List+Dashboard" alt="Dashboard Screenshot" class="img-fluid rounded">
                    </div>
                    <p class="text-white-50 mb-4">Modern dashboard with task statistics, search functionality, and intuitive navigation</p>

                    <div class="d-flex gap-3 justify-content-center flex-wrap">
                        <a href="./ruby-todo-list/" class="btn btn-light btn-lg px-4" target="_blank">
                            <i class="fas fa-external-link-alt me-2"></i>Live Demo
                        </a>
                        <a href="https://github.com" class="btn btn-outline-light btn-lg px-4" target="_blank">
                            <i class="fab fa-github me-2"></i>View Source
                        </a>
                        <a href="./ruby-todo-list/ruby-todo-list.zip" class="btn btn-outline-light btn-lg px-4" download>
                            <i class="fas fa-download me-2"></i>Download
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- API Section -->
    <section id="api" class="py-5">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="fw-bold mb-3">REST API</h2>
                <p class="text-muted lead">Complete JSON API for mobile and third-party integrations</p>
            </div>

            <div class="row">
                <div class="col-lg-6">
                    <h4 class="fw-bold mb-3">Tasks API</h4>
                    <div class="api-endpoint">
                        <span class="method">GET</span>
                        <span class="endpoint">/api/v1/tasks</span>
                        <p class="mb-0 small text-muted">List all user tasks</p>
                    </div>
                    <div class="api-endpoint">
                        <span class="method">POST</span>
                        <span class="endpoint">/api/v1/tasks</span>
                        <p class="mb-0 small text-muted">Create new task</p>
                    </div>
                    <div class="api-endpoint">
                        <span class="method">PATCH</span>
                        <span class="endpoint">/api/v1/tasks/:id</span>
                        <p class="mb-0 small text-muted">Update task</p>
                    </div>
                    <div class="api-endpoint">
                        <span class="method">DELETE</span>
                        <span class="endpoint">/api/v1/tasks/:id</span>
                        <p class="mb-0 small text-muted">Delete task</p>
                    </div>
                </div>
                <div class="col-lg-6">
                    <h4 class="fw-bold mb-3">Categories API</h4>
                    <div class="api-endpoint">
                        <span class="method">GET</span>
                        <span class="endpoint">/api/v1/categories</span>
                        <p class="mb-0 small text-muted">List all categories</p>
                    </div>
                    <div class="api-endpoint">
                        <span class="method">GET</span>
                        <span class="endpoint">/api/v1/categories/:id</span>
                        <p class="mb-0 small text-muted">Get category details</p>
                    </div>
                    <h5 class="fw-bold mt-4 mb-3">Authentication</h5>
                    <p class="text-muted">All API endpoints require user authentication via Devise tokens.</p>
                    <code class="d-block p-2 bg-light rounded">Authorization: Bearer &lt;user_token&gt;</code>
                </div>
            </div>
        </div>
    </section>

    <!-- Installation Section -->
    <section id="installation" class="py-5 bg-light">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="fw-bold mb-3">Quick Start</h2>
                <p class="text-muted lead">Get the application running in minutes</p>
            </div>

            <div class="row">
                <div class="col-lg-6">
                    <h4 class="fw-bold mb-3">Docker Installation</h4>
                    <div class="bg-white p-4 rounded shadow-sm">
                        <pre class="mb-0"><code># Clone and navigate
git clone &lt;repository-url&gt;
cd ruby-todo-list

# Start with Docker Compose
docker-compose up --build

# Setup database
docker-compose exec app rails db:migrate

# Visit http://localhost:3000</code></pre>
                    </div>
                </div>
                <div class="col-lg-6">
                    <h4 class="fw-bold mb-3">Manual Installation</h4>
                    <div class="bg-white p-4 rounded shadow-sm">
                        <pre class="mb-0"><code># Install dependencies
bundle install
npm install

# Setup database
rails db:create
rails db:migrate

# Start the server
rails server

# Visit http://localhost:3000</code></pre>
                    </div>
                </div>
            </div>

            <div class="text-center mt-4">
                <a href="./README.md" class="btn btn-primary btn-lg">
                    <i class="fas fa-book me-2"></i>Full Documentation
                </a>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-dark text-light py-5">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 mb-4">
                    <h5 class="fw-bold mb-3">
                        <i class="fas fa-tasks me-2"></i>Ruby To-Do List
                    </h5>
                    <p class="text-muted">A complete task management application built with Ruby on Rails, featuring modern UI/UX, comprehensive API, and enterprise-level functionality.</p>
                    <div class="d-flex gap-2">
                        <a href="https://github.com" class="btn btn-outline-light btn-sm">
                            <i class="fab fa-github"></i>
                        </a>
                        <a href="./ruby-todo-list/ruby-todo-list.zip" class="btn btn-outline-light btn-sm" download>
                            <i class="fas fa-download"></i>
                        </a>
                        <a href="./README.md" class="btn btn-outline-light btn-sm">
                            <i class="fas fa-book"></i>
                        </a>
                    </div>
                </div>
                <div class="col-lg-4 mb-4">
                    <h5 class="fw-bold mb-3">Features</h5>
                    <ul class="list-unstyled">
                        <li><i class="fas fa-check text-success me-2"></i>Task Management</li>
                        <li><i class="fas fa-check text-success me-2"></i>Priority Levels</li>
                        <li><i class="fas fa-check text-success me-2"></i>Search & Categories</li>
                        <li><i class="fas fa-check text-success me-2"></i>File Attachments</li>
                        <li><i class="fas fa-check text-success me-2"></i>Email Notifications</li>
                        <li><i class="fas fa-check text-success me-2"></i>REST API</li>
                    </ul>
                </div>
                <div class="col-lg-4 mb-4">
                    <h5 class="fw-bold mb-3">Technologies</h5>
                    <div class="d-flex flex-wrap gap-1">
                        <span class="badge bg-primary">Ruby 3.3.10</span>
                        <span class="badge bg-primary">Rails 7.1.3</span>
                        <span class="badge bg-success">PostgreSQL</span>
                        <span class="badge bg-info">Bootstrap 5</span>
                        <span class="badge bg-warning">Docker</span>
                        <span class="badge bg-danger">API Ready</span>
                    </div>
                    <h6 class="fw-bold mt-3 mb-2">Author</h6>
                    <p class="mb-1"><strong>Molla Samser</strong></p>
                    <p class="small text-muted mb-1">
                        <i class="fas fa-envelope me-1"></i>help@rskworld.in<br>
                        <i class="fas fa-phone me-1"></i>+91 93305 39277
                    </p>
                    <p class="small text-muted">
                        <i class="fas fa-map-marker-alt me-1"></i>Nutanhat, Mongolkote<br>
                        Purba Burdwan, West Bengal, India, 713147
                    </p>
                </div>
            </div>
            <hr class="my-4">
            <div class="text-center">
                <p class="mb-0">&copy; 2026 Ruby To-Do List Application. All rights reserved.</p>
                <p class="small text-muted mt-1">Created with ❤️ by Molla Samser</p>
            </div>
        </div>
    </footer>

    <!-- Watermark -->
    <div class="watermark">
        <i class="fas fa-code me-1"></i>rskworld.in
    </div>

    <!-- Floating Action Button -->
    <button class="floating-action" onclick="scrollToTop()">
        <i class="fas fa-arrow-up"></i>
    </button>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        // Smooth scrolling
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

        // Scroll to top function
        function scrollToTop() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        }

        // Navbar background change on scroll
        window.addEventListener('scroll', function() {
            const navbar = document.querySelector('.navbar');
            if (window.scrollY > 100) {
                navbar.style.background = 'rgba(102, 126, 234, 0.95)';
                navbar.style.backdropFilter = 'blur(10px)';
            } else {
                navbar.style.background = 'var(--primary-gradient)';
                navbar.style.backdropFilter = 'none';
            }
        });

        // Animate elements on scroll
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

        const observer = new IntersectionObserver(function(entries) {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.style.opacity = '1';
                    entry.target.style.transform = 'translateY(0)';
                }
            });
        }, observerOptions);

        // Observe feature cards
        document.querySelectorAll('.feature-card').forEach(card => {
            card.style.opacity = '0';
            card.style.transform = 'translateY(30px)';
            card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
            observer.observe(card);
        });

        // Stats counter animation
        function animateCounters() {
            const counters = document.querySelectorAll('.stats-counter');
            counters.forEach(counter => {
                const target = parseInt(counter.textContent);
                let current = 0;
                const increment = target / 100;
                const timer = setInterval(() => {
                    current += increment;
                    if (current >= target) {
                        counter.textContent = target;
                        clearInterval(timer);
                    } else {
                        counter.textContent = Math.floor(current);
                    }
                }, 20);
            });
        }

        // Trigger counter animation when stats section is visible
        const statsSection = document.getElementById('files');
        if (statsSection) {
            const statsObserver = new IntersectionObserver(function(entries) {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        animateCounters();
                        statsObserver.unobserve(entry.target);
                    }
                });
            }, { threshold: 0.5 });
            statsObserver.observe(statsSection);
        }
    </script>
</body>
</html>

883 lines•39.4 KB

markup

RELEASE_NOTES.md

Raw Download

RELEASE_NOTES.md

# 🚀 Ruby To-Do List Application - Release v1.0.0

## 📋 Release Summary

**Version**: 1.0.0
**Date**: January 23, 2026
**Status**: ✅ Production Ready

A complete, enterprise-grade task management application built with Ruby on Rails featuring advanced functionality, professional UI/UX, and comprehensive API support.

---

## 🎯 Key Features

### ✅ Core Functionality
- **Task Management**: Complete CRUD operations (Create, Read, Update, Delete)
- **Priority System**: Three priority levels (Low, Medium, High) with visual indicators
- **Completion Tracking**: Mark tasks as complete with automatic timestamping
- **User Authentication**: Secure login/registration with Devise
- **Database Integration**: PostgreSQL with proper relationships and indexing

### 🚀 Advanced Features
- **Full-Text Search**: PostgreSQL-powered search across titles and descriptions
- **Task Categories**: Custom categories with color coding and statistics
- **File Attachments**: Active Storage integration for file uploads
- **Email Notifications**: Automated reminders for due/overdue tasks
- **REST API**: Complete JSON API for mobile app integration
- **Background Jobs**: Sidekiq-powered asynchronous processing
- **Docker Support**: Containerized deployment with docker-compose

### 🎨 User Experience
- **Responsive Design**: Mobile-first Bootstrap 5 interface
- **Professional UI**: Modern gradients, animations, and transitions
- **Statistics Dashboard**: Real-time task metrics and progress bars
- **Interactive Elements**: Hover effects, loading states, smooth animations
- **Accessibility**: ARIA labels, keyboard navigation, screen reader support

---

## 📊 Project Statistics

- **📁 Total Files**: 200+ files
- **🏗️ Lines of Code**: 10,000+ lines
- **🎯 Models**: 3 (User, Task, Category)
- **🎮 Controllers**: 5 (including API controllers)
- **📄 Views**: 20+ ERB templates
- **🧪 Tests**: Complete test suite with fixtures
- **📦 Dependencies**: 20+ Ruby gems

---

## 🛠️ Technical Stack

### Backend
- **Ruby**: 3.3.10
- **Rails**: 7.1.3
- **Database**: PostgreSQL 15
- **Authentication**: Devise
- **Search**: pg_search
- **File Storage**: Active Storage
- **Background Jobs**: Sidekiq + Redis
- **Email**: Action Mailer

### Frontend
- **CSS Framework**: Bootstrap 5.3
- **JavaScript**: jQuery + Custom JS
- **Icons**: Font Awesome 6
- **Typography**: Inter Font Family
- **Responsive**: Mobile-first design

### Deployment
- **Web Server**: Puma
- **Container**: Docker + Docker Compose
- **Platform**: Heroku-ready
- **Process**: Procfile included

### Development
- **Testing**: Minitest + Capybara + Selenium
- **Code Quality**: RuboCop (recommended)
- **Documentation**: Comprehensive README
- **Version Control**: Git with detailed history

---

## 📁 Project Structure

```
ruby-todo-list/
├── 📂 app/ # Application code
│ ├── 📂 controllers/ # MVC controllers
│ ├── 📂 models/ # Data models
│ ├── 📂 views/ # ERB templates
│ ├── 📂 helpers/ # View helpers
│ ├── 📂 mailers/ # Email functionality
│ ├── 📂 jobs/ # Background jobs
│ ├── 📂 assets/ # Static assets
│ └── 📂 channels/ # Action Cable (prepared)
├── 📂 config/ # Configuration files
├── 📂 db/ # Database migrations & schema
├── 📂 lib/ # Library code
├── 📂 test/ # Test suite
├── 📂 public/ # Static files
├── 📂 tmp/ # Temporary files
├── 📂 vendor/ # Third-party code
├── 📄 Dockerfile # Docker configuration
├── 📄 docker-compose.yml # Docker services
├── 📄 Gemfile & Gemfile.lock # Dependencies
├── 📄 README.md # Documentation
├── 📄 LICENSE # MIT License
└── 📄 index.html # Landing page
```

---

## 🚀 Getting Started

### Prerequisites
- Ruby 3.3.10
- Rails 7.1.3
- PostgreSQL 15
- Redis (for background jobs)

### Quick Start

#### Option 1: Docker (Recommended)
```bash
# Clone repository
git clone https://github.com/rskworld/ruby-todo-list.git
cd ruby-todo-list

# Start with Docker
docker-compose up --build

# Setup database
docker-compose exec app rails db:migrate

# Visit http://localhost:3000
```

#### Option 2: Manual Setup
```bash
# Install dependencies
bundle install
npm install

# Setup database
rails db:create
rails db:migrate

# Start server
rails server
```

### Environment Variables
```bash
# Copy example file
cp .env.example .env

# Configure your settings
RAILS_ENV=development
DATABASE_URL=postgresql://user:password@localhost/ruby_todo_list
REDIS_URL=redis://localhost:6379/0
```

---

## 📚 API Documentation

### Authentication
All API endpoints require authentication. Include the token in headers:
```
Authorization: Bearer <user_token>
```

### Endpoints

#### Tasks API
- `GET /api/v1/tasks` - List all tasks
- `POST /api/v1/tasks` - Create task
- `GET /api/v1/tasks/:id` - Get task details
- `PATCH /api/v1/tasks/:id` - Update task
- `DELETE /api/v1/tasks/:id` - Delete task
- `PATCH /api/v1/tasks/:id/toggle_complete` - Toggle completion

#### Categories API
- `GET /api/v1/categories` - List all categories
- `GET /api/v1/categories/:id` - Get category details

### Response Format
```json
{
"success": true,
"data": {
// Response data
}
}
```

---

## 🧪 Testing

Run the comprehensive test suite:
```bash
# Run all tests
rails test

# Run specific test
rails test test/models/task_test.rb

# Run with coverage (if configured)
rails test
```

---

## 🚀 Deployment

### Heroku Deployment
1. Create Heroku app
2. Add PostgreSQL and Redis add-ons
3. Push to Heroku
4. Run migrations

### Docker Deployment
1. Build and run containers
2. Configure environment variables
3. Setup reverse proxy (nginx)

### Manual Production
1. Configure production environment
2. Setup web server (nginx + puma)
3. Configure SSL certificates
4. Setup monitoring and logging

---

## 🤝 Contributing

1. Fork the repository
2. Create feature branch (`git checkout -b feature/amazing-feature`)
3. Commit changes (`git commit -m 'Add amazing feature'`)
4. Push to branch (`git push origin feature/amazing-feature`)
5. Open Pull Request

---

## 📞 Support

- **Author**: Molla Samser
- **Email**: help@rskworld.in
- **Phone**: +91 93305 39277
- **Address**: Nutanhat, Mongolkote, Purba Burdwan, West Bengal, India, 713147
- **Year**: 2026

For support, questions, or contributions, please contact: help@rskworld.in

---

## 📜 License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

---

## 🙏 Acknowledgments

- Ruby on Rails framework
- Bootstrap 5 for UI components
- Font Awesome for icons
- PostgreSQL for database
- Redis for caching
- All contributors and the open-source community

---

**🎉 Thank you for choosing Ruby To-Do List Application!**

*Built with ❤️ by Molla Samser*
*Released: January 23, 2026*

Rakefile

Raw Download

# Ruby To-Do List Application - Rakefile
# Created by: Molla Samser (help@rskworld.in, +91 93305 39277)
# Address: Nutanhat, Mongolkote, Purba Burdwan, West Bengal, India, 713147
# Year: 2026

# Add your own tasks in files placed in lib/tasks ending in .rake,
# for example lib/tasks/capistrano.rake, and they will automatically be available to Rake.

require_relative "config/application"

Rails.application.load_tasks

11 lines•429 B

text

Theme Settings

Color Scheme

Display Options

Font Size

RELEASE_NOTES.md

Theme Settings

Color Scheme

Display Options

Font Size

RELEASE_NOTES.md

🚀 Support RSK World