{"id":27958556,"url":"https://github.com/ersync/cinemad","last_synced_at":"2025-05-07T18:25:18.392Z","repository":{"id":285916851,"uuid":"739232643","full_name":"ersync/cinemad","owner":"ersync","description":"A Rails \u0026 Vue.js movie database project inspired by TMDB","archived":false,"fork":false,"pushed_at":"2025-04-03T09:58:02.000Z","size":6260,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-03T10:37:30.049Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://cinemad.emadrahimi.dev","language":"Ruby","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/ersync.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,"publiccode":null,"codemeta":null}},"created_at":"2024-01-05T04:38:33.000Z","updated_at":"2025-04-03T09:58:06.000Z","dependencies_parsed_at":"2025-04-03T10:38:28.265Z","dependency_job_id":"175ff189-5288-4bee-a321-5e7bb84d58f8","html_url":"https://github.com/ersync/cinemad","commit_stats":null,"previous_names":["ersync/cinemad"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ersync%2Fcinemad","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ersync%2Fcinemad/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ersync%2Fcinemad/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ersync%2Fcinemad/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ersync","download_url":"https://codeload.github.com/ersync/cinemad/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252932714,"owners_count":21827368,"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":[],"created_at":"2025-05-07T18:25:17.736Z","updated_at":"2025-05-07T18:25:18.379Z","avatar_url":"https://github.com/ersync.png","language":"Ruby","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\n# CinEmad 🎬\n\n\u003cdiv align=\"center\"\u003e\n\t\u003ca href=\"https://github.com/user-attachments/assets/f3d2f6ba-ec4a-4075-8e5f-0ed6231e6445\" target=\"_blank\"\u003e\n\t\t\u003cimg src=\"https://github.com/user-attachments/assets/f3d2f6ba-ec4a-4075-8e5f-0ed6231e6445\" width=\"350\" alt=\"Inception Full Page\"/\u003e\n\t\u003c/a\u003e\n\t\u003ca href=\"https://github.com/user-attachments/assets/95a89499-b26e-46ff-bafd-82f6db16859f\" target=\"_blank\"\u003e\n\t\u003cimg src=\"https://github.com/user-attachments/assets/95a89499-b26e-46ff-bafd-82f6db16859f\" width=\"350\" alt=\"The Dark Knight Full Page\"/\u003e\n\t\u003c/a\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n### A feature-rich film discovery application built with Ruby on Rails and Vue.js\n\n\u003cp\u003e\n  \u003ca href=\"https://cinemad.emadrahimi.dev\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/✨_Live_Demo-1a365d?style=for-the-badge\" alt=\"Live Demo\"\u003e\u003c/a\u003e   \n  \u003ca href=\"https://emadrahimi.dev\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/Portfolio-008080?style=for-the-badge\" alt=\"Portfolio\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003c/div\u003e\n\n\n## Table of Contents\n- [Overview](#overview)\n- [Key Features](#key-features)\n- [Tech Stack](#tech-stack)\n- [Screenshots](#screenshots)\n- [Getting Started](#getting-started)\n- [Architecture](#architecture)\n- [Deployment](#deployment)\n- [Lessons Learned](#lessons-learned)\n- [License](#license)\n\n## Overview\n\n**CinEmad** started as my final learning project but soon evolved into a comprehensive endeavor with a focus on user experience and technical implementation. The project demonstrates full-stack development techniques across a modern tech stack, implementing practical features while maintaining clean architecture and responsive design.\n\n## Key Features\n\n- **Comprehensive movie database** with detailed film information\n- **Clean RESTful API** with secure authentication using Devise\n- **Advanced search and filtering** across multiple criteria\n- **Reactive frontend** using Vue's state management and real-time updates\n- **Responsive design** optimized for mobile and desktop experiences\n- **User profiles** with watchlists, favorites, ratings, and reviews\n- **Dark Theme support** with seamless light/dark mode transitions\n\nThe codebase includes +100 Vue components and +20 ActiveRecord models.\n\n## Tech Stack\n\n**Frontend:**\n- Vue.js 3 (Composition API)\n- Vue Router for navigation\n- Pinia for state management\n- Tailwind CSS for styling\n- Vite for build tooling\n\n**Backend:**\n- Ruby on Rails 7\n- PostgreSQL database\n\n**Authentication:**\n- Devise\n\n**Testing:**\n- RSpec\n\n## Screenshots\n\n\u003cdiv align=\"center\"\u003e\n  \u003ctable\u003e\n\t\u003ctr\u003e\n\t  \u003ctd\u003e\u003cimg src=\"https://github.com/user-attachments/assets/2a082c57-c032-4799-88bf-3f6f0c6c08d1\" width=\"300\" alt=\"Mobile Login Page\"\u003e\u003c/td\u003e\n\t  \u003ctd\u003e\u003cimg src=\"https://github.com/user-attachments/assets/ca26d259-f037-4610-b994-a89aab77e7ac\" width=\"300\" alt=\"Mobile Menu\"\u003e\u003c/td\u003e\n\t  \u003ctd\u003e\u003cimg src=\"https://github.com/user-attachments/assets/cf4b28e7-1120-4070-85f2-0370384a7c70\" width=\"300\" alt=\"Mobile Reviews Page\"\u003e\u003c/td\u003e\n\t  \u003ctd\u003e\u003cimg src=\"https://github.com/user-attachments/assets/7e642c0f-a6e7-44c4-8a9e-82cc61a6e544\" width=\"300\" alt=\"Mobile Show Page\"\u003e\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t  \u003ctd\u003e\u003cimg src=\"https://github.com/user-attachments/assets/d68abafd-b947-4622-a941-1822dbe2e903\" width=\"300\" alt=\"Desktop Profile Page\"\u003e\u003c/td\u003e\n\t  \u003ctd\u003e\u003cimg src=\"https://github.com/user-attachments/assets/b8ab4d59-5d73-401b-b69a-a2862657cf9e\" width=\"300\" alt=\"Desktop Discovery Page\"\u003e\u003c/td\u003e\n\t  \u003ctd\u003e\u003cimg src=\"https://github.com/user-attachments/assets/fd635f2a-7830-4f1e-a03c-fab5d0e470fe\" width=\"300\" alt=\"Desktop Light Theme Login Page\"\u003e\u003c/td\u003e\n\t  \u003ctd\u003e\u003cimg src=\"https://github.com/user-attachments/assets/63fe0efe-3f76-4ac3-8ff0-9a55e6ca842b\" width=\"300\" alt=\"Desktop Dark Theme Login Page\"\u003e\u003c/td\u003e\n\t\u003c/tr\u003e\n  \u003c/table\u003e\n\u003c/div\u003e\n\n## Getting Started\n\n### Prerequisites\n\n- Ruby 3.0+\n- Node.js 18+\n- PostgreSQL 12+\n- Yarn\n\n### Installation\n\n```bash\n# Clone the repository\ngit clone https://github.com/ersync/cinemad.git\ncd cinemad\n\n# Install dependencies\nbundle install\nyarn install\n\n# Setup database and attach media assets\nbin/rails db:create db:migrate db:seed\nbin/rails movies:attach_all_media  # Attaches images and media files to movie and people records\n```\n\n\n### Running Locally\n\nStart the development servers (in separate terminals):\n\n```bash\n# Terminal 1: Rails API server\nbin/rails server\n\n# Terminal 2: Vite development server for Vue frontend\nbin/vite dev\n```\n\n\nThen visit `http://localhost:3000` in your browser.\n\n## Architecture\n\n### Backend\n\nThe Rails API implements a clean architecture with:\n\n- **20+ ActiveRecord models** with complex relationships\n- **PORO Pattern**: Extensive use of Plain Old Ruby Objects for business logic\n- **Service Objects**: Dedicated classes for complex operations and external integrations\n- **Serializers**: Custom JSON serialization for optimized API responses\n- **Skinny Controllers**: Controllers delegating to service objects for maintainable code\n- **Advanced filtering system** combining multiple criteria (genres, release dates, languages)\n- **Rake Tasks**: Composable tasks with an all-in-one setup command\n\nThe application features a fairly complex relational database structure:\n\n\u003cimg src=\"https://github.com/user-attachments/assets/878f2ac5-81e6-4b5e-b7b2-897839d5b1c6\" alt=\"Database Schema Diagram\" style=\"height: 500px; width: auto;\"\u003e\n\n### Frontend\n\nThe Vue.js frontend features a sophisticated component architecture:\n\n- **100+ Vue Components**: Organized in a maintainable hierarchy for reusability\n- **State Management**: Uses Pinia with four specialized stores:\n  - `auth`: Handles user authentication state\n  - `movies`: Manages movie data and filtering\n  - `userInteraction`: Tracks ratings, reviews, and watchlist actions\n  - `loading`: Controls loading states and UI feedback\n- **Theme Support**: Built-in dark mode with a simple toggle between light and dark interfaces\n- **Reactivity**: Instant visual feedback for ratings, watchlists, favorites and other user interactions\n  \n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/bc4694c4-768c-4bd6-ae4b-fa1f3a86cd7d\" width=\"320\" alt=\"Mobile Action Panel\" style=\"margin-right: 5px; margin-bottom: 5px;\"\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/7eb2454b-379f-404c-9f22-9dc6df72f78c\" width=\"450\" alt=\"Desktop Action Panel\" style=\"margin-bottom: 5px;\"\u003e\n\u003c/div\u003e\n\n### Mobile-First Design\n\nThe application was designed with mobile users in mind first:\n\n- Device-specific components where appropriate\n- Touch-friendly interfaces with appropriate tap targets\n- Optimized media loading for various connection speeds\n- Automatic switching between light and dark modes based on device settings\n- Manual theme toggle for user preference override\n\n## Deployment\n\nDeploying a Rails application for free turned out to be surprisingly elusive. What many developers consider the \"free Rails hosting landscape\" has largely become a mirage. Despite advertising free tiers, platforms like Render and Fly.io still required credit card information upfront, Railway's complimentary credits vanished quickly, and alternative PaaS solutions came with similarly restrictive conditions.\n\n\nUltimately, I deployed CinEmad on a budget-friendly VPS with the following setup:\n- Ubuntu 20.04 LTS\n- Nginx as reverse proxy with SSL via **Let's Encrypt**\n- Puma application server\n- PostgreSQL database\n\nRather than using **Capistrano**, I opted for a manual deployment approach to gain deeper insights into the Linux server environment and deployment process. This hands-on experience provided valuable learning opportunities about server configuration, environment setup, and application monitoring. The current server isn't particularly powerful, but it's sufficient to showcase this demo project's capabilities while keeping costs manageable.\n\n## Lessons Learned\n\nThis project taught me more than just Rails and Vue fundamentals:\n\n- **Managing complexity** in large codebases\n- **Planning component architecture** for maintainability\n- **Performance optimization** for media-heavy applications\n- **Progressive enhancement** for diverse user devices\n\nCinEmad represents my growth as a developer and has strengthened my ability to build full-stack applications that balance technical functionality with user experience.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fersync%2Fcinemad","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fersync%2Fcinemad","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fersync%2Fcinemad/lists"}