ZipTube v7.0 - Micro Web Application

• Objective - to create an implementation of a small web service
• Purpose - to demonstrate the construction of a full-stacked web-application, development of both front end (client side) and back end(server side) portions of web application, hosting on cloud services for deployment.

Contributors:

• Chris Allen (@Christopher-Allen-21) | Chris Allen's Linkedin
• Theresa Mashura (@theresa-mashura) | Theresa Mashura's Linkedin
• Justin Banks (@Jbanksalpha) | Justin Banks' Linkedin
• Mike Ninh (@MNinh) | Mike Ninh's Linkedin

Website

• https://master.d2q1obkhk7m117.amplifyapp.com/

Back End of ZipTube Application

• https://github.com/MNinh/FullStack.MicroWebApplication-Server

Front End of ZipTube Application

• https://github.com/Christopher-Allen-21/FullStack.MicroWebApplication-Client (This repository)

Video Library Application

User Interaction

• As a client, (logged in) I

  • can upload new videos
  • can view list of all videos
  • can filter videos by category
  • can post simple text-comments on a video
  • can get in contact with developers
  • can view profile
  • can like or dislike videos
  • view history of watched videos
  • logout of account

• As a client, (not logged in) I

  • can view list of all videos
  • login into account via auth0
  • make an account via auth0

Developmental Notes

Tech Stack

• UML Diagram - PlantUML
• Wireframe - Mockflow
• Visual UI/Front end - Reactjs
• Business Logic/Back end - Java built on Maven with Spring Boot framework
• Data Layer - MySQL hosted with AWS RDS
• Cloud - Backend logic hosted by Heroku. Frontend hosted with AWS Amplify. AWS S3 buckets for video storage.

Installation

Back End

• Use Spring Initializer to create an starting point for you application
• Project Lombok
• AWS S3 Access Keys

Front End

• npm install for React
• import React-Bootstrap, auth0-react, react-router-don, react-promist-tracker, emailjs-com

Running the Application

Back End

• You can run back-end by running the VideoAppApplication.java from: com/GroupProject/VideoApp/VideoAppApplication.java

Front End

• You can run reactjs with: npm start

DEMO