Tiktok React

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

[email protected]:~$ npm install
[email protected]:~$ npm start

or, with yarn

[email protected]:~$ yarn install
[email protected]:~$ 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:


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

New
(46)
• Released: Jun 21, 2020, 06:03 AM

Tiktok React

Author: elenalape
Item was Featured Author was Featured
FREE
Basic TikTok clone using React size
git clone https://github.com/elenalape/tiktok-react.git