VidSlide

Info

VidSlide is a TikTok, Instagram Reels and YouTube Reels inspired app. Post, edit and delete posts. Built with SvelteKit, ViteJS, TailwindCSS, SkeletonUI, FloatingUI, Iconify, Typesave-i18n, Zod, MySQL, Apache, JS & TS, PHP, PHP-JWT, PHP-DotEnv, PHP-FFMpeg, Binaries-FFMpeg, PHP-GD, PHP-MySQLi, CSS, HTML, Docker, Vercel (frontend NodeJS hosting), OracleCloud (backend/database Docker container hosting).

• Wireframe: figma
• Demo: vercel
• Frontend: github
• Backend: github
• Database: github

Technologies/Languages

Setup

Setup Frontend

1. npm install // install node_modules (dependencies)

2. npm run all // view development server

3. npm run build // build development to production

4. npm run preview // view production server

Update Frontend Dependencies

npm outdated // displays current, wanted and latest version of dep
npm update // updates deps to wanted version (never major versions (could break things))

Setup Database & Backend API

| sudo docker-compose up -d --build
// The command uses the "docker-compose.yaml" file and builds it with the RUN-commands in the "Docker" file to install mysqli. The compose file includes 2 containers: The mySQL database and the Apache PHP server which functions as an mysqli-API to the database. The frontend fetches data from the backend index.php file which carries the JSON response.

Stop And Delete Containers

• stop and delete: docker-compose down
• stop: docker-compose stop
• start after stopped: docker-compose start

Apache-PHP-Backend

Composer dependencies

(generated from Docker file on docker-compose)

composer.json: { "require": { "firebase/php-jwt": "^6.4", "vlucas/phpdotenv": "^5.5" } }

Generate JWT keys for authentication

(Linux | Windows: installed on WSL2, https://github.com/openssl/openssl/blob/master/NOTES-WINDOWS.md)

openssl genrsa -out private_key.pem 2048 // generates private key

openssl rsa -in private_key.pem -outform PEM -pubout -out public_key.pem // generates public key from private key

Example in backend/.env:
PRIVATE_KEY=" -----BEGIN PRIVATE KEY----- <RS256 private key> -----END PRIVATE KEY-----"

PUBLIC_KEY=" -----BEGIN PUBLIC KEY----- <RS256 public key> -----END PUBLIC KEY-----"

MYSQL_ROOT_PASSWORD=<password>

MySQL-Database

Password example in /.env:
MYSQL_ROOT_PASSWORD=<password>

Setup tables with dummy data: http://localhost:8196/db_api.php?setup_db=true