simcoderyoutube / tiktokclone

TIKTOK Clone React Native Tutorial 2021 👨‍💻 I'll show you how you can do this in the simplest way and terms possible. By the end of this series you'll have learned how the big companies do it and will be able to do the same, you not only will be able to do this app, but you'll be able to put what you learn into your very own projects! In this series, we use React Native with Expo to quickly deploy the project. We use firebase for all our microservice needs like the auth system, database, storage, amongst others. firebase, redux, react native, javascript, expo. In this series, we'll use all of them and you'll learn them by doing an iconic app. Welcome to this Simcoder project and make a TikTok Clone!

Welcome to TiktokClone 👋

Main repository of the SimCoder's youtube series "Make an App like TIKTOK"

Make a web app Like TIKTOK

I'll show you how you can do this in the simplest way and terms possible.

By the end of this series you'll have learned how the big companies do it and will be able to do the same, you not only will be able to do this app, but you'll be able to put what you learn into your very own projects!

Any question, ask me in the Forum, every question gets an answer! http://www.simcoder.com/forum

This project will be made using react native, firebase firestore, firebase storage, redux, expo, along with a lot of other packages and technologies which will help us get this TIKTOK clone app up and running as fast as possible.

📺 View the youtube tutorial series here

➕ Features

In here you'll find a list of all the features implemented in this project and the youtube tutorial for a detailed explanation of each one of them. However you can see the full series of how to make this project in the following youtube playlist

Currently the project has the following features:

• expo boilerplate
• Auth system
• Post Videos
  • Take pictures directly in app
  • Choose from gallery
• Profile page
• Feed in chronological order
• Search Users
• Like video
• Comment Posts
• Follow/Unfollow users
• Chat system Features to be implmeneted:
• Redesign

💻 Install

First you need to install Nodejs and npm, this is different depending on the OS you are running so it is easier to check the node page

Install expo, if it fails run you might need to run this with sudo

npm install expo-cli --global

Install the needed packages while in the root folder of the project

npm install

Install firebase tools

npm install -g firebase-tools

Deploy the project to yout firebase projhect (make sure to have billing enabled for that project). copy the backend/functions/index.js into a different place

cd backend
firebase login
firebase init (choose functions, javascript, EsLint and install deplendencies)

Copy the index.js into the place of the new index.js

firebase deploy

You can check the first video on this series to learn how to do it easily

📱 Usage

To Start expo all you have to do is run this line

expo start

If you want to run on android you'll need to enable developer options and USB Debugging on your device

💙 question FAQ

If you have any question then please use the following Forum.

👤 Author

SimCoder

• Website: www.simcoder.com
• Twitter: @simcoder_here
• Github: @simcoderYoutube
• Youtube: SimCoder

🌟 Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2020 SimCoder.

This project is Apache License 2.0 licensed. Some of the dependencies are licensed differently.

tiktokclone's Issues

50+ syntax errors in GH version of backend/functions/index.js

using the index.js file from this GH repo, i got errors like the ones below (indentation, strings must use double quote, missing semicolon). attached is original file with syntax errors resolved, perhaps will save time if others run into same issue. thank you SimCoderYoutube for making the source code available & creating the youtube tutorials.

 9:1   error  Expected indentation of 2 spaces but found 4          indent
  10:1   error  Expected indentation of 6 spaces but found 8          indent
  11:1   error  Expected indentation of 6 spaces but found 8          indent
  12:1   error  Expected indentation of 6 spaces but found 8          indent
  12:50  error  Missing semicolon                                     semi
  13:3   error  Missing semicolon                                     semi
  16:1   error  This line has a length of 102. Maximum allowed is 80  max-len
  16:51  error  Strings must use doublequote                          quotes
  17:1   error  Expected indentation of 2 spaces but found 4          indent
  17:23  error  Missing semicolon                                     semi
  18:1   error  Expected indentation of 2 spaces but found 4          indent
  18:32  error  Strings must use doublequote                          quotes
  19:1   error  Expected indentation of 4 spaces but found 8          indent
  20:1   error  Expected indentation of 6 spaces but found 12         indent
  20:67  error  Missing trailing comma                                comma-dangle
  21:1   error  Expected indentation of 4 spaces but found 8          indent
  21:10  error  Missing semicolon                                     semi
  22:1   error  Expected indentation of 2 spaces but found 4          indent
  23:1   error  Expected indentation of 2 spaces but found 4          indent
  23:32  error  Strings must use doublequote                          quotes
  24:1   error  Expected indentation of 4 spaces but found 8          indent
  25:1   error  Expected indentation of 6 spaces but found 12         indent
  25:64  error  Missing trailing comma                                comma-dangle
  26:1   error  Expected indentation of 4 spaces but found 8          indent
  26:10  error  Missing semicolon                                     semi
  27:1   error  Expected indentation of 2 spaces but found 4          indent
  28:1   error  Expected indentation of 2 spaces but found 4          indent
  29:1   error  Expected indentation of 6 spaces but found 8          indent
  30:1   error  Expected indentation of 6 spaces but found 8          indent
  31:1   error  Expected indentation of 6 spaces but found 8          indent
  31:27  error  Missing semicolon                                     semi
  32:3   error  Missing semicolon                                     semi
  34:1   error  This line has a length of 102. Maximum allowed is 80  max-len
  34:51  error  Strings must use doublequote                          quotes
  35:1   error  Expected indentation of 2 spaces but found 4          indent
  35:23  error  Missing semicolon                                     semi
  36:1   error  Expected indentation of 2 spaces but found 4          indent
  36:32  error  Strings must use doublequote                          quotes
  37:1   error  Expected indentation of 4 spaces but found 8          indent
  38:1   error  Expected indentation of 6 spaces but found 12         indent
  38:68  error  Missing trailing comma                                comma-dangle
  39:1   error  Expected indentation of 4 spaces but found 8          indent
  39:10  error  Missing semicolon                                     semi
  40:1   error  Expected indentation of 2 spaces but found 4          indent
  41:1   error  Expected indentation of 2 spaces but found 4          indent
  41:32  error  Strings must use doublequote                          quotes
  42:1   error  Expected indentation of 4 spaces but found 8          indent
  43:1   error  Expected indentation of 6 spaces but found 12         indent
  43:65  error  Missing trailing comma                                comma-dangle
  44:1   error  Expected indentation of 4 spaces but found 8          indent
  44:10  error  Missing semicolon                                     semi
  45:1   error  Expected indentation of 2 spaces but found 4          indent
  46:1   error  Expected indentation of 2 spaces but found 4          indent
  47:1   error  Expected indentation of 6 spaces but found 8          indent
  48:1   error  Expected indentation of 6 spaces but found 8          indent
  49:1   error  Expected indentation of 6 spaces but found 8          indent
  49:27  error  Missing semicolon                                     semi
  50:3   error  Missing semicolon                                     semi

index.js.zip

usage

in theory, based on this, is it possible to create an account registrar with the ability to interact with live users?

Firebase V9 compatibility

import firebase from "firebase/app" threw an error saying:

export 'default' (imported as 'firebase') was not found in 'firebase/app'

Solved by changing imports to:

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

useChats hook error

I am having this issue with the useChats hook. Any ideas on how to solve?

The query requires an index

Have clone this app and set my firebase, I got this error after register

Uncaught Error in snapshot listener:, [FirebaseError: The query requires an index. That index is currently building and cannot be used yet. See its status here: https://console.firebase.google.com/v1/r/project/tiktok-48421/firestore/indexes?create_composite=ClRwcm9qZWN0cy90aWt0b2stNDg0MjEvZGF0YWJhc2VzLyhkZWZhdWx0KS9jb2xsZWN0aW9uR3JvdXBzL3Bvc3QvaW5kZXhlcy9DSUNBZ09qWGg0RUsQARoLCgdjcmVhdG9yEAEaDAoIY3JlYXRpb24QAhoMCghfX25hbWVfXxAC]

Uninitialized values due to cycle

I'm getting uninitialized values. Needs refactoring to remove the need for a cycle.

Require cycle: src\screens\profile\index.js -> src\navigation\feed\index.js -> src\screens\profile\index.js

navigation.navigate does not recognize "savePost" screen

What the terminal says when I try to bring a video into the application I'm making is that Do you have a screen named "savePost" This is where I am trying to navigate
return ( <NavigationContainer> <Stack.Navigator> {currentUserObj.currentUser == null ? <Stack.Screen name = "auth" component = {AuthScreen} options = {{headerShown: false}}/> : <> <Stack.Screen name="home" component = {HomeScreen} options = {{headerShown: false}}/> <Stack.Screen name="savePost" component = {SavePostScreen} options = {{headerShown: false}}/> </> } </Stack.Navigator> </NavigationContainer>
This is the part where I use navigation.navigate, i tried navigation.push and to navigate without the useNavigation() both did not work.
`const pickFromGallery = async()=>{
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Videos,
allowsEditing: true,
aspect: [16,9],
quality: 1
})
if(!result.cancelled){
let sourceThumb = await generateThumbnail(result.uri)
navigation.navigate("savePost", {source: result.uri, sourceThumb})
}

}I can put the SavePostScreen code here as well, but I doubt it will do anything, I am just putting the package.json file here. "name": "academical",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "expo start --dev-client",
"android": "expo run:android",
"ios": "expo run:ios"
},
"dependencies": {
"@react-native-community/masked-view": "^0.1.11",
"@react-navigation/material-bottom-tabs": "^6.2.3",
"@react-navigation/native": "^6.0.12",
"@react-navigation/stack": "^6.2.3",
"expo": "^46.0.9",
"expo-av": "~12.0.4",
"expo-camera": "~12.3.0",
"expo-constants": "~13.2.3",
"expo-image-picker": "~13.3.1",
"expo-media-library": "~14.2.0",
"expo-splash-screen": "~0.16.2",
"expo-status-bar": "~1.4.0",
"expo-video-thumbnails": "~6.4.0",
"firebase": "^8.10.1",
"react": "18.0.0",
"react-dom": "18.0.0",
"react-native": "0.69.5",
"react-native-gesture-handler": "^2.6.0",
"react-native-linear-gradient": "^2.6.2",
"react-native-paper": "^4.12.4",
"react-native-reanimated": "^2.10.0",
"react-native-safe-area-context": "^4.3.1",
"react-native-screens": "~3.15.0",
"react-native-vector-icons": "^9.2.0",
"react-native-web": "~0.18.7",
"react-navigation": "^4.4.4",
"react-redux": "^8.0.2",
"redux": "^4.2.0",
"redux-thunk": "^2.4.1"
},
"devDependencies": {
"@babel/core": "^7.12.9"
}
}`