Skip to content

A TikTok, Instagram Reels and YouTube Reels inspired app. Post, edit and delete posts. Frontend hosted on Vercel. Backend hosted on OracleCloud. Built with SvelteKit, ViteJS, TailwindCSS, SkeletonUI, FloatingUI, Typesave-i18n, Iconify, coollabs, Zod, JWT, MySQL, Apache, JS, TS, HTML, PHP, CSS.

Notifications You must be signed in to change notification settings

jonasfroeller/VidSlide

Repository files navigation

VidSlide

Frontend-Hosting Docs commitizen friendly

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).

Technologies/Languages

Svelte NPM Vite ESLint JWT TailwindCSS

HTML5 CSS3 JavaScript NodeJS TypeScript PHP MySQL Markdown

Docker Apache Vercel Oracle

Visual Studio Code

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.

docker-compose

Stop And Delete Containers

  • stop and delete: docker-compose down
  • stop: docker-compose stop
  • start after stopped: docker-compose start
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

About

A TikTok, Instagram Reels and YouTube Reels inspired app. Post, edit and delete posts. Frontend hosted on Vercel. Backend hosted on OracleCloud. Built with SvelteKit, ViteJS, TailwindCSS, SkeletonUI, FloatingUI, Typesave-i18n, Iconify, coollabs, Zod, JWT, MySQL, Apache, JS, TS, HTML, PHP, CSS.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published