This is my streaming app. You can create an account to make playlists or sign in as a guest (but you won't be able to create playlists). When you first sign in you will be taken to the homepage that has 8 cartoons on it you can select any of those 8 cartoond and be taken to the first episode from that cartoon. Or you can select the "Cartoons List ->" button on the top right and see a whole list of cartoons from A-Z. When you are on the cartoons page the video player is the first thing you see if you scroll down, You will see a "add to playlist" where you can add that video to a selected playlist or create a new one.
TECHNOLOGIES USED:
HTML
CSS/SCSS
JAVASCRIPT
REACT
PLANNING STRATEGY:
To plan for this the first thing i did was come up with some wireframes.
and some user stories:
As a user, I want to be able to create a playlist.
As a user, I want to be able to add cartoons to that playlist.
As a user, I want to be able to edit that playlist.
As a user, I want to be able to delete that playlist.
As a developer, I want the videos to play without any lag or other problems because of the app.
As a user, I want to have an option between light and dark mode.
After all that was done I designed it to the style of the wireframes. I already had a website in mind to get the cartoons from (wcostream.com).
Some of the problems I faced were github's 100MB file size limit, Which I did not know of at the time so when I commited I couldn't push because the mp4 files were to large and even when I reduced them github was still paying attention to the old commits. So I had to just clone my entire repo and overwrite what I had on github which was a huge hassle.
Unsolved Issues/Things I'll add later:
Can't get the playlist stuff similar to the way you would create and add things to a playlist on youtube.
Wanted the playlists in a dropdown menu
More cartoons
Wanted a way for a user to sign-in as a guest
Screenshot of the app:
setup and installation instructions:
- npm install
- npm install video-react redux react chalk
Links:
Back-end repo: https://github.com/gitlep1/streaming-server
Live Client: https://gitlep1.github.io/streaming-client/#/
Live Server: https://cartoonstreaming-server.herokuapp.com/