{"id":22387898,"url":"https://github.com/jonasfroeller/vidslide","last_synced_at":"2025-10-15T13:31:27.638Z","repository":{"id":151094859,"uuid":"616680408","full_name":"jonasfroeller/VidSlide","owner":"jonasfroeller","description":"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.","archived":false,"fork":false,"pushed_at":"2023-06-16T18:08:18.000Z","size":743,"stargazers_count":10,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-01T02:44:07.363Z","etag":null,"topics":["apache","figma","i18n","iconify","mysql","mysqli","nodejs","skeleton","social-media","sveltekit","tailwindcss"],"latest_commit_sha":null,"homepage":"https://svelte-kit-vid-slide.vercel.app","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jonasfroeller.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-03-20T21:35:21.000Z","updated_at":"2025-01-19T11:11:27.000Z","dependencies_parsed_at":"2023-07-17T01:30:16.089Z","dependency_job_id":null,"html_url":"https://github.com/jonasfroeller/VidSlide","commit_stats":null,"previous_names":["jonasfroeller/vidslide"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonasfroeller%2FVidSlide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonasfroeller%2FVidSlide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonasfroeller%2FVidSlide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonasfroeller%2FVidSlide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jonasfroeller","download_url":"https://codeload.github.com/jonasfroeller/VidSlide/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":236611862,"owners_count":19177016,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["apache","figma","i18n","iconify","mysql","mysqli","nodejs","skeleton","social-media","sveltekit","tailwindcss"],"created_at":"2024-12-05T02:11:33.300Z","updated_at":"2025-10-15T13:31:22.306Z","avatar_url":"https://github.com/jonasfroeller.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# VidSlide\n\n[![Frontend-Hosting](https://therealsujitk-vercel-badge.vercel.app/?app=svelte-kit-vid-slide)](https://svelte-kit-vid-slide.vercel.app)\n[![Docs](https://github.com/jonasfroeller/SvelteKit_VidSlide/actions/workflows/pages/pages-build-deployment/badge.svg)](https://jonasfroeller.github.io/SvelteKit_VidSlide/)\n[![commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n\n## Info  \n\nVidSlide is a TikTok, Instagram Reels and YouTube Reels inspired app. Post, edit and delete posts. Built with [SvelteKit](https://kit.svelte.dev/), [ViteJS](https://vitejs.dev/), [TailwindCSS](https://tailwindcss.com/), [SkeletonUI](https://www.skeleton.dev/), [FloatingUI](https://floating-ui.com/), [Iconify](https://iconify.design/), [Typesave-i18n](https://github.com/ivanhofer/typesafe-i18n), [Zod](https://zod.dev/), [MySQL](https://hub.docker.com/layers/library/mysql/8.0.32/images/sha256-c86dfd69b3d1437e5d192447f0bdc57407d48bd379b97a453e11d72b97962e3b?context=explore), [Apache](https://hub.docker.com/layers/library/php/8.1.17-apache/images/sha256-21925d36ebc3a183aec51ffa417d31c89f97aedca8017ab9ddfd1e2bc80102a6?context=explore), [JS](https://www.w3schools.com/js/js_versions.asp) \u0026 [TS](https://www.typescriptlang.org/), [PHP](https://www.php.net/manual/de/intro-whatis.php), [PHP-JWT](https://github.com/firebase/php-jwt), [PHP-DotEnv](https://github.com/vlucas/phpdotenv), [PHP-FFMpeg](https://github.com/PHP-FFMpeg/PHP-FFMpeg), [Binaries-FFMpeg](https://ffmpeg.org/), [PHP-GD](https://www.php.net/manual/de/book.image.php), [PHP-MySQLi](https://www.php.net/manual/de/book.mysqli.php), [CSS](https://www.w3schools.com/css/), [HTML](https://www.w3schools.in/html/history), [Docker](https://www.docker.com/), [Vercel (frontend NodeJS hosting)](https://vercel.com/), [OracleCloud (backend/database Docker container hosting)](https://www.oracle.com/de/cloud/).\n\n* **Wireframe:** [figma](https://figma.com/file/jAorHmVSyFGXCQxHzR57w6/VidSlide?node-id=0%3A1\u0026t=hr9c5Co75ePuGCz3-1)\n* **Demo:** [vercel](https://svelte-kit-vid-slide.vercel.app)\n* Frontend: [github](https://github.com/jonasfroeller/SvelteKit_VidSlide/tree/master/frontend)\n* Backend: [github](https://github.com/jonasfroeller/SvelteKit_VidSlide/tree/master/backend)\n* Database: [github](https://github.com/jonasfroeller/SvelteKit_VidSlide/tree/master/database)\n\n## Technologies/Languages\n\n![Svelte](https://img.shields.io/badge/svelte-%23f1413d.svg?style=for-the-badge\u0026logo=svelte\u0026logoColor=white)\n![NPM](https://img.shields.io/badge/NPM-%23CB3837.svg?style=for-the-badge\u0026logo=npm\u0026logoColor=white)\n![Vite](https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge\u0026logo=vite\u0026logoColor=white)\n![ESLint](https://img.shields.io/badge/ESLint-4B3263?style=for-the-badge\u0026logo=eslint\u0026logoColor=white)\n![JWT](https://img.shields.io/badge/JWT-black?style=for-the-badge\u0026logo=JSON%20web%20tokens)\n![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge\u0026logo=tailwind-css\u0026logoColor=white)\n\n![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge\u0026logo=html5\u0026logoColor=white)\n![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge\u0026logo=css3\u0026logoColor=white)\n![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge\u0026logo=javascript\u0026logoColor=%23F7DF1E)\n![NodeJS](https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge\u0026logo=node.js\u0026logoColor=white)\n![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge\u0026logo=typescript\u0026logoColor=white)\n![PHP](https://img.shields.io/badge/php-%23777BB4.svg?style=for-the-badge\u0026logo=php\u0026logoColor=white)\n![MySQL](https://img.shields.io/badge/mysql-%2300f.svg?style=for-the-badge\u0026logo=mysql\u0026logoColor=white)\n![Markdown](https://img.shields.io/badge/markdown-%23000000.svg?style=for-the-badge\u0026logo=markdown\u0026logoColor=white)\n\n![Docker](https://img.shields.io/badge/docker-%230db7ed.svg?style=for-the-badge\u0026logo=docker\u0026logoColor=white)\n![Apache](https://img.shields.io/badge/apache-%23D42029.svg?style=for-the-badge\u0026logo=apache\u0026logoColor=white)\n![Vercel](https://img.shields.io/badge/vercel-%23000000.svg?style=for-the-badge\u0026logo=vercel\u0026logoColor=white)\n![Oracle](https://img.shields.io/badge/Oracle-F80000?style=for-the-badge\u0026logo=oracle\u0026logoColor=white)\n\n![Visual Studio Code](https://img.shields.io/badge/Visual%20Studio%20Code-0078d7.svg?style=for-the-badge\u0026logo=visual-studio-code\u0026logoColor=white)\n\n## Setup\n\n### Setup Frontend\n\n1. `npm install` \u003cspan style=\"color:green\"\u003e// install node_modules (dependencies)\u003c/span\u003e\n\n2. `npm run all` \u003cspan style=\"color:green\"\u003e// view development server\u003c/span\u003e\n\n3. `npm run build` \u003cspan style=\"color:green\"\u003e// build development to production\u003c/span\u003e\n\n4. `npm run preview` \u003cspan style=\"color:green\"\u003e// view production server\u003c/span\u003e\n\n#### Update Frontend Dependencies\n\n`npm outdated` \u003cspan style=\"color:green\"\u003e// displays current, wanted and latest version of dep  \n`npm update` \u003cspan style=\"color:green\"\u003e// updates deps to wanted version (never major versions (could break things))  \n\n### Setup Database \u0026 Backend API\n\n| `sudo docker-compose up -d --build`  \n\u003cspan style=\"color:green\"\u003e\n// The command uses the \"\u003cmark\u003edocker-compose.yaml\u003c/mark\u003e\" file and builds it with the RUN-commands in the \"\u003cmark\u003eDocker\u003c/mark\u003e\" file to install mysqli.\nThe 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.\n\u003c/span\u003e\n\n![docker-compose](./docs/img/docker-compose-censored.png?raw=true \"docker-compose\")\n\n\u003cstrong\u003eStop And Delete Containers\u003c/strong\u003e\n\n* stop and delete: `docker-compose down`  \n* stop: `docker-compose stop`  \n* start after stopped: `docker-compose start`\n\n#### [Apache-PHP-Backend](https://hub.docker.com/r/jonasfroeller/vidslide-backend)\n\n##### Composer dependencies  \n\n\u003cem\u003e(generated from Docker file on docker-compose)\u003c/em\u003e\n\ncomposer.json:\n{\n    \"require\": {\n        \"firebase/php-jwt\": \"^6.4\",\n        \"vlucas/phpdotenv\": \"^5.5\"\n    }\n}\n\n##### Generate JWT keys for authentication  \n\n(Linux | Windows: installed on WSL2, \u003chttps://github.com/openssl/openssl/blob/master/NOTES-WINDOWS.md\u003e)\n\n`openssl genrsa -out private_key.pem 2048` \u003cspan style=\"color:green\"\u003e// generates private key\u003c/span\u003e\n\n`openssl rsa -in private_key.pem -outform PEM -pubout -out public_key.pem` \u003cspan style=\"color:green\"\u003e// generates public key from private key\u003c/span\u003e  \n\n**Example in backend/.env:**  \nPRIVATE_KEY=\"\n-----BEGIN PRIVATE KEY-----\n\u0026#60;RS256 private key\u0026#62;\n-----END PRIVATE KEY-----\"\n\nPUBLIC_KEY=\"\n-----BEGIN PUBLIC KEY-----\n\u0026#60;RS256 public key\u0026#62;\n-----END PUBLIC KEY-----\"\n\nMYSQL_ROOT_PASSWORD=\u0026#60;password\u0026#62;  \n\n#### MySQL-Database\n\n**Password example in /.env:**  \nMYSQL_ROOT_PASSWORD=\u0026#60;password\u0026#62;\n\n**Setup tables with dummy data:**\n[http://localhost:8196/db_api.php?setup_db=true](http://localhost:8196/db_api.php?setup_db=true)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonasfroeller%2Fvidslide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjonasfroeller%2Fvidslide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonasfroeller%2Fvidslide/lists"}