The Pon5 Project

A simple sample website for uploading and viewing videos

Technology:

• Procedural PHP
• React JS
• MySQL
• Apache2
• Docker
• ffmpeg

Features:

• Video IDs hashed to prevent sequential scraping
• Video upload timestamps recorded and displayed
• Video authors stored and displayed
• Default uploader is "anonymous", allowing unauthed users to upload

Code Sample Points:

Docker

• Dockerized the application for ease and reliability of development
• Apache2 and PHP config settings set via shell in Docker RUN commands (Dockerfile)
• Docker compose file includes a phpMyAdmin image for manual schema generation and database debugging

SQL

• SQL schema for MySQL read from prepared file (schema/pon5_db.sql)
• SQL statements using procedural PHP mysqli

PHP

• Procedural handling for simple POST and GET requests
• Uses hash_pbkdf2 for hashing video IDs
• Calls ffmpeg on saved videos to generate thumbnails

React

• Videos and thumbnails served as files from Apache/PHP
• Video info fetched from a PHP GET request and displayed
• Re-usable video cards for displaying thumbnails and video info
• Basic routing between urls in a single-page application
• Navbar with responsive and clickable icons
• Input checks on upload form performed by PHP with errors parsed and displayed by React without disrupting form inputs. Spinner enabled and "submit" button disabled while waiting for the POST response.

To run, use:

docker compose --profile react up --build