Build a TikTok Clone in React Native and AWS Backend [Tutorial for Beginners] 🔴

Рет қаралды 224,049

Күн бұрын

Let's learn React Native by building the TikTok clone from scratch even if you are a beginner
📚 Enroll NOW for "The Full-stack Mobile Developer" and save 30%
academy.notjust.dev/
🚀 Download the Asset Bundle (Images, Dummy data, PDF presentation):
assets.notjust.dev/tiktok
🐱‍💻 Source code:
github.com/Savinvadim1312/Tik...
💬 Join the notJust Development gang and let's build together:
/ discord
If you are a beginner that wants to learn javascript and react native, or and advanced javascript developer that wants to get into mobile development using react native then this Livestream is for you. This is a perfect opportunity to follow along and build this application together with us, and add it to your portfolio as it will help you land your next job. If you finish the app, tag me on social media and I will give you feedback.
We will start building the TikTok clone from scratch, starting from setting up a React Native project using Expo and finishing with connecting the application with a GraphQL backend using AWS Amplify. We will walk through designing the UI layout of the app, structuring everything in components, and putting everything together. We will also implement navigation between screens, header bars, and tab bars for the TikTok menu.
For the backend, we will be using AWS Amplify, which is an amazing combination of tools and services from AWS, that helps us build mobile and web applications faster. It offers pre-made authentication components and flows, database, API (REST and GraphQL), storage, and much more.
Doing the TikTok clone yourself is a great opportunity to practice React Native, modern Javascript, Typescript, AWS Amplify. We are always trying to use the latest technologies and best practices, so that's another opportunity to learn something new, being it functional components, hooks, state, navigations or AWS and Amplify.
Tag me on social media when you finish the Whatsapp Clone, and I will give you feedback on your code.
LinkedIn: / vadimsavin
IG: / vadimsavin0
Twitter: / savinvadim_
Timecodes:
0:00 Intro
6:22 About GraphQL API
12:34 Setup Amplify Project
27:02 Add GraphQL API
1:20:15 Authentication
1:57:29 React Native Camera
2:04:21 Setup Multidex
2:51:15 Upload video to S3
3:26:14 Demo
#VadimSavin #notejust.dev #notJustDevelopment

Пікірлер: 92

@yadude101 3 жыл бұрын

man u had covid, that's rough. So glad u recovered!! 😀& r feeling better Vadim. This is def best tutorial channel on the internet!👍🏻😀

@adroitoec4751 3 жыл бұрын

Hi Vadim, Thanks for your effort and great tutorials for beginners to do full stack development. Hope to have more tutorials and discussions in future. I followed both your tutorials for tiktok and can say that it would have taken months for me to learn react native and AWS, which I learnt through your 2 sessions.Keep going !!!

@notjustdev 3 жыл бұрын

Hey, thanks a lot for your support. It is so encouraging that people find value in project-based learning. Keep building 🚀

@creativetech8471 3 жыл бұрын

motation cracked me up, Great Content

@chrissholliday 2 жыл бұрын

This is guy a treasure, thanks so much Vadim!

@notjustdev 2 жыл бұрын

Glad you enjoyed it!

@bestelectrocity 3 жыл бұрын

Thanks for Tutorial, i have leared a lot from you, keep going and doing more of Tutorials like this. Biggest Respect and thanks a lot :)

@notjustdev 3 жыл бұрын

Thanks a lot for the support, it means a lot to me

@rocket-mx6bh 3 жыл бұрын

please continue this :) i liked this very much,

@RowdyCoders 3 жыл бұрын

Thanks Broh, great tutorials, keep doing.

@notjustdev 3 жыл бұрын

Thanks Srinu

@tutacat 10 ай бұрын

It's not that you can separate GraphQL, it's that you can more easily specify what data you need, and arbitrary data, possibly using a single connection. There are two types of "free tier", the trial credit method, or the free allowance (that resets monthly for each resource type).

@luciabuggiano8229 3 жыл бұрын

This TikTok clone has helped me learn more that I did in my CS classes in college! I would love to know how you would implement a delete feature for the video's as well!

@notjustdev 3 жыл бұрын

that means a lot to me, thanks for the kind words. Deleting the video from database is easy, just call the delete mutation, but mind that it will still be in S3 bucket

@luciabuggiano8229 3 жыл бұрын

@@notjustdev Thank you! Figured it out. I think I will join your channel you are great. For the life of me I cannot figure out how to use S3image or allow the users to upload a profile picture using photoID. Do you know if this is simple or where I can find any info online for this?

@notjustdev 3 жыл бұрын

🚀 Download the Asset Bundle: assets.notjust.dev/tiktok 📚 Enroll in "The Full-stack Mobile Developer" and become a 6-figure dev in 2021: academy.notjust.dev/

@jeevanghule503 3 жыл бұрын

This link does not contain the backend presentation pdf, Could you please provide the link for that

@ashishjha9861 3 жыл бұрын

Please continue and improve this app, it will be a lot of learning curve for every developer

@sailspiration3760 3 жыл бұрын

Thanks for all the effort and the great tutorial! Awesome job! What might be a good extension is to show a bit more about testing your apps. Maybe as an extension to one of your tutorials. All the best for you Vadim!

@notjustdev 3 жыл бұрын

Thanks for the tip!

@somaliencounter6685 3 жыл бұрын

really i like the people like you ,,, i dont know how can i thank you

@notjustdev 3 жыл бұрын

Thanks

@sang9107 3 жыл бұрын

Hey, what's up Vadim. Just here to say you put out great content. Thank You

@notjustdev 3 жыл бұрын

Glad you enjoy it!

@sang9107 3 жыл бұрын

@@notjustdev I know I'm asking for too much but would you make a 20min video on how to create the user's profile screen? I'm new to this and I tried replicating the the listPosts but of only the users' ID but crashed my app. Your help would be greatly appreciated.

@sairag3958 3 жыл бұрын

Pls continue the tiktok clone app by adding some more feauters

@igamer1962 3 жыл бұрын

Please continue..

@ctoxyz 2 жыл бұрын

great vid

@ThannMalin 3 жыл бұрын

Brother !!! Please stay update and improve this app, it will be a lot of learning for every developer.

@wutwut9111 3 жыл бұрын

Great video, :) Can you make a video about pricing for AWS?

@notjustdev 3 жыл бұрын

Thanks! That would be a very long video hahah

@jhgujty5713 Жыл бұрын

Exellent

@phamhung8759 3 жыл бұрын

Hi. Can you give me what is the best service to develop live video stream same twitch, bigo or tiktok also have livestream on react native? Thanks you

@valentineorga Жыл бұрын

Can you implement a video streaming experience similar to TikTok?. Been struggling with this!

@fullfunk 2 жыл бұрын

Can we have part 3 of this tutorial with the other functions messaging others users, also can upload image e not just video

@zakimca 3 жыл бұрын

Hi, is there a way tu upload vidéos from storage library not from camera and how to add watermark as default when vidéo is uploaded, thanks for all

@cleverthramirez7085 2 жыл бұрын

can you show how to separate the audio from a video with react native in the creation of tiktok

@prasadnarayana7257 2 жыл бұрын

Any idea on adding music to recorded video

@haluk91 2 жыл бұрын

hey Vadim, i am currently learning a lot form your videos. way more then i did at the university. it would be really nice if you could answer my question. If you look cloesly there is a thin white line, just like a border over the navigation und under the post. Do you know how to get rid of that? It kinder disturbs my own design. Keep up the good work !!!

@notjustdev 2 жыл бұрын

Thank for the kind words. It means a lot to me. Oh man, I know what you are speaking about. That's some native shadow that is displayed. I implemented it in a build, might be in WhatsApp clone.

@haluk91 2 жыл бұрын

@@notjustdev wow thatnks for the quick reply, ill be looking into that ;)

@yadude101 3 жыл бұрын

@16:00 after we enter in our access key id & secret 🤫 access key 🔐 🔑 , it asks for a "Profile Name: This would update/create the AWS Profile in your local machine? " what do we put there?🤔😀

@joaootavioribeiro5655 3 жыл бұрын

great video, congratulations, thanks for sharing your knowledge

@notjustdev 3 жыл бұрын

Hey, thanks for appreciation👋 There are libraries for camera roll pickers that helps you select photo/images from the gallery. At my startup, I use react-native-image-picker for this purpose (it supports both video and photo)

@olatunjigabriel2707 2 жыл бұрын

Hello great tutorial, but finding it difficult to deploy on real device and emulator any help pls?

@giovanniprete6255 9 ай бұрын

Greeting from Mons BEL

@parkour_guide 3 жыл бұрын

Always thanks for your awesome tutorials. By following your tutorials, I could make post components with image and video. But if I upload video over 18~20MB, my app stopped or sometimes it closed and failed to upload the post. Is there any reason that I couldn't upload video over 20MB??

@novoscortesflowpodcastepod1401 2 жыл бұрын

Hello friend, how are you? Did you find a solution to improve the loading of videos in network?

@mahonealex4615 2 жыл бұрын

nicee

@javalok9575 3 жыл бұрын

Hi @Vadim Savin, first of all thanks for great video , i am beginner react and react-native developer, i am developing simple netflix type app, but for AWS service which one is better for video streaming application ? For now i am trying to use EC2 is it ok for application like : tiktok , netflix etc app ? thanks in advance .

@notjustdev 3 жыл бұрын

With EC2 you have a lot of control, as it's just a dedicated server, however with this control you will have to manage a lot of things yourself, manually. Like patching the OS, scaling the servers with the increased users, managing security and more. The alternative is to use serverless services for it. Depending on what you need, you will use specific services. Like for compute, you can use Lambdas. For storage you will use S3, for compressing check out Media Convert

@javalok9575 3 жыл бұрын

@@notjustdev Thank you for responding , so As for my application which service is suitable ? How can i study and research on it ? Can you suggest please ? OR can i use all those services facility within EC2 ?

@shynalprasad5508 2 ай бұрын

Hello. Your video is really helpful. Could you make a video with likes and comments for TikTok please. Thank you 🎉

@marianakoudela2760 Жыл бұрын

Hi Vadim, thanks so much for these tutorials! Would you be able to help me with an AWS amplify/graphql issue? I am unable to run a mutation to add a new user because I am "Not Authorized to access createUser on type User". I am using v2 of the graphql transformer so my code is a bit different to yours, but googling this issue hasn't helped me much

@marianakoudela2760 Жыл бұрын

In the meantime I have just reverted to v1 and it works

@jomfawad9255 Жыл бұрын

Whats the monthly cost to run this app, meaning server cost, hosting cost, maintenance cost etc..?

@thiagosoares5052 Жыл бұрын

Would it be possible for us to develop an application for android where we can make a launcher to change the face of android, I live in Brazil and although I don't speak and understand English I like your teaching.

@joaootavioribeiro1943 3 жыл бұрын

can this project be built using EXPO?

@boddusridhar9722 3 жыл бұрын

Next time will do Photo filtering and meme creator

@prasadnarayana7257 2 жыл бұрын

How to add music to recorded video

@Marshal-786 3 жыл бұрын

hi sir ..please make an ecommerce app in react native cli.

@notjustdev 3 жыл бұрын

Thanks for the recommendation

@lakshit6429 2 жыл бұрын

Hey, I have a small request could you just make an eCommerce application which fetches data from Woocommerce Rest API?

@akifkhan2402 2 жыл бұрын

Bro you don't add main feature like filters, effects , videos edition ,sound add

@olatunjigabriel2707 2 жыл бұрын

How do i setup Aws for Nigerian within Africa any help pls?

@srkraazcreation3859 3 жыл бұрын

Sir, also learn to create an admin panel of this app

@notjustdev 3 жыл бұрын

That would be a great ReactJS project

@devreact9921 3 жыл бұрын

Videos in my feed are playing all at once when I hit play button, iam using flat list ?

@joseph.aowigo7553 3 жыл бұрын

same problem did you solved it?

@danaahmed90 2 жыл бұрын

@@joseph.aowigo7553 did you solve it ?

@shoaibvisitdubai9955 2 жыл бұрын

Sir any easy trick where i want go i can't understand

@atharvajoshi4425 3 жыл бұрын

How to deploy this app

@donjohnkz 3 жыл бұрын

can this be done by the expo?

@notjustdev 3 жыл бұрын

Most probably yes.

@pranabindudas 3 жыл бұрын

Can i make a this type app.and post Google play store?

@notjustdev 3 жыл бұрын

yeah you can

@igamer1962 3 жыл бұрын

Next clone project Crypto trading app similar like coin base with react native ...

@notjustdev 3 жыл бұрын

That would be fire considering the current BTC hype

@igamer1962 3 жыл бұрын

@@notjustdev yeah.... Love 💓from India.

@oliiskia Жыл бұрын

Tiktok is not a complete app without filters, that should be implemented

@sanzdev834 2 жыл бұрын

Make a tiktok clone with python KivyMd please

@Junior-fn6dj Жыл бұрын

@abdulhakeem1555 3 жыл бұрын

Plssssssssswwww don't use aws,, use firebase

@kerloz9374 3 жыл бұрын

The half desire peroperatively chop because speedboat coincidingly slap minus a thoughtless birth. old, reminiscent restaurant

@kerloz9374 3 жыл бұрын

The sad sunflower univariably cycle because humidity habitually start like a envious ambulance. snobbish, obsolete magic