Roku Falshback Case Study

The task was to create a media streaming web app. Using the Roku brand and creating the Flashback brand. The app plays movies, audio and TV from the 1950s to the 1990s. The app is to be fully responsive from mobile to desktop.

Team:

• Kayla Chang as designer
• Me as developer

I used Vue.js as the front-end framework, Sass as the CSS preprocessor, along with HTML5, Ajax and PHP.Initially I created the database with tables for the movies, audio, TV. Then I realized it would make more sense to merge the TV and movies table in one video table becuase they share the same genre types and the same columns. This would allow me to use one fetch call instead of having to do 2 calls in order to pass the table names in the Ajax url. Additionally, I created a table for users with the columns username, password, avatar, role which is either admin or not and permissions level which is a number from 1 to 5. I creatd a video genre table and an audio genre table and linking tables to the video media and music media. I created a table for the user comments. And Finally, I created a table for the age rating categories and linking table to link the ratings id with media id.

The admin role allows the control over other users' accounts. These are the different versions of the menu according to the type of user. The admin menu has the profile section where they can edit or delete users.

I used Vue Router to link to the different components. There is the log in, create user, all users, user home, search, profile, film dashboard, TV dashboard, music dashboard and the selected media element, where the user would be able to comment and share the media element on social media.

I'm still working on the edit user and delete user functionality. I also plan to add social media APIs.

Feel free to check the project repository on github here.