Тёмный

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

notJust․dev
Подписаться 110 тыс.
Просмотров 224 тыс.
50% 1

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

Наука

Опубликовано:

 

17 май 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 92   
@yadude101
@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!👍🏻😀
@creativetech8471
@creativetech8471 3 года назад
motation cracked me up, Great Content
@ashishjha9861
@ashishjha9861 3 года назад
Please continue and improve this app, it will be a lot of learning curve for every developer
@rocket-mx6bh
@rocket-mx6bh 3 года назад
please continue this :) i liked this very much,
@adroitoec4751
@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
@notjustdev 3 года назад
Hey, thanks a lot for your support. It is so encouraging that people find value in project-based learning. Keep building 🚀
@chrissholliday
@chrissholliday 3 года назад
This is guy a treasure, thanks so much Vadim!
@notjustdev
@notjustdev 3 года назад
Glad you enjoyed it!
@sairag3958
@sairag3958 3 года назад
Pls continue the tiktok clone app by adding some more feauters
@igamer1962
@igamer1962 3 года назад
Please continue..
@bestelectrocity
@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
@notjustdev 3 года назад
Thanks a lot for the support, it means a lot to me
@RowdyCoders
@RowdyCoders 3 года назад
Thanks Broh, great tutorials, keep doing.
@notjustdev
@notjustdev 3 года назад
Thanks Srinu
@tutacat
@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).
@somaliencounter6685
@somaliencounter6685 3 года назад
really i like the people like you ,,, i dont know how can i thank you
@notjustdev
@notjustdev 3 года назад
Thanks
@luciabuggiano8229
@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
@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
@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
@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
@jeevanghule503 3 года назад
This link does not contain the backend presentation pdf, Could you please provide the link for that
@sailspiration3760
@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
@notjustdev 3 года назад
Thanks for the tip!
@ThannMalin
@ThannMalin 3 года назад
Brother !!! Please stay update and improve this app, it will be a lot of learning for every developer.
@ctoxyz
@ctoxyz 2 года назад
great vid
@sang9107
@sang9107 3 года назад
Hey, what's up Vadim. Just here to say you put out great content. Thank You
@notjustdev
@notjustdev 3 года назад
Glad you enjoy it!
@sang9107
@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.
@jhgujty5713
@jhgujty5713 Год назад
Exellent
@wutwut9111
@wutwut9111 3 года назад
Great video, :) Can you make a video about pricing for AWS?
@notjustdev
@notjustdev 3 года назад
Thanks! That would be a very long video hahah
@fullfunk
@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
@phamhung8759
@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
@valentineorga Год назад
Can you implement a video streaming experience similar to TikTok?. Been struggling with this!
@haluk91
@haluk91 3 года назад
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
@notjustdev 3 года назад
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
@haluk91 3 года назад
@@notjustdev wow thatnks for the quick reply, ill be looking into that ;)
@cleverthramirez7085
@cleverthramirez7085 2 года назад
can you show how to separate the audio from a video with react native in the creation of tiktok
@prasadnarayana7257
@prasadnarayana7257 2 года назад
Any idea on adding music to recorded video
@zakimca
@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
@joaootavioribeiro5655
@joaootavioribeiro5655 3 года назад
great video, congratulations, thanks for sharing your knowledge
@notjustdev
@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)
@giovanniprete6255
@giovanniprete6255 9 месяцев назад
Greeting from Mons BEL
@mahonealex4615
@mahonealex4615 2 года назад
nicee
@yadude101
@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?🤔😀
@olatunjigabriel2707
@olatunjigabriel2707 2 года назад
Hello great tutorial, but finding it difficult to deploy on real device and emulator any help pls?
@parkour_guide
@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
@novoscortesflowpodcastepod1401 2 года назад
Hello friend, how are you? Did you find a solution to improve the loading of videos in network?
@shynalprasad5508
@shynalprasad5508 2 месяца назад
Hello. Your video is really helpful. Could you make a video with likes and comments for TikTok please. Thank you 🎉
@javalok9575
@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
@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
@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 ?
@joaootavioribeiro1943
@joaootavioribeiro1943 3 года назад
can this project be built using EXPO?
@marianakoudela2760
@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
@marianakoudela2760 Год назад
In the meantime I have just reverted to v1 and it works
@thiagosoares5052
@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.
@boddusridhar9722
@boddusridhar9722 3 года назад
Next time will do Photo filtering and meme creator
@jomfawad9255
@jomfawad9255 Год назад
Whats the monthly cost to run this app, meaning server cost, hosting cost, maintenance cost etc..?
@lakshit6429
@lakshit6429 2 года назад
Hey, I have a small request could you just make an eCommerce application which fetches data from Woocommerce Rest API?
@prasadnarayana7257
@prasadnarayana7257 2 года назад
How to add music to recorded video
@olatunjigabriel2707
@olatunjigabriel2707 2 года назад
How do i setup Aws for Nigerian within Africa any help pls?
@Marshal-786
@Marshal-786 3 года назад
hi sir ..please make an ecommerce app in react native cli.
@notjustdev
@notjustdev 3 года назад
Thanks for the recommendation
@devreact9921
@devreact9921 3 года назад
Videos in my feed are playing all at once when I hit play button, iam using flat list ?
@joseph.aowigo7553
@joseph.aowigo7553 3 года назад
same problem did you solved it?
@danaahmed90
@danaahmed90 2 года назад
@@joseph.aowigo7553 did you solve it ?
@srkraazcreation3859
@srkraazcreation3859 3 года назад
Sir, also learn to create an admin panel of this app
@notjustdev
@notjustdev 3 года назад
That would be a great ReactJS project
@akifkhan2402
@akifkhan2402 2 года назад
Bro you don't add main feature like filters, effects , videos edition ,sound add
@igamer1962
@igamer1962 3 года назад
Next clone project Crypto trading app similar like coin base with react native ...
@notjustdev
@notjustdev 3 года назад
That would be fire considering the current BTC hype
@igamer1962
@igamer1962 3 года назад
@@notjustdev yeah.... Love 💓from India.
@atharvajoshi4425
@atharvajoshi4425 3 года назад
How to deploy this app
@shoaibvisitdubai9955
@shoaibvisitdubai9955 2 года назад
Sir any easy trick where i want go i can't understand
@donjohnkz
@donjohnkz 3 года назад
can this be done by the expo?
@notjustdev
@notjustdev 3 года назад
Most probably yes.
@oliiskia
@oliiskia Год назад
Tiktok is not a complete app without filters, that should be implemented
@pranabindudas
@pranabindudas 3 года назад
Can i make a this type app.and post Google play store?
@notjustdev
@notjustdev 3 года назад
yeah you can
@sanzdev834
@sanzdev834 2 года назад
Make a tiktok clone with python KivyMd please
@Junior-fn6dj
@Junior-fn6dj Год назад
O
@abdulhakeem1555
@abdulhakeem1555 3 года назад
Plssssssssswwww don't use aws,, use firebase
@kerloz9374
@kerloz9374 3 года назад
The half desire peroperatively chop because speedboat coincidingly slap minus a thoughtless birth. old, reminiscent restaurant
@kerloz9374
@kerloz9374 3 года назад
The sad sunflower univariably cycle because humidity habitually start like a envious ambulance. snobbish, obsolete magic
Далее
Building the Formula 1 App with React Native
3:58:45
Просмотров 228 тыс.
Тяжелые будни жены
00:46
Просмотров 859 тыс.
Китайка раскрыла Зайку😂😆
00:19
20 System Design Concepts Explained in 10 Minutes
11:41
Building the Ultimate Nike App in React Native & Redux
3:33:55
#Shorts Good idea for testing to show.
0:17
Просмотров 3,6 млн