• Overview
• Key Features
• Tech Stack
• Screenshots
• Getting Started
• Architecture
• Deployment
• Lessons Learned
• License

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.

• Comprehensive movie database with detailed film information
• Clean RESTful API with secure authentication using Devise
• Advanced search and filtering across multiple criteria
• Reactive frontend using Vue's state management and real-time updates
• Responsive design optimized for mobile and desktop experiences
• User profiles with watchlists, favorites, ratings, and reviews
• Dark Theme support with seamless light/dark mode transitions

The codebase includes +100 Vue components and +20 ActiveRecord models.

Frontend:

• Vue.js 3 (Composition API)
• Vue Router for navigation
• Pinia for state management
• Tailwind CSS for styling
• Vite for build tooling

Backend:

• Ruby on Rails 7
• PostgreSQL database

Authentication:

• Devise

Testing:

• RSpec

• Ruby 3.0+
• Node.js 18+
• PostgreSQL 12+
• Yarn

# Clone the repository
git clone https://github.com/ersync/cinemad.git
cd cinemad

# Install dependencies
bundle install
yarn install

# Setup database and attach media assets
bin/rails db:create db:migrate db:seed
bin/rails movies:attach_all_media  # Attaches images and media files to movie and people records

Start the development servers (in separate terminals):

# Terminal 1: Rails API server
bin/rails server

# Terminal 2: Vite development server for Vue frontend
bin/vite dev

Then visit http://localhost:3000 in your browser.

The Rails API implements a clean architecture with:

• 20+ ActiveRecord models with complex relationships
• PORO Pattern: Extensive use of Plain Old Ruby Objects for business logic
• Service Objects: Dedicated classes for complex operations and external integrations
• Serializers: Custom JSON serialization for optimized API responses
• Skinny Controllers: Controllers delegating to service objects for maintainable code
• Advanced filtering system combining multiple criteria (genres, release dates, languages)
• Rake Tasks: Composable tasks with an all-in-one setup command

The application features a fairly complex relational database structure:

The Vue.js frontend features a sophisticated component architecture:

• 100+ Vue Components: Organized in a maintainable hierarchy for reusability
• State Management: Uses Pinia with four specialized stores:
  • auth: Handles user authentication state
  • movies: Manages movie data and filtering
  • userInteraction: Tracks ratings, reviews, and watchlist actions
  • loading: Controls loading states and UI feedback
• Theme Support: Built-in dark mode with a simple toggle between light and dark interfaces
• Reactivity: Instant visual feedback for ratings, watchlists, favorites and other user interactions

The application was designed with mobile users in mind first:

• Device-specific components where appropriate
• Touch-friendly interfaces with appropriate tap targets
• Optimized media loading for various connection speeds
• Automatic switching between light and dark modes based on device settings
• Manual theme toggle for user preference override

Deploying 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.

Ultimately, I deployed CinEmad on a budget-friendly VPS with the following setup:

• Ubuntu 20.04 LTS
• Nginx as reverse proxy with SSL via Let's Encrypt
• Puma application server
• PostgreSQL database

Rather 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.

This project taught me more than just Rails and Vue fundamentals:

• Managing complexity in large codebases
• Planning component architecture for maintainability
• Performance optimization for media-heavy applications
• Progressive enhancement for diverse user devices

CinEmad represents my growth as a developer and has strengthened my ability to build full-stack applications that balance technical functionality with user experience.

This project is licensed under the MIT License - see the LICENSE file for details.