Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jonasfroeller/vidslide
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.
https://github.com/jonasfroeller/vidslide
apache figma i18n iconify mysql mysqli nodejs skeleton social-media sveltekit tailwindcss
Last synced: about 1 month ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/jonasfroeller/vidslide
- Owner: jonasfroeller
- Created: 2023-03-20T21:35:21.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2023-06-16T18:08:18.000Z (over 1 year ago)
- Last Synced: 2024-12-05T02:11:23.404Z (about 1 month ago)
- Topics: apache, figma, i18n, iconify, mysql, mysqli, nodejs, skeleton, social-media, sveltekit, tailwindcss
- Language: Svelte
- Homepage: https://svelte-kit-vid-slide.vercel.app
- Size: 726 KB
- Stars: 10
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# VidSlide
[](https://svelte-kit-vid-slide.vercel.app)
[](https://jonasfroeller.github.io/SvelteKit_VidSlide/)
[](http://commitizen.github.io/cz-cli/)
## Info
VidSlide 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) & [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/).
* **Wireframe:** [figma](https://figma.com/file/jAorHmVSyFGXCQxHzR57w6/VidSlide?node-id=0%3A1&t=hr9c5Co75ePuGCz3-1)
* **Demo:** [vercel](https://svelte-kit-vid-slide.vercel.app)
* Frontend: [github](https://github.com/jonasfroeller/SvelteKit_VidSlide/tree/master/frontend)
* Backend: [github](https://github.com/jonasfroeller/SvelteKit_VidSlide/tree/master/backend)
* Database: [github](https://github.com/jonasfroeller/SvelteKit_VidSlide/tree/master/database)
## 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](https://hub.docker.com/r/jonasfroeller/vidslide-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, )
`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](http://localhost:8196/db_api.php?setup_db=true)