A Pinterest for Fans of Asian Television Dramas
After graduating DevBootcamp, I was eager to put my new skills to use and attain more. A fellow graduate and I connected over an idea to build a web app around our mutual interest in Asian television dramas.
The mission was this: build a platform for Kdrama (Korean drama) fans to connect with each other, discover shows to watch, and categorize their drama collections as they wished.
In addition, I wanted the app to be straightforward and appealing. I have a strong appreciation for UIs that are restrained and unobtrusive and I wanted to create an app that would be a visual delight to use.
Process
We started by mapping out features that would be most beneficial for users. First, filling the database with a variety of shows was necessary. We decided to source them from Asian drama streaming sites like Dramafever (now defunct- RIP) and include links back to those streaming sites. Secondly, since the goal was to connect people, having user accounts that could follow one another was important.
The resulting database schema centered on the Dramas database table, which then had many-to-many and one-to-many relationships to other tables in the database. Together, we built out the backend in Ruby on Rails with a Postgres database so we could deploy it to Heroku.
Challenges Along the Way
Once that was complete, I exclusively handled the front-end development of the app. I wanted it to be dynamic, with changes to the UI happening instantly after a user interacted with it. To achieve this, I needed to use a Javascript framework given the scale of the project. For this reason, I decided to learn AngularJS because it had more documentation and a bigger community behind it at the time (2016).
Throughout the process of building out the frontend, my biggest challenge was integrating AngularJS modules and files with the Rails Asset Pipeline (alas no webpack). Plus, I would frequently run into issues that would take hours or even days to debug only to discover they were caused by a missing semicolon.
Features
Search
Since the app was intended to hold data for tens of thousands of shows, I needed to add a robust engine to retrieve search results quickly and accurately. To this end, I added Elasticsearch and implemented it with the Searchkick rails gem. Users can now simultaneously search for shows, performers, and other users with the search bar located on the app’s main header.
Filter
In addition to a great search engine, I wanted to include the ability to filter shows by genre and country of origin. So I built a dropdown that allows users to check multiple filter categories at a time. Now, if a user is specifically looking for ‘romantic comedies from Korea’ for example, they can easily filter those out.
AWS S3
All photos on the app are stored on Amazon’s S3 cloud storage. I also used Thoughtbot’s PaperClip gem to scale each photo to different sizes, rename them, and collate them for organized storage.
Ratings
Once signed in, users can quickly rate shows by clicking on a number of hearts on the show’s profile page. Therefore, once a user clicks on the fifth heart, all 5 hearts instantly turn red and it gets stored in the app’s database that that particular user gave that particular show a rating of the integer ‘5’. All without a page re-render.
