The website development of Red Button Studio.

Sinsa-dong, Gangnam-gu, Korea

Red Button Studio, located in Sinsa-dong, Gangnam-gu, Seoul, is a studio that provides self-video service. To enhance the studio's brand image, the website developed to maximize the Look & Feel.

The source code is open so that you can download the source code and set it up with ease if you would like to have your own exclusive environment.

Demo

Here is a working live demo : Click

Site

Home Page

High resolution video played with HLS streaming method. Use Video-JS to support a variety of devices.

Floating Button

Floating Button for mobile users.

Instagram Feed Synchronization

Instagram feed pictures is collected from running on the AWS EC2 server in real time. Then, Save this to the database.

Dynamic Animations

For fun especially mobile users, add sliding animations.

Project interests

Front-end

HLS Streaming

• Need real-time video streaming technology to match the self-video studio concept
• AWS CloudFront for simultaneous streaming to multiple connectors
• Video JS

Instagram Grid Style

• Real-time synchronized Instagram feed layout

Optimized for mobile(android & ios) and web

• CSS for devices which has multiple resolutions
• Video format with Android and iOS support

Back-end

Crawling Bot

• Develop a crawling bot for real-time Instagram feed synchronization
• Modularize each function like a bot e.g. Log in, Crawling, Terminate

Server

• AWS EC2, Ubuntu 18.04
• Crontab(crawling bot with real-time scheduling)

Folder Structure

.
├── .idea
├── homepage                # Main page app
├── redbttn_home            # Django project settings
├── static                  # Static folder
├── templates               # HTML template folder
├── insta_login.py          # Selenium module code
├── parser.py               # Instagram crawling code
├── manage.py
├── requirements.txt
├── LICENSE
└── README.md

Dependencies

to run parser.py:

• download chromedriver, unzip, move to HOME_PATH/chromedriver (mac os / linux)

create a secret.json file with variables:

SECRET_KEY = 'secret_key_in_settings.py'
username = 'instagram_username'
password = 'instagram_password'

Run

to make instagram database using crawling:

python3 parser.py

to run server:

python3 manage.py runserver

Video

• PC Version
• Mobile Version

Skill

Wiki

📕WIKI

The wiki include concerns about technical issues and solutions to the development of the homepage.

Reference

• VideoJS

• Web Scraping Instagram with Selenium | by Mariyasha | Analytics Vidhya | Medium

• Automate TINDER with Python tutorial | AJ-4 | Youtube

• Django Project Deploy - 1. AWS | nachwon

• Amazon AWS :: Configuring HLS Streaming with Cloudfront | SalesMore

• Building Video Streaming Services (AWS s3/cloudFront, HLS, video.js) | Dev. Nam Lab.

License

The MIT License