A sharing video platform, which provides numerous features, using VueJS framework for building our own website application. Also, we're using Bootstrap 4 and Vuetify library for quickly design and customize responsive mobile-first sites responsive. This is our front-end repository. You can find more about back-end's information in this link: https://github.com/nguyendacthienngan/WatchOutServer
Currently, we're hosting in local port 8080.
Installation steps:
npm install
npm run serve
Project Structure:
├── build # Compiled files
├── docs # Documentation files
├── src # Source files
│ ├── assets
│ ├── components
│ │ └── comment
│ │ │ └── Comment.vue
│ │ │ └── CommentSection.vue
│ │ └── common
│ │ │ └── Button.vue
│ │ │ └── CommentBar.vue
│ │ │ └── DropAnImage.vue
│ │ │ └── NavBar.vue
│ │ │ └── SearchBar.vue
│ │ │ └── SideBarDetailEditing.vue
│ │ │ └── SideBarEditing.vue
│ │ │ └── SideBarHome.vue
│ │ │ └── ThumbnailVideo.vue
│ │ │ └── TriggerUploadDialog.vue
│ │ └── home
│ │ │ └── Post.vue
│ │ │ └── PostCaption.vue
│ │ │ └── Posts.vue
│ │ └── profile
│ │ │ └── EditProfile.vue
│ │ │ └── Profile.vue
│ │ └── upload-video
│ │ │ └── Upload.vue
│ │ │ └── UploadStepOne.vue
│ │ │ └── UploadStepThree.vue
│ │ │ └── UploadStepTwo.vue
│ │ └── user-management
│ │ │ └── BlockConfirmation.vue
│ │ │ └── ListUsers.vue
│ │ └── video-management
│ │ │ └── DeleteConfirmation.vue
│ │ │ └── ListVideos.vue
│ │ │ └── ShowRecognitionResult.vue
│ │ │ └── VideoDetails.vue
│ └── utils
│ │ └── repository
│ │ │ └── AuthRepository.js
│ │ │ └── Repository.js
│ │ │ └── RepositoryFactory.js
│ │ │ └── UsersRepository.js
│ │ │ └── VideosRepository.js
│ │ utils.js
│ └── views
│ │ └── Authentication.vue
│ │ └── Comment.vue
│ │ └── Editing.vue
│ │ └── Home.vue
│ │ └── PageNotFound.vue
│ │ └── Register.vue
│ │ └── UploadVideo.vue
│ main.js
│ routes.js
├── .gitignore
└── README.md
└── package-lock.json
└── package.json
└── vue.config.js
In our project, we're using Repository Factory design pattern for calling API services. This pattern helps instantiate a new object without having to specify exactly which class to instantiate.
- Repository.js takes care of connecting to resources. We will define axios in this file script.
- After that we will all CRUD (Create, Read, Update, Delete) operations for each entity. So that we have: VideosRepository.js, UsersRepository.js, AuthRepository.js
- In the RepositoryFactory.js we can call each repository easily.