Build a Spotify Clone in React Native for Beginners [Backend] 🔴 Live 🔴

i'm live hi hi people welcome back to a new stream a new week where we will continue building the spotify clone in react native i'm very enthusiastic about this this build because today we are gonna connect everything that we uh managed to develop in previous week uh we're gonna connect it to a back end and we'll see like actually spotify working um it's gonna be our own api we're going to build it and that means that we're not going to use the spotify's api for getting the songs um and that has a lot of advantages um because we will not have any limits that spotify api uh has by default um also we are going to learn how to build these backends yourself and that's very useful when you will want to build something of your own so let's wait a little bit until people are joining and then we can start working at our backend for spotify hello people hi i'm good how are you i'm very good i'm pumped i have my coffee everything is ready and we're gonna rock today uh can i make some uh same in rack native despite van expo yeah sure actually expo is a set of tools on top of react native so at the end of the day we are like writing and using the same react native uh however expo just provides us some tools that helps us get started faster and whenever whenever we have some limitations of expo we can eject and the process of ejecting from expo uh in this process you get the same bayer react native uh that the same project that we would start with react native cli so yeah you can actually clone um you can actually clone the application and eject it and continue using like react if you want but i think like expo is a very very good good technology that helps you get started and speeds your development i actually created instagram clone in um using react native cli and you can see there in the first episode like probably 40 minutes we just set up the like the the bare minimum for the application all the dependencies uh of configuring the environments for both like android and ios but you can see in uh twitter clone and also in spotify clone but using expo is just like one line of code and everything is set up with libraries with react navigation with typescript so yeah it's it's really a great tool i recommend going with it your hairstyle is something special yeah thank you very much i didn't have a lot of time to arrange it but it's good so guys i think we should get started and let's have a look at what we built uh in the previous week so yeah um i'll give a short brief description of a project that we built in the previous video i recommend you going back to the previous video if you didn't see that and start working from there but uh yeah for people that already followed here is uh in previous episode so front end we are using react native with um expo for the language we are using typescript which is the same javascript only with types and for navigation we are using react navigation for the back end we are to use aws amplify and i will speak about more about aws amplify shortly when we get into the details so we initialize the project um we set up the bottom tab navigator here we created the album component that will display the image of album and artists uh using that album component we created a category component that displays multiple albums horizontally the next one is the home screen that displays multiple categories in a vertical scroll scroll view uh then album details screen which will display the name and the list of songs from which we can play a song um album screen yeah this is more details about it and also we develop a player widget and we develop only the ui of it and we'll make it play actual songs today so uh the plan for this week is to uh actually make the player widget to play songs implement user authentication so only authenticated users will be allowed to enter the application create the backend graphql api and connect everything together and a little bit of magic there and everything should be working fine hello hi there so uh yeah let's run the project as it is right now to have a look where we left it previous week so let's go to the terminal uh by the way you can find this the project as it is right now on github so it should be it should be in the description of the video if it's not there already or we can go to github my account and you'll you can find it yep this is the url yeah i'll pass it into the chat so you can see it okay now let's open the project go to the terminal and do yarn start to start the expo server and yeah that would open the expo web page here from where we can uh run on ios if you have an android device or emulator you can press run on android device and it will run it on an android but i decided to go with ios because someone asked me if it's possible to run it on android because i was always running it on ios so once where is yes you can run it both on android and ios it's set up you don't have to take any other actions uh yeah it opened the iphone se but i don't like that one we are not poor over here let's go with a newer version i'll quickly open a new emulator and yeah you to open your new emulator we're gonna um open xcode and select here iphone 11 that's already better and once it's ready somewhere come on should open will you yeah it's here now we can close xcode safely and run here our project on ios simulator and when we have a simulator open here it will take this one so let me put it this way to for you to see it so yeah here is our application that we built previous time this is the home screen and you can scroll vertically and see multiple category categories for each category we can see multiple albums in a horizontal scroll view and we can check any of them by just pressing on it and it will open the album page from where we can um scroll and see the songs that are in that album also there are multiple pages and they are working the bottom tab navigator however we implemented only the home screen and the same goes for the player widget that we can see here and it indicates like which song is currently playing so that's where we left previous time um yeah let's get started with this week's code so the first thing is we need to make sure that we can play songs uh using and we'll we'll do that using the expo av library for more uh documentation and details about it you can find it on google expo av it allows you to play both audio audio and video so we're gonna do expo install expo av in our project okay expo install expo av it will take some time and let's close all everything here and open the player widget because that's where we want to uh to play our uh song songs from uh yeah it uh installed successfully the dependency we can close that uh yeah and before getting into uh that library uh our song object should have one more property which will indicate like uh the uri of uh of the song itself so we will add it um right now uri and uh paste here any uri the uh to um uh mp3 song or other mp4 i have it prepared here come on yeah i'm gonna change the title okay um we have the uri of the song that we will be able to play now uh it's the interesting part um so we have a song uh and we want to play it uh when we want to play it of course uh whenever we this component uh is getting mounted at the moment we do that with a use effect and this will be like a function that will be called every time that our component updates and if we pass an empty array to the second parameter it will be called only once when the component mounts so that's where we want to [Music] yeah play the song let's make sure to import the use effect hello kennedy hi how are you doing so yeah let's actually call a function like place play current song and let's get uh go ahead and implement this function here const uh play current song equal to it will be a sync function because uh playing playing downloading the audio will be everything asynchronously yeah i mistyped it as sync here [Music] um yeah and here um yeah here we should start playing the audio using the the library that we just installed so let's import audio not from here from expo av and yeah sound will be equal to audio dot sound dot uh create a sync we will create a sound asynchronously and this uh function expects the source uh initial status and a function one playback status update this function will be called every time uh there is a change in our sound basically basically it will be called every frame and we will be able to get like how many seconds have been already played or whenever we play pause the video and so on so for the first one we need to provide the source and the source will be uri song dot uri the next one will be initial status and let's provide only should play as true which means that uh the sound should start playing uh as when we create it and the last one uh it's gonna be a function uh one playback status update and actually let's define it here const on play back status update and we will receive here the status for now we can only we can just console the status and we'll see what information we receive here and let's go ahead and send this as a parameter to the sound.create um yeah i think that's everything we need uh to run the song let's try to save and yeah we can see that this uh sound already started playing uh yeah i changed the volume and it stopped that's weird but we're gonna fix that uh shortly what shortcuts you use for importing um yeah most of the time webstorm actually helps me with that and that's the most reliable like autocomplete features for example if we don't have use effect here i go to the use effect and i press alt enter and it will automatically import use effect uh for other things i have um yeah if i didn't say like someone asked me in the chat what shortcuts i i use for importing so number one is this library i don't even know how it's called kodota something like that and it has like ai autocomplete stuff and sometimes it works great sometimes it messes up everything uh give me a second let me increase the font size because i know that on youtube it might um it might be a bit yeah i think that that way you can see it better yeah hi guys hi from uh from the chat welcome how are you doing yeah let's open again spotify and i hope you hear that the sound started uh playing right away um yeah i'm gonna stop that and and we should um move forward and okay um what's the plan what's the plan next do i have something here okay play the sound we did that completed uh the next one is uh pause and play button so we whenever we press on this button we should pause the song and whenever we press on the play button we should play yeah that's pretty obvious um we can do that by uh um calling a function on this sound that we receive like sound dot uh play a sync uh player sync and sound dot uh stop using something like that um but we will need to do that in another function and for that reason we need to store this sound um to store the sound in in a state so let's go ahead and define this state on top of our component yeah sound set sound is equal to use state null initially it will be null and the type will be a sound i or yeah sound or null we need to import state as well i'm pressing alt enter and add import statement for the sound as well alt enter and it will add the import sound from audio and i think we can hear yeah do just that sound.great okay when we play the current song we should uh yeah set it to our stats state and because yeah we declare the sound as the state uh it doesn't actually uh it's not a very good practice to have um the same names for variables even if it's in a different scope so for the sound i will rename it to new sound i just could spill my coffee but that's good so set sound with a new sound and of course we forgot to await because this is a synchronous uh okay we set the sound but whenever we um yeah let me show you what will be the problem let's actually save come on play come on uh hello everyone glad made it i hope i haven't missed a lot uh yeah you didn't miss a lot we just started i gave a brief introduction sorry for the sound so we see that the song is playing and whenever we make um an edit and save two sounds will start playing and you can see that yeah maybe you didn't hear me talking there but whenever we make a change this function will be called and we will start playing a new sound and it will play one on top of each other and we'll get a very um yeah like a lot of songs playing at the same time so to to fix that before playing the song we will check uh if sound um yeah if sound is not null then we'll say await sound dot unload a sink and that will destroy the previous instance of the sound whenever we want to play it again this will make sure that we only play one song at a time uh okay sound is good there [Music] yeah let's now implement the function to play and pause the songs yeah let's declare it here const play on play pause press first of all uh we should make sure that uh if there is no sound let's return and forget about it because uh if there is no sound and we press on one play pause button nothing should happen however if we have a sound uh we should check if if is playing we should stop it and if it's not playing we should start it but we don't have any variables for is playing so we will need to declare this state is playing and set is playing and let's say true in the beginning yeah and this should play instead of hardcoding it we can say is playing from here so if is playing we should say await sound dot stop i think if he's playing we should stop yep else await sound start a sync yeah or placing yeah placing and yeah i forgot to declare it as a synchronous function okay we declare we declare this function which should play the sound if it's uh not playing and should stop it if it's already playing uh that's good but now we should attach this uh on play pause press to our play uh yeah icon which is at the moment i can but we need to transform it to a button so uh when we want to handle the touch events such as on press we have these components like touchable which we have like three types i think three or four touchable opacity highlight without any feedback we'll go with attachable opacity we'll say on press we'll bind the function that we just created on play pause press like this and let's put this icon here let's import attachable opacity from react native and one more thing um based on the status of uh yeah based on this variable is playing we should display different icons because if is playing we need we should display the pause button and if it's not playing we should display the play button and to do that um yeah i'm gonna i'm gonna um yeah have a the next syntax like is playing so if is playing we need pause button otherwise we need play button i hope that will work so let's say and let's open our spotify we already see that the button is pause and if we press on it we can hear that the song has stopped playing which means that stop a sync successfully was called successfully however we see that the icon didn't change and why because we never call set is playing uh to change it so it's always true and we will do that uh in the function on playback status update because if we yeah we can so log here the status um hello borja hi there and if we go to our um expo page and go to um the logs for the for our device uh we can see that yeah every time it console log this object which is the status of the sound so we see that here in this objects there should be something like is playing which is true and at the end is playing is false so we can actually take this is playing and set it into our state and we will make sure that our state is in sync with the with a state of a sound that is coming from that library so we know that status have dot is playing and we can do like set is playing with status dot is playing let's save we hear our song playing we stop it our icon changed we press it and we see it again playing and yeah we can do that as many times as we want so that's how we implement like posing and playing the sound um who's saying when you are going to make a customized social media app i can provide your entire entire ui design with them yeah thank you very much i'm actually working on a project with um yeah at my startup we are building a kind of a social media app for uh yeah for sports and for people that are going to the gym you can check it out vitinu so if you have any ideas on how we can improve a design i'll be very happy to hear them so back to our spotify clone uh yeah play sound implement it baseball play pause play button implement it and the last thing that i want to do is to display the progress of a song so if we i don't know if i can zoom here yeah if we we see here that on the top of a player there is a small progress bar that is displaying how much of a song has been played so i actually want to to to build this and to display the progress of a song okay to do so let's first of all uh understand how we can get the song progress so if we look at our status that we can so logged there we see a variable duration uh millis which uh defines how long is the song and there is one more interesting thing like position middle is and here is zero but when the song was playing sorry um when the song was playing let's check when the song was playing yeah here is playing the position release uh was an actual number and this means like uh how many seconds has already been played and we have a duration in total and we do some calculations some magic math quick math and we can get like the percentage of how much of a song has been played and based on that percentage we define uh how long should the progress bar be filled so if the if our position will be equal to the duration uh that means that it will be 100 and the bar will be fully filled if our position will be zero it will be zero percent and the bar will uh not be displayed so yeah let's uh let's take these two um properties from the status duration release and position list and work with them uh for that we're gonna need two more state variables duration set duration use state um yeah once set is equal to use date yeah it messed a bit uh and the initial value i don't want to give it zero because we don't have any duration so i'll give it a null which means that our state will be a number or null um the same thing for buzzy action and set position uh the same null yeah so uh for each playback status update we want to update our duration and positioning state taking it from the status so set duration will be status dot duration mean lease like this and set position will be status that position release yeah you saw uh that autocomplete was from this plugin and it automatically auto completed it too it knew that i want to set the position and it caught on completed with position milliseconds yeah that's uh that's nice uh the next thing is let's um declare a function that will calculate this uh into a percentage-wise so um get progress will be first of all if uh our sound is equal to null or our um duration is equal to null or our position is equal to null is equal to null then uh we want to return zero because there is no progress if there is no sound or duration or position uh someone is asking where to publish this clone project so everyone can see our work uh you can actually publish them on expo and when you publish them um have you you can post a url and everyone uh having the expo client and expo [Music] the expo client is this one come on everyone having the expo client can go there uh yeah either search it here uh based on the name of a project or if you give them the url they can simply add it here just by pasting the url and this is how very easily you can share your project so yeah uh i definitely encourage you to to continue with this build and probably add some of your styles or change something of your own and share it with me i will definitely give you feedback guys you can tag me on instagram and i will answer you so back i heard everybody using jess why are you using typescript so basically typescript is the same javascript but it has types and this is much safer uh yeah it's much safer to to work it's every time you declare some object you define their type and you have less bugs in future of like undefined is not an object or something like that so um yeah it checks the types before building and that's how you but you can but in the same javascript you can write you can write javascript inside typescript and it will be fine like totally fine so that's just a bit of an upgrade yeah actually my personal project is not on typescript and i wish i started with typescript but yeah we are improving every day and i want to to teach you like the the industry standards and the best practices from the beginning because it will be easier okay back to it get progress so if the sound is null duration or position is known where it turns zero otherwise we return um position divided by duration position divided by duration and this will be a value between zero and one but we want to get the percentage value so we will multiply it by 100 and this is how we will get the how much percentage uh of the sound has played and to easily check if we did everything correctly i will put it just before but yeah just before the song title just to check uh if it works get progress let me turn down the volume and open the application uh and here we can see that the progress like this is like two percentage three percent four percent and we can see that while the song is playing it increases so that's what we expect now taking this uh value that we calculate like this percentage we should display that view that will increase the the size um accordingly so i will define it here like view styles it will gonna be styles dot um yep progress and it's gonna be like an empty view uh i will save it let's take this one and also delete the get progress from the song title because it's going crazy there let's open the styles of a widget uh someone is asking will this be posted as a video on your channel great work by the way yeah thank you very much for your for joining yeah all these videos are will be are hyped on my channel so you can go back and play them and yeah you can start from from the first video from the previous video that we built it's also on the channel start building yourself and you're gonna rock so let's define the styles for our progress uh bar it will have let's say a height of like three pixels we'll see how it looks a width of let's say 100 and a background color um i will add it i always add like a default color and then using this speaker i easily pick a different one so it's something close to white but it's still a gray so let's save it so we can see our line added here i think you can see it well however it pushed everything to the side because um our container displays everything has a flex direction row and displays everything into the same row meaning that this this and this view let me close it yeah these three views it will try to display in the same row but that's not actually what we want we want this to be a single row and these two to be another row so what i will do i will create this i'll put bubbler 2 into a different view with a style raw row again almost spill my coffee so let me put them here and let's define the style for the row let's define it here so our flex direction row we need to take from our container and put it in our raw styles because our container already needs to be a column and yeah we can define it as as flex direction column but that's the default value so we can actually delete it let's save and now we can see that um our container displays uh its children uh in in separate rows like the direction is column it will take the whole column so this view and this will will be in their own rows our progress in the next view and this view will display all its contents uh into the same row so into different columns yeah that's flexbox very quickly it's a bit maybe confusing but i can get into more details into this short live stream so we see our progress bar but it's a static one so it's always 100 percent with so in order to fix that i'm gonna um take out this we from here and we're gonna uh assign a width dynamically based on our progress so let's take it out from here and in our progress we're gonna put our styles into um an array and define the width dynamically here so our width will be uh it has like for example this structure like 100 but the number should be dynamically taken from the get uh progress so if we put the this i forgot how is their name like this sticks under the escape we can have a template string and add the javascript here like get progress this is like string concatenation we have a number here that is coming from the function and we put percentage after it so let's save and have a look what's going on here yeah we can see our little progress bar here however it's starting from the center and it's growing outwards and that's just because our container has an align item center which i'm gonna delete save and now we should see it from left to right yeah you can see it there i will increase a bit the height so you can see it better yeah it's there and it's growing and if we press pause uh yeah it's gonna disappear because it's paused if we press play again it's gonna start from from the beginning ok let's check what people are saying using flex 1 how to get same output at up run any phone i know using dimension but how do we use it actually to have um to have a view uh the same width like the full width of um of a screen i never used dimensions i always use like flexbox and flex one and probably with one hundred percent and stuff like that uh however some people that i was working with were using like the dimensions i wouldn't recommend that because you can accomplish the same thing uh just by using flex boxes and it's gonna be uh yeah more readable and more performant i'm gonna grab some water amazing work keep up you what you're doing i will definitely try to make it thank you very much yeah i encourage you to to try to do it yourself um because it will you learn much more just by looking at what i'm doing and if you have any problems let me know down below in the comments and i will try to help everyone so yeah we have we see our progress bar uh growing as the song is playing let's move it back to three pixels height let's have a look here where where is my yeah and we finished um our player widget and now our player widget can play the song can pause and play the song and display the progress of of how much the song has been played sorry um yeah i think uh that's awesome and that means that we can move to the next part and the next part is going to be even more interesting drum rolls okay we get into our back end so for the back end uh as i already said we're not gonna use uh for example some uh made apis for example the spotify api or i don't know sound clouds api but we are gonna do and implement uh our own api because uh we're not by using uh spotify's we have some limitations on how many songs and how long the songs we play but by making our own api we have our the whole freedom to to use any any songs and to play it and also we will learn how to build our own api uh to do to do that i'm gonna use aws amplify and aws amplify if you're uh not familiar with it is a set of tools similar to firebase maybe you are more familiar with that one however it runs on aws and it has a lot of aws services and it's very easy to to start using for mobile and web applications it provides authentication out of the box it provides a database which will store all the data into a dynamo data database in aws uh storage that will store everything in s3 and a lot more things like ai ai stuff machine learning recommendation algorithms and a lot more today we're gonna use only the database with api and also authentication so uh what do you need before um integrating our application with amplify you will need an aws account which you can register for free however you uh you will be asked to [Music] to put there your credit card details however idolized will not charge you for anything that you are not using and also most of the services have a free tier uh which means that you can use like up to a certain limit uh without paying anything um and also yeah uh for everything that for all the projects that i built uh previously like instagram and twitter um i'm not charge anything so all the services that we are using are under the free tier and yeah you're safe there but remember after you're done with everything it's better to delete all the services that you're using to be safe so does aws work for push notification yes aws has a service called aws sms which is simple notification services and using sns your you can send notifications not just push notifications but also sms notifications email also like http notifications so by just having one notification you can have multiple delivery channels which is very nice i'm using actually aws for my personal project and we're using aws sns notifications okay guys and also you need amplif amplify cli installed and configured i'm gonna show you quickly uh where to find all this information in the docs but we are not gonna do that because i already have the amplify set up so there is a getting started guide on docs.amplify.aws start by by the way you will be able to find um this presentation in the github repository so if you you will need you'll find this link easily so let's open this link and have a look at the documentation of how to set up amplify and everything yeah here uh we provide you to choose from a platform or a framework we have like for web javascript react angular view next for mobile android ios track native you want to come flatter we select track native don't worry you said you have startup company once you've done your projects how much you got it bro if you okay mean just tell i'm not sure i understand the question yeah i'm working on uh on a startup uh that's my main job right now and we're building um social network for people going to the gym so it's basically a strava for strength athletes where you can uh train track your uh workouts share with with your friends and so on so going here we see the getting started uh and let's go to the prerequisites so we'll need node.js npm and git installed and i hope that you already have them uh this installed um yeah the first step is sign up for an aws account if you don't have one already um yeah it says here there is no upfront charges or any term commitments to create an ios account so it's free and most of the services under are under free tier uh install and configure amplify cli here is a quick video which is very helpful but the instructions are described under below as well so we install the aws amplifier globally using npm and then we run amp amplify configure this will ask us a couple of questions for example the region uh the username and so on uh just paste in the value sphere and after this step it will open up the browser with to set up them yum user and yum is the service to manage users and permissions in aws and yeah you can see here on the give all the steps that you need to take and once you create it you will receive a access key and a secret access key don't close that window yet because you need to go back to your terminal and the terminal will ask you the access key and the secret access key copy them from the browser paste it here and for the profile name you can leave it as default and that's it everything is set up and i hope it it's gonna work so um after doing all of this um we need to take some steps to set up amplify with our project so we have our project and we open the terminal in the folder of our project and we run amplifying it this will initialize and amplify project let's go ahead and do that here yeah amplify init i hope you can see it and this will ask us a couple of questions uh enter a name for the project uh yeah let's leave it spotify uh enter name for the environment dev environment is okay for us because we are still developing development uh for the editor of choice choose your editor like uh i'll choose intellij idea because yeah we don't have webstorm there um we're building a javascript application and our framework is react native source directory we leave it as it is distribution enter build command and pm run scripts enter yeah everything is enter here and now we're gonna wait until uh aws amplify generates it and it will ask uh to choose the profile you want and if in previous step you you left the name for the profile as default select it from here however i have a separate account for these clones and i will choose it hello george how's it going thank you very much thanks for for joining and for appreciating the work yeah now we have to wait a bit until uh amplify setup sets up the project we should stay hydrated guys don't forget that yeah someone is asking uh what will the back-end be the back-end uh is gonna be a graphql api on uh aws amplify so that's what we are starting to build right now so yeah stay tuned and shortly you'll find out yeah we created um our project and if we go back to the documentation now we need to push this project and yeah install all the libraries here is for expo if you are using react native cli there is this libraries i'm gonna choose expo because we are using an expo copy go back paste copy paste developer and the last thing that we need to do is to paste this to configure amplify in our code and we need to copy paste this code from into up.js in our case it's going to be up dot t s i'm gonna make this one smaller because it's still working there so into our root folder let's go to up.tsx and here let's paste in the code from uh amplify it says that there is no library because it's still installing we're gonna wait a bit until it finishes i like watching your tutorial tutorials i have nothing wrong against aws but i really wish you can look into firebase also as a back-end feature too uh yeah that's something that i'm like considering and debating but because i i like very much aws and i'm very biased towards it because yeah i worked at amazon and i also have certification on aws and i really love like all the services and everything that they are doing the other reason is that there is a lot of uh information and resources already on firebase and you can find that on internet like a bunch but there is less on aws but that doesn't mean that aws uh is worse or something like that i think it's even greater and they provide even better services maybe the it's not that user friendly for for the beginners and you need to set up configure something but once you get used to it like it's really it's really great and it does its job like we are running our startup on um on aws and we are we have like uh around 15 000 users and we are paying for everything uh under 100 100 per month but we our app is heavily based on videos and we have a lot of videos a lot of network traffic and yeah like 70 of that is just network traffic so for servers we are paying like less than 20 20 bucks i think that's that's really great so yeah that's the reason i'm using aws but it doesn't mean that i'm not gonna try firebase in future if yeah it's something that is interesting for you the amount of value you're giving us is insane thanks a lot one request please guide me how to start as a beginner thank you very much for for joining um to start at the beginning yeah start with tutorials but don't spend a lot of time on tutorials because you will fell into that trap of only watching tutorials and while you're watching you say like okay i get it but after one week like you look at it and you don't have any idea what's there so the best thing to learn is start doing yourself for example uh you're watching these live streams and after the live streams go on your own pace and follow everything that i'm doing like maybe that you're not doing anything uh by yourself and but that will uh develop your like muscle memory and you'll understand better how how it works and you'll learn faster so yeah start with projects i would recommend even smaller projects than this one keep it small and always always try it yourself it needs a lot of patience is it possible to integrate firebase with graphql like aws does uh i'm not sure about that i don't think so i don't think that firebase has any graphql um yeah possibility and that's another feature that why i chose amplif aws because graphql is just you'll see it shortly so our project um everything is installed we [Music] let's save it installed mpm something they're saying that i need to install with yarn it's not a big difference but yeah let's um let's restart the application here run ios simulator i'm only saying i use react native firebase in many of my project it's not very polished i'm guessing would be better as it is officially supported by ws um yeah i don't know i i can't say anything about that i think both uh firebase and aws are great services the library for react native yeah the react native firebase is not supported officially by google and i'm actually using it as well but they don't have a lot of problems with that but aws yeah they is all the libraries are supported by the aws team so let's have a look what's going on here uh we installed it something is going wrong let's close our server and restart it that's the first step we need to take yarn start let's run it on ios uh yeah it's building let's wait a couple of minutes totally unrelated to today's videos but this has been on my mind ever since i watched your twitter tutorial uh how does the follow and unfollow feature works uh i didn't implement follow and unfollow feature one on twitter uh however i implemented the like and unlock the like of the post and um if to take it abstract that's very similar of how you would implement the follow and follow because here we have a many-to-many relationship where on the song started playing let's pause it a many-to-many relationship in my case it was uh users with uh posts because many users can like different posts and a post can be liked by different users and in the middle we have a uh additional table that connects to a user and to a post which is called like in case of following it's the same we have a middle table with like followings which connects uh to the user on one side and to another user to the to the other side so it has like two keys and that's how you define a relationship between two users hope that uh helped that's also the solution that i'm using for my startup because there we also have like follow and unfollow okay we uh installed our uh and set up our amplify we configure it we see that it runs we don't have any errors i hope yeah we don't uh that means that we can move uh forward and start actually connecting an api and a database uh to the to our application so to add an api we just write amplify add api invest the syntax to add any services like amplify on off amplified ad api so let's go amplify add api enter and amplify always like ask us a couple of questions and it's very easy to set up actually so please select the form uh below we want a graphql api and if you're not familiar with graphql it's a different style it's an alternative for rest api but here we can define our model like in a graph way and when we query is the client who decides what fields it wants to query so for example um on this page we want uh only the image and the artist headline if we were to use a rest api we will make a call to for example categories and it will return everything about this album which is uh if we look into the data which is like id name by number of like uh songs and so on uh but we only need two uh two data like image uri and artists when we press on it we need more information and with rest api we don't have this uh granular um approach of deciding like what data we need from the front end and we will do a request it will give us all the information about album and we'll display like only the name in graphql however we can define like what data we want to receive from the server and also we can define like within one request we can get back uh multiple relationships for example we can with one request we can get back the categories and the categories will have an array of albums albums will have a list of songs and so on and we don't have to make like three or four requests like get albums then for each album get song yeah get songs and so on that's again very brief uh uh explanation of graphql provide the api name spotify is okay authorization with api key for api key spotify after how many days from now the api key should expire uh seven is okay uh you want to configure advanced settings no i'm done i'm okay with the default settings do you have an annotated graphql schema no we don't and it will suggest us two templates for the schema one is single object with fields for example a to do table a to do model with id name and description and another one is one-to-many relationships with blogs posts and comments so we will take this one because here we also have like one-to-many relationships and based on this template we're gonna be able to edit it to our needs so uh do you want to edit the schema now uh yes we want to do that but i'm pre i'm gonna press no because amplify can't open the file itself here um we were gonna edit it ourselves so let's go to amplify folder and here we see uh three folders we need the backend one app api and here we see the file schema graphql and schema graphql is uh the actual definition of our api so in this case it has like a blog with a relationship to the post a post model and a comment so multiple blogs each blog has a post each post has comments that's uh that's the default thing here let's have a look at what we need so if we go to the next slide i think i prepared uh some information so our uh models will be something like this we need one model for the album category and the categories like happy vibes popular playlist shows to try it and so on this model we have an id a title and a list of albums like a relationship with the albums then we need an album album will have id name by like who created it number of likes image uri artist headlines and songs the song will have id image uri uri for the song itself title and artist okay let's uh let's start doing that so i will rename my blog to um how is it called album category album cut glory will have id instead of name we decided to go with a title um it's going to be a string and the exclamation mark means that it's required and it's going to have albums not posts but albums and the type this is like means like an array of something and our type will be album and it's going to be a connection with um by album gary and fields will be id so this will be the key that we'll define on the album model and the fields will connect to the local id then from the post we're gonna change to album we have id name by yeah let's define the key on it uh by album category here and the local fields will be um album id for the fields we have id we have name name which will be a string we have by by as well string what was there now let's zoom by string which is required

Channel: notJust․dev

Views: 9,976

Keywords: vadim savin, not just development, notjust.dev, spotify clone, build a spotify clone, how to build a spotify clone, spotify clone tutorial, spotify clone react native, react-native tutorial, react native ui design, build a spotify clone javascript, build a spotify clone app with javascript, react expo, react native live coding, react native clone, live coding, react native aws amplify auth, react native aws amplify, react native auth, javascript, typescript, react tutorial

Id: YmynMyn8o6E

Length: 75min 9sec (4509 seconds)

Published: Fri Sep 25 2020