TikTok Clone

Welcome! In this workshop, we're going to be building a simple TikTok clone using React (a front-end javascript framework), Uppy (an open source file uploader) and Transloadit (a file processing service).

Google Slides

The goal of this webinar is to give you a basic understand of how apps like TikTok and Instagram might handle things on the other side of the screen — apply filters, watermarks, audio tracks etc — step by step. We'll also be looking into basic concepts of React, as well as how to style your application.

What you'll need

1. A text editor — check out Sublime or VSCode.
2. A browser with developer tools (that would allow you to Inspect Element), such as Firefox or Chrome.
3. Node and npm installed (recommended, but most definitely not required: yarn).
4. React and React-DOM libraries installed.
5. A Transloadit account with a verified email address — you will be able to create an application and get your API key from there.
6. Install uppy dependencies by running npm install @uppy/core @uppy/dashboard @uppy/react @uppy/transloadit @uppy/webcam.
7. This link for styles: https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css

To check that you've installed everything correctly, run npx create-react-app my-app in the terminal, where my-app is a name you can specify. This will create a template React application.

If you have done all of the above, you should also be able to download this repository, open the command line/command prompt, navigate to the project directory, then

foo@bar:~$ npm install
foo@bar:~$ npm start

or, with yarn

foo@bar:~$ yarn install
foo@bar:~$ yarn start

will run the app in the development mode.

Open http://localhost:3000 to view it in the browser. The page will reload if you make edits.

Note: if you have downlaoded this repository and want to run it on your own machine, navigate to src/UppyComponent.js and replace REACT_APP_TRANSLOADIT_API in

this.uppy.use(Transloadit, {
			params: {
				auth: {
					key: process.env.REACT_APP_TRANSLOADIT_API,
				},
			}
		}
		)

with your API key as a string that you generated from Transloadit, like so

key: "12345678956776658798",

What is React?

From Wikipedia,

React is an open-source JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.

Basically, it's the magic that ensures that when you scroll through Facebook, the page doesn't reload.

What is Uppy?

An open-source file uploader that we'll use as a means of transport to send the videos you take with your webcam directly to Transloadit.

What is Transloadit?

A file processing services. It takes your images, documents, or, in our case — videos — and applies all sorts of good things to them. Watermarks, filters, music tracks

Notes

Links for static files used in the tutorial:

• Stylesheets: https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css
• Favicon (the little image you can see in the tab title): https://s16.tiktokcdn.com/tiktok/falcon/_next/static/images/logo-dark-e95da587b6efa1520dcd11f4b45c0cf6.svg
• TikTok logo: https://upload.wikimedia.org/wikipedia/en/thumb/a/a9/TikTok_logo.svg/1280px-TikTok_logo.svg.png
• Avatar placeholder: https://www.shareicon.net/data/256x256/2016/09/05/825143_user_512x512.png

If you have any questions, please feel free to create an Issue in this repository, or get in touch directly!