AwesomeDubbing

Introduction

This mobile app is developed by Webstorm 2018.1.5. Users can feel free to upload any videos and make their awesome dubbing for the videos. Currently, this mobile app part has been successfully built and run on One Plus 5T, which is running Android 8.1.0

Abstract

The front end part of a dubbing full-stack project.

• Combine video and customized audio perfictly
• Upload and enjoy creation list from back-end server
• Feel free to add comments and like or dislike any creations
• Create or edit your personal profile

Installation

1. clone this project (https://github.com/yuhaolu1994/DubbingApp)
2. cd DubbingApp
3. connect your android phone, use adb devices to check connection
4. run react-native-run-android command in terminal

Version

v 2.0

• use React Redux to refactor the project

v 1.5

• add back-end server to front-end part
• post/fetch creations and comments to/from server
• register an account
• logout from current account

v 1.4

• use qiniu cloud and cloudinary as image, audio and video storage services
• use twilio as sms services

v 1.1

• use mock.js and RAP V0.14.16 to mock the fake data
• use react native modal to add comment or edit user profile

TODO

• Comment creations directly through home page
• Deploy the localhost server on the public cloud services such as AWS
• Add email verification on register page
• Hot app version update
• Add tags on creations and classify based on tags
• Search creations or users

Project

Image Storage Services

• Qiniu
• Cloudinary

Open Source Tools

• react-navigation
• react-native-image-picker
• react-native-video
• react-native-audio
• react-native-sound
• react-native-swiper
• react-redux
• redux
• redux-actions
• redux-immutable
• redux-logger
• redux-promise
• redux-thunk

Architecture

App register and login

Data flow in app

Video and audio processing

Screenshots

Check creation list and detail

Create and upload a new dubbing video

Update account avatar and profile