KDrama Dash - V1

A web application to discover and search for 1500+ Korean TV series. Built using React and Flask. All the data was taken from TMDB's API and pre-processed initially on Kaggle's notebooks.

During its development, additional publicly shared resources were created: a Kaggle dataset, and a relatively simple example regarding how to use the provided dataset to create a recommendation system.

Roadmap

• Research TMDB’s API and retrieve series data
• Perform data cleaning
• Create public Kaggle dataset
• Create public Kaggle notebook for a simple recommendation system
• Perform Exploratory Data Analysis (EDA)
• Develop responsive front-end
• Develop back-end functionality
• Implement series filtering features
• Create item-based collaborative filtering recommendation system
• Containerise and deploy the application
• Test and optimise performance
• Improve UX/UI
• Ensure compatibility with Safari and Firefox
• Research automatic scheduling of data extraction with Airflow
• Implement sign-up and sign-in features
• Migrate application from CSV to a database-based solution
• Design watch-list feature
• Create user-based collaborative filtering recommendation system
• Develop light and dark modes

Stack

• React, Flask and SCSS
• API, Sklearn and EDA
• Item-based collaborative filtering (cosine similarity)
• Docker + Heroku

Project structure

$PROJECT_ROOT
│   # GitHub repo utilities
├── utils
│   # Front end of the application
├─┬ front-end
│ │   # Static files
│ ├── public
│ │   # Main front-end files
│ └─┬ src
│   │   # Page files
│   ├── pages
│   │   # Styling files
│   ├── scss
│   │   # React component files
│   ├── components
│   │   # Routing configuration
│   ├── config
│   │   # Static assets
│   └── assets
│   # Back end of the application
└─┬ back-end
  │   # Data used to build the application
  ├── data
  │   # Flask server
  └── server.py

Highlights

Getting Started

Development

1. Clone the repo

   git clone https://github.com/1391819/kdrama-dash

2. Install all the required libraries

   cd back-end
   pip install -r requirements.txt

3. Start Flask server

   python server.py

4. Install NPM packages

   cd ../front-end
   npm install

5. Modify the package.json file and add the proxy to the flask server's local port

   "proxy": "http://localhost:5000/"

6. Start the project

   cd front-end
   npm start

7. Access the application in your browser:

   http://localhost:5000/

Spinning up the container

1. Build the Docker container

   docker build -t kdrama-dash .

2. Run the container

   docker run -p 5000:5000 kdrama-dash

3. Access the application in your browser:

   http://localhost:5000/

Attributions

The Movie Database

License

MIT © Roberto Nacu