🚨 Recreated the Spotify Interface with Elixir, Phoenix, and LiveView Using Tailwind 🤯

welcome to yex Pro my name is Gustavo and today we're going to be talking about how to build the Spotify interface using Elixir Phoenix and live VI you're going to learn all of techniques that I've been using for around 4 years and especially what I've been using to build live VI application split into components which which is going to be straight forward for you to test your application scal in your apps and reuse components hope you enjoy it and bye-bye this is the interface that you are going to build using alixir Phoenix and live view I hope you enjoyed this tutorial because we're going to learn a lot of fantastic techniques with Phoenix and live view so let's go ahead our first step what we're going to do is is we got our uh Elixir app so I think this is going to be enough for us to move forward our first step we're going to clean all the app before moving forward because in this case uh I'm going to share with you a couple of strategies so our first step is going to be uh let's clean up here so we can come over here uh I'm going to delete I will delete the controller as well we're not going to use controller anymore we can come over here and say live then we can say uh page live. index and then index as well not going to have this router for now and now we can come over here and stay live um Page live index. exex death modu get some water and then we can come over here and say use live view and then render signs to start our live view page and then we can say hi this was our first step let's clean up a little bit more our components so it can come over here and then we are going to say black and then let say text for now zinc 200 and there you go and now we can get rid of this header for now and also we can come over here and save that get rid of this because because uh we are going to build a live view app without any uh styling so sometimes I prefer to use the uh live view style but for now this is going to be enough you can say clean up I like meting and creating steps for us so for now I think that's fine our next step what we are going to do is we are going to start defining our uh layout so I'm okay for now having the backing ground black for now I think the text zinc could be something like uh 50 it's a little bit uh clear and now let's start creating our live view page so I will go over here and I think it's enough for now and what we're going to do is we're going to add by default we already have the tailing so I'm using the image where on our image I'm going to add uh a side plus um a main there you go we're going to say aside and Main but one more thing that we will have to do is we need to have a footer with footer text and let's see how it works and there you go so now we have our first definition how our uh going to have our page and then what we're going to do is let's start adding a little bit more classes here so we have our screen let's add and make it a little bit different we're going to have a flex and then we can have Flex coal I don't know if that's really important because the result will be the same so I'm not going to add here maybe enough for future but right here what we can do is flat F and then Flex one and our aside we going to say uh W 64 for now our main just a flex one you have more space so right here Flex one and what you are seeing is that now we have couple more uh spaces our um application just one more thing to to Ure what we are doing so first of all I'm I'm going to make this a little bit higher for now let's add this guy and backing ground zinc 900 just to make sure that we are moving for the right direction the padding six and then here a one more which going to be the P the padding six and our footer what we're going to do is uh backing ground zinc we can say 900 as well a border top on the top border zinc 800 and padding six and there you go just let me see what else that we can do here so we got our screen probably this will make a lot of difference if you use flex and flex coal let's see and there you go so now we started having our P I think it would be nicer if I change the I move the page to another desktop so right here because uh I want to make sure that uh I'm not going to working on the mobile stuffs here for now well backing round zinc 800 900 I guess that let me think I personally feels that I personally didn't like it so I'm going to get rid of this let's see and what about we add I prefer fala border right there you go same one border zinc 800 nice I think this approach is much better we I can go over here and then change couple things if I feel it's important what we're going to do now we need to start creating the aside here so what we are going to do is we're going to have a nav right here um nav with space y 4 and then we're going to have a link with a text called there you go let me just format this guy here as you can see now we got our text we got our link so let me just say something like a class Flex item Center because we need more things the text will be extra for small font Samy bold text zinc 100 but one more thing that we need to be aware here is because we are going to use the icon so we can say icon will be Nam uh you can say hero home and then the class will be W5 willbe h 5 and W5 and then we can say home as you can see we got uh a link but let's add a little bit more things let's add the a gap and as you can see now seems to be nicer what else we have couple more uh options here what we can do is something like oops sorry let's duplicate this guy and what we can do is we only need to uh change the icon we can say magnifying glass and then we can say search and right here we can say book or Library the icons sometimes will not be the same because uh uh things can change because we don't have most of them on using uh hero icon uh your library I think it's good for now and let's see and there you go this is what we have and what we can do now uh I'm going to give you some chips after this class but because the icon is done let me just make couple more updates so what about if we come over here uh having a little bit more uh margin on the top so we can see margin top 10 the text we can say small and the zinc will be 200 and I personally like this way and what else that we can do so we got our space let me add a little bit more let's say uh [Music] five uh better the space what else so we need to start having uh another menu personally uh we have this way we can make it uh better uh some of the things that we can do is making this one manual I'm going to teach one tip here first so as you could see they are always almost the same so the only difference is the name and the text here so what we can do we can come over here and say F Mount e socket and then we can say uh uh NF menu options and then we will have a list of maps as you can see it started being a little bit more complicated when we I started having this kind of complexity I like creating the HTML and then moving this HTML to another file and after that we can get rid of this and we can say nav menu options will be this guy with a list and on the list we will have the icon uh let me just create this guy here we are going to have the icon which is going to be her home and we're going to have the text will be home same in the same on the same way we can have uh this one and search as text and then we have the bookmark then you can say uh your library and then we can get re read of all of them and say uh four then you can say menu uh Na menu options and then we what we're going to do is let's change this to uh menu. icon and right here we could say menu. text and and when we have it we got the same result and we splited the responsibility to of the HML this is one of the strategies that we could do we can make other things but anyway so now we have a smaller HML we could create a function component here as well uh to use on our app but you're going to learn more strategies and some of them uh you're going to learn today uh what we can have now it's a nav margin top six pading top six I'm using the image so the advantage of using the image and live view when you install it correctly is that auto complete and you can make a fancy menu you can make a lot of things that it's amazing let's check it so now we have the border on the top now we can see border zinc 800 and then Flex Flex coal and the Gap will be three and then we are going to have a link going to add in this way with text uh small and then uh text zinc 400 and then hover and then we're going to have a hover text zinc 100 and we are going to say that the text will be best songs and then we can say plus what about five and there you go so so as you could see we got our menu now we got our B Sounds here and everything using the image I hope you like it uh let's let me just uh format this code open new one here mhm and one more and now there you go as you could see we got almost the same result another technique that we could use is what about four where on my four I'm going to say I then we can say one 2 six and then we can say some something like um the songs 20 and then can say I then we can get rid of this and make the code cleaner and easier to read we know that this those are mock information but it looks nice so you've learned a a new technique so you started creating HML with a couple complexity and this complexity as you can see we reduce to a n menu so one more things that it's interesting to learn is that we started having a component responsibility probably um sometimes you need to identify when the component is I stat component or function component in the past we call this dataless component but now it's function component and when it's going to be a live component I'm going to create a live component with you now so we can create the aside here so what we can do is something like um a side then we can say aside. ex def module uh and then let's get rid of this and say uh live component then we can say uh uh render SS and then what we can do now we can just copy this code here and paste it after paste this code so we know that we need this menu this menu obviously is not the mount responsibility we can just copy this guy maybe cut to this guy come over here and say something like update where we are going to receive the assigns and then we can say something like it's okay we have this way but let's use um look syntax socket then we can uh get rid of this and one more thing that we could do is signs uh and there you go so if you feel that it's necessary to create a component or something like uh respace the HTML it's so straightforward following this path so you can just need to uh create another aside. HML dox and then you can just copy this guy and split the responsibility between the UI and the live view uh component interaction and now if you see our screen we started not having the menu at the same time we started not having our aside and to add here you can just say uh uh live component module will be assign and then ID will be assigned we must have an ID to our component and the result uh is the same which is fantastic uh it's a awesome way to create a live view I always like adding the ID at the top because sometimes you need more interactions uh testing it's super nice when you have it so let's go ahead and move to our main we're going to work a little bit more but now we ensure that our HTML it's smaller and what we're going to do here let's add a little bit more uh things we can say that Flex 1 P6 we are going to and uh Flex items Center and then uh G three with a button with B1 uh rounded full um flex and items Center a text called a menu plus two and now we got our div we got our button here both buttons which is nice and now let's start creating more things so what we're going to do is uh come over here and say uh backing ground black let's reust this let's see what we have we got text here okay and what we're going to do is we got the menu and right here we need an icon on both and only the icon will be enough but both here we can ignore saying that the icon will be hero chav from left uh let's get rid of this and everything that is five can say six uh here we can say uh right oh what else as you can see we started to have uh in icon here let me just change here to a zinc to make it clear uh backing ground zinc 900 and as you can see we started having a two icons here similar with the Spotify and what I that we can have here is a text it's going to be an H1 uh font semi bolt text 3x sorry 3XL margin top 6 we can say made for elx pro and and that's it now we are going to start creating a menu uh as well with more details and what we can do is you're going to see how powerful is the image here so what we're going to do is something like uh grid we're going to have grid hole three and GAP four and then we are going to say that we need more menus so we're going to say just one and this is something that personally uh we're going to learn something that it's really interesting and also at the same time it is going to be a a component and in this component we can make it something super interesting so what do we we can have here we need to have an image so I I'm not going to ask you to download image if you want to make this more uh realistic but I'm going to get the logo here SVG I'm going to copy the relative path so and then I'm going to say image and the seource will be this one I'm just going to get R of the proof and static and the out will be uh Alum image and then we can add a description you can say strong allone Y X pro so if you want to learn more about the components and why I'm thinking this way you can join toex for and learn a little bit more and then let's just add one button and then we're going to start creating the CSS so the button will be uh 12 8 12 and then Flex Flex items Center Justus toy Center bading left one one rounded full backing ground green 400 and text will be black and margin left Alo margin right8 and then on this bottom uh let's just add the hero uh plus but not going to be this one not going to be this one is going to be the play solid and this is going to be I'm going to add six just see how it goes so as you can see we started having uh the menu uh one more thing related to this button it's rounded and together will be full badging left uh what else I think it's fine okay just couple more things that we will have to do let's just add the way that here 104 and height 104 and almost there we need to work on this uh link we can say backing Ground White split by 10 okay and now we can see rounded black item Center uh item centers Gap four overflow hien H we can see backing Ground White five uh 20 we can say transitions all and as you can see it started being changed couple things I'm going to add like this guy so backing Ground White rounded and then Flex item centers get four overflow hidden flow hidden theover will be backing Ground White 20 Transitions okay so now we got the image then we got the Alum then we have the description about the button black item Center justy Center pading left one rounded four margin left Auto margin right eight I think it's always need here but one of the things that I want to do is let me add just a margin top maybe four nice and then let me just add one more thing maybe pading two okay nicer so but when we hover it's working as as well and we have a transition fantastic um I'm going to make this a little bit darker five and 10 let's see I like it personally I like it more um not for not duplicating couple of things let's use a little bit more uh Elixir and Phenix 1.7 so four we can say on to six and there you go as you can see started started being similar with the Spotify as well fantastic now we got uh the the menu we got uh the transitions as well we got the hover and what else that we need should do is we're going to build one more section um using the live view let me think if I need to change a couple of things I think that's me check the aside I'm okay with the assign and we got our first menu just one more things that we need to add that's going to be fantastic um here's the thing my tick for you if you're using Phoenix if you don't understand Twi well you're going to lose the opportunity to build a fantastic front end fantastic functionalities and brings complexity that it's unnecessary one of them is uh about this button here so you got the button what about if we add a group here let's first make this but button invisible the button will disappear but I want to make a hover but the hover I need to make it when not when you go over here and hover the button so if I say here uh hover visible as you can see I can hover here but I need to hover even hover me and near the button it doesn't work but to make that work what I'm going to do is group overover and then I'm going to say uh group and as you can see when I hover it's working what we can do as well is a transition I'm want to say all and now we have something more interesting I personally like it a lot uh what we're going to do is uh we have this made for for Alx Pro but I'm going to change it and make this section uh uh below you can say good morning and then we got the the menu we're going to create something very similar but uh one of the things that I'm going to do is uh come over here change to 82 uh the text will be almost the same let me see I'm okay but let's change this to made for elx pro and then what we going to do is I'm going to copy and paste this guy but couple things will be different and then we're going to change it here so I'm going to say G calls 8 G four margin top four fantastic uh our length will be a little bit different and we're going to add like eight so here is going to be backing round 5 P3 instead rounded we can say medium medium and flex and the items will not be on the center we can say Flex call and GAP two I'm going to get rid of this Gap two so let's call okay just one more thing let's say overover making Ground White 10 the image we can say 20 20 and right here we can say class W full uh here we can say it's okay I'm going to change this right here I'm not going to add this uh button but we're going to say span text to small text zinc 500 and then we can say laen 12 cuz it's going to be a description about the uh image and then this is the next result we have so which is great uh just one more thing we're going to change this to uh daily uh you saw that when you're are using the Spotify mix I and we're going to change this to I and there you go so this is the our next result uh which is lovely uh Next Step so we started having uh a hover we started having uh the menu uh we added uh the transition well just one more thing that I think it's going to be nicer here let's add uh hover to text zinc 100 and transitions all like always adding the transition all then as you can see it started make it clear and what else so we got our menu let's start creating our footer as well things that we could do here we can add like the core uh menu here or something like that so what we can do we can create something similar in this way I like just duplicating because it's only the HTML we can see Main and on our main we can just rename it to main we can just ignore it but I'm going to leave the HTML here main. HML HTML then we can say Main and then we can just copy the main HTML that we have here because it's going to be a component as well so now what we can do is just duplicate it and say Main in main as you can see when you learn components in live view uh you understand how it's straightforward to copy and paste code and make it simpler so now when we do it this is our result it didn't change and you have something fantastic which is great so just one more thing in my case you so if your page is uh finished I'm going to say 16 to see how it goes and as you can see I started having more uh menu I'm not going to add this I'm going to say eight for now and then you can create like a list over here but for me it's okay now and what else that we are going to do let's work on our footer so now what we are going to do on our footer will be uh creating uh the menu as well just one more thing Let me just commit this uh Main and a side menu and then let's create our uh footer let me just make one change here and see if that's really necessary okay this was a format okay never mind so we got our footer here so now our first step Flex items enter G three and then what we're going to do is same way in this on the same way we can just copy one image that we have and add in here the main difference let's get rid of this and let's make this image smaller so we can see uh 56 as you can see we got an image here this is going to be our album and then what we're going to do we have we're going to have a flex and flex pull and then a strong strong F normal uh I like Ed perfect and then so what we are going to do is spin text extra small all text zinc 400 and then we can say add shiron so as you can see it's nice so what else we need to create one more thing so two more things I mean so one of them will be our uh menu so we can say Flex uh Flex C items Center where right here we are going to have another div with flex item Center Gap three and on this step we going to have the first interaction menu so we going to have a button and on this button we're going to have an icon sorry so I need to copy one one icon in someplace else probably here there you go and then what we're going to do is you're going to have the first icon here it's going to be five five I think let's see five and then five and what else that we are going to need one more one five times what is the difference between that and why I'm not going to duplicate it so this button on the midle will be our play and then we can say Flex items Center just by Center badging left one rounded full backing Ground White text black margin left Auto margin right8 and then let's just change to play and say solid and let's see how it goes okay one more thing rounded rounded okay great uh what else so we have the song we have the item Center so one of the things that we will have to add here or not here but on our fotter so you get got the G three but we need uh right here the flex items Center and just five b it didn't work why let me see so we got here oh I didn't close this guy and then this guy that I'm closing I'm going to say another diff that we are going to work on sooner so let me see if that's going to work uh yeah it's started working I'm going to say new menu or something like that and what else that we will have to do here so let me just format this code here and it full marching right probably we're not going to use this guy here and there you go I think it we are almost there almost finishing uh couple more uh updates that we we will need to do so I personally like the color um but I need to change couple more things so right here uh the icons as I mentioned will not be the same so can say code breaket bracket bracket sorry solid and then I'm going to say 84 and 84 let me just copy and paste it here and I think the text here will be text zinc 200 100 it's a little bit different 200 here right here the icon will be backward okay same one but right here I'm going to say forward and this one I'm going to say not forward but we can say uh eror path and then nice uh think that it's Error my mistake here so the icons as I mentioned is not the same but because we're using the hero icons so we don't have couple things here uh what else that we can do here so let's just add one one more uh menu here it's going to be straightforward Flex items Center and G two let's just copy one of the icons that we have or to three and then we can say play and say Circle and this icon will be at just mins horizontal and then we can see device on mobile mobile as you can see we got two icons more here and then what we can do just one more thing uh Flex items Center and gapu and then we can add another div and this D we're going to make a couple more things but uh right here let's just change this to uh speaker speaker x mark and then we can say something right here it's going to be a little bit different let me think just one more icon and here we're going to say midle and here you can see Mark wave as you can see speaker wave oh let me just get rid of this and almost there but right here we going to stay that we have class H1 rounded full W 284 backing round zinc 600 and right here we're going to S Class backing ground zinc 200 W 10 H one rounded boom I made a mistake okay did close diff and there you go as you can see got like a menu where you can uh do something like increase and decrease the sound uh the icons is okay have three or oh we have just two and the vice okay let me see device on mobile and there you go nice so one more things that one more thing that we need to do is um below the icons let me just add something here which is going to be like uh flx um items Center G three and then a Spam where we are going to have have class text extra small text zinc 500 Z 31 and then let me just copy this guy here cuz it's going to be similar but the main difference between them is that this guy is going to be a uh 96 I think backing ground zinc is okay and the W here will be 40 and after that just one more uh a span here you can say two and I think that's it and there you go as you can see we got got a clone of our Spotify also things that we could do so sometimes you need to think about more the component but basically what we can say is let's just copy and paste some of them then we can say um uh water play and then F play hang on wa dot HTML F play and then let's just come over here and copy this footer say it's okay for now but our footer play and then we can just add our ID here at ID and then we can come over to our application and say um for play then we can come over here and save F play if everything is working so fastic so this is the way that you can call on um the Spotify as you can see you learned a lot about component so you can learn more about on elex Pro this is was just an example why and how to split components and create an interface using uh T and HTML eally what I highly recommend you is please subscribe on elex Pro and if that's your will join Chex for to learn more about Elixir Phoenix live view hope you like it see you on the next tutorial and [Music] bye-bye

Channel: ELXPRO

Views: 1,287

Keywords: elxpro, phoenixframework, elixir language, learning elixir, elixir programing, elixir programing language, elixir phoenix, elixir and phoenix, elixir phoenix liveview

Id: aS8nnWnbw1M

Length: 58min 55sec (3535 seconds)

Published: Sat Oct 21 2023