https://github.com/ersync/cinemad
A Rails & Vue.js movie database project inspired by TMDB
https://github.com/ersync/cinemad
Last synced: about 1 year ago
JSON representation
A Rails & Vue.js movie database project inspired by TMDB
- Host: GitHub
- URL: https://github.com/ersync/cinemad
- Owner: ersync
- License: mit
- Created: 2024-01-05T04:38:33.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-04-03T09:58:02.000Z (about 1 year ago)
- Last Synced: 2025-04-03T10:37:30.049Z (about 1 year ago)
- Language: Ruby
- Homepage: https://cinemad.emadrahimi.dev
- Size: 5.97 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# CinEmad 🎬
### A feature-rich film discovery application built with Ruby on Rails and Vue.js
## Table of Contents
- [Overview](#overview)
- [Key Features](#key-features)
- [Tech Stack](#tech-stack)
- [Screenshots](#screenshots)
- [Getting Started](#getting-started)
- [Architecture](#architecture)
- [Deployment](#deployment)
- [Lessons Learned](#lessons-learned)
- [License](#license)
## Overview
**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.
## Key Features
- **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.
## Tech Stack
**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
## Screenshots
## Getting Started
### Prerequisites
- Ruby 3.0+
- Node.js 18+
- PostgreSQL 12+
- Yarn
### Installation
```bash
# 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
```
### Running Locally
Start the development servers (in separate terminals):
```bash
# 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.
## Architecture
### Backend
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:
### Frontend
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
### Mobile-First Design
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
## Deployment
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.
## Lessons Learned
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.
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.