ReactJS and Redux - Build 4 Web Apps [2/4] | David Katz | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

ReactJS and Redux - Build 4 Web Apps [2/4]

teacher avatar David Katz, Software Engineer - Coding Instructor

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

15 Lessons (1h 10m)
    • 1. Introducing the Course

    • 2. Wireframing MusicMaster

    • 3. Setting Up MusicMaster

    • 4. Creating the App Component

    • 5. Styling with Bootstrap

    • 6. Searching for Artists

    • 7. Preparing a Web Request

    • 8. Fetching Data with a Url

    • 9. Building the Artist Profile

    • 10. Styling New Components with CSS

    • 11. Expanding the Fetch Requst

    • 12. Building a Gallery

    • 13. Playing Audio with JavaScript

    • 14. Pausing a Track

    • 15. Animated Styling

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

Become a highly-demanded software engineer by following this tutorial on React JS and Redux. As one of the most highly-paid skills for web developers, learning React will open doors and jobs for you.


This project-based course will have you coding right away. Building four carefully thought-out example applications in this course will sharpen your skills in modern web development.


First, learn the principles of React JS by building two applications. One introduces ES6/Babel, and the other how to handle HTTP Web Requests in React using an API. With the third application, learn how to manipulate browser cookies. Finally, you’ll create an entire app with full authentication and a real-time database to finish it off.


Also, learn the engineering of Redux. You’ll find that Redux boils down to three simple steps!

Don’t worry if you’re new to web development. Some JavaScript experience will help, but this course makes sure to explain every new concept thoroughly.

Take the dive into React JS and Redux. Let’s get started coding!

Also, here’s a link to the online repository for this course:

Meet Your Teacher

Teacher Profile Image

David Katz

Software Engineer - Coding Instructor


David is a software engineer at Zendesk, with a Bachelor of Computer Science from the University of San Francisco.

David has gained valuable experience from the tech industry. By incorporating these best practices, he hopes to create the highest quality learning experiences possible.

Feel free to connect with David! He is always curious about the cool project you're working on. And he loves to discuss ideas on how to build impactful technology.

See full profile

Class Ratings

Expectations Met?
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Introducing the Course: welcome to an excellent resource on how to learn reaction. Yes and Redox. Congratulations. Learning react will put you one step ahead because it's one of the most highly demanded and paid for skills in the software industry. I designed this course with one overarching goal to get you to have reacted in a Redux on your resume and prepared to build your own react projects from scratch. In this course, you will build four applications. One will get you up and running with the principles of react and introduce JavaScript es six syntax. The next will using a P I and show you had a deal with Web requests In react. Third, you learn Redux. It builds an application that also stores information locally on the browser. And finally, best of all, we'll have a Redox app that has full up education for signing up users as well. As a back came database, I will explain every new concept precisely checking and measuring every fresh idea. That way you have a thorough understanding of the coat and engineering. Also, I'll let you in on a secret right now. Redux can feel complicated at first, but you can boil it down to three basic steps. All right, if you want to finally unlock the key to react and redux and add them to your skill set or you just want to brush up on your Web development chops, then this course is perfect for you. So what are you waiting for? Let's get started coding. 2. Wireframing MusicMaster: Welcome Here we have music, Master. The second application we will build to get it works just like this. Search up the name of an artist. Then you'll find some information about them, along with a nice profile and his bonus. Get a preview of their top 10 tracks and they're playable. Let's search up the beetles. For example. Let's play Hey Jude or let it be. Maybe you want a different artist about Frank Sinatra. There we go. How about fly me to the moon or I've got you under my skin? This one takes advantage of Spotify eyes Public AP I to allow US access data such as profile images and of course, soundbites involves well, certain AP eyes usually demand in a p I key. Luckily, at this point in time, Spotify eyes AP. I allows free access to the data we want. Also, this application has responsive design in concern. That way, even a multiple device or platform will be able to see this website or Web application looking nice and meat. All right. This application has so much more interactivity than the previous one count in. So let's get started coming and building music Master 3. Setting Up MusicMaster: Let's set up the Music Master Project. Make sure to go to your terminal now navigates in the same directory. Were you created your first react project type Ellis, you should see your first project countdown champ already there, along with any other files or projects you may have put inside between now and then, we will now use the create react to once again in order to initialize our project. Right, Create, react up. Remember, it's the name of our application. So, Music Minister, this may take a minute or two depending on your connection. So I'll go ahead and jump ahead in the video to when it completes. Feel free to pause until yours finishes as well. With success, your output should look like this. Now, before we launch our code and run in PM start, we can take one extra step to prepare ourselves before recode ahead of time. And in Celeriac. Bootstrap already. So simply run the command and am installed. React Bootstrap in the double flag. Safe and up. I actually forgot to navigate into the project first, so don't forget to do that. So I'm going to open my folder and just to lead those known modules that were installed going to go ahead and clear my terminal did not get into music master and then run that same command. With all this insult, we could start creating the music master application and our first component, Let's do it. 4. Creating the App Component: Now that we have everything installed. Let's launch our initial application by running NPM Start also, let's open it in our code editor. I'm gonna go ahead and resize everything. So that way the sizing is more pertinent to what we're doing. The very first thing to do. Let's do it. This entire source folder. Yes, and the reason to delete everything is to start from scratch so that we will understand exactly what is going on as we create our application. First thing we need to do is import react from react. And then, as many of you might remember, it's react down from the reactive. Now we can simply render from the reactor, not render function. Did that we would like. For now we'll just call it Music Master and want to grab on to the Div with the idea of route at the public. HTML. We'll go ahead and save, and there we go. We have music masters showing up in the corner. As small as it is, let's continue setting upper application. First thing we want is an APP component. It's a new file at dot J six. We'll import react and the component component from react. That's all we need for now. Although we'll add CSN Slip, let's create some basic structure. So class at extends component. I wouldn't want to export that by default before we forget. Then, of course, you want to render Sanjay sex and returning. Let's try returning, Did it? Says Music Master from AP? No, And then we'll go ahead and replace it. Index dot Js did over here with our. So it's import at from the current directory and find the at. They will simply use a self enclosing tad for our and we felt to compile. They can't find app in the current directory now. Sometimes you have to reload the whole server before it recognizes a new module. And then we go. We see music master from at and now let's continue adding the actual structure to the application. First off, we need a title before our application. I will say Music Master as the title. We'll go ahead and give us a class name of at title for now and then we'll need a search bar component. Remember, we want an input field placeholder of Search an artist for now and then a button comported that would just say is Submit. We'll have a profile section so class name equals profile Over here, we can simply say Artist named for now and then for good measure will add artist picture Div and finally will need a gallery component. We can just say gallery for no, of course. Give our class name of galleries. Let's save and is it updates. We have a very basic looking application that really does nothing except even click a button for not so Let's move on at some basic styling. Her application to actually make this visible and irritable in other words, bigger and add some bootstrap to the application. 5. Styling with Bootstrap: before we do anything else, we can already clean the styling of this application by including the men. If I CSS file from react. Bootstrap. Never get back to react. Bootstraps getting started page and copy the link of the latest compiled in unified CSS fun . Some going to copy it, Navigate back to public sash index dot html and included above the type. And already we should see her at update with some new styling, the fund change as well as the input and the button. Now let's add our own styling to music mess. We'll add a CSS file in the source holder. We'll see at dot CSS like before and before we move on. Let's add a class name in preparation to the overall DIV of app. Now weaken style that I want everything to be aligned to the center. I don't like how it's to the left right now and then I want a little petty so we'll say 5% patty Now. Of course, we need to actually import are stylings, floods, import app dot CSS and there we go. Our styling applies. Next up, let's change up the search bar component. It looks kind of ugly right now. It doesn't even say submit like we wanted it to. Regardless, we're gonna import a few things from a handy dandy react. Bootstrap library, reimport the form group component, deform control component. An input group as well as the cliff icons from react. Bootstrap. And now we're gonna change up this whole search far. So let's go ahead and just delete it. Let's place it with a form group component and then inside the form group, we're gonna have just like an input field, a form control fueled and this form control will be self in closing. So we actually don't need to have to tax. It's type will be text and the placeholder will be searched for on artist. Now this actually needs to be wrapped with an input group itself include group Let's take this form control. Place it within the input group. And finally, the reason for this react Duceppe code is that we want this button toe look a little bit. It's gonna have an icon. I have a magnifying glass that looks like a search bar. So it's at input group and on, and within this add on will have a glitch icon. And then this cliff will simply say, search and never go. Doesn't that look nice? Now you can look through all the glitz icons within the React Bootstrap library. There's a whole ton of them. Besides, it's magnifying glass for pluses. Profile users, etcetera. Let's continue styling our application before we move on. I feel like it might be a nice idea to transition the overall theme of our application. So that way we can differentiate it from the other ones that rebuild. Let's go ahead and target the whole body and change the background Deflect, which is 000 inaccessible. They only need to make sure the color still is made up. So make it f f f or white. And as we save their the theme changes from night today, the last thing we want is a bigger appetite. So we'll increase the boat size 2 26 pixels. Great. We have a pretty neat application design going for us, moving forward now so we can continue building off of that. Let's move on 6. Searching for Artists: let's hook up a search method to this application. Our search method for now will simply log to the consul whatever text user type within the input field. Recall that input fields in react have a non change function that allows us to grab the target value contents of its data. So we need to set up some state first where the user can control their quarry to search. Let's define a constructor now for this class. Remember to pass the props argument, and then in the first line, you always want super props. Next up, let's declare the state object off this class. For now, we'll have one key query, and this will be whatever the user types with input field. Let's set it to an empty string for now. Great. Let's not change the value property of this input field to this not ST dot kwehr. So right under the placeholder, the query is equal to this dot state dot queer awesome. And now we can use that on change function. Remember, we had a handle on event variable. Then we simply set the state off the query to the event dot target value. Awesome. Now we need some way to test if this is actually working. For now, let's hook up a search method. And then in that search method, let's log the state. So it's consul dot log. We'll say this not state in this dot state, so we know what it's actually referring to. Perfect. Finally, we'll need to add the call to the actual search method from the button. Click. So right here on the input group dot Add on that sat on click feature within the tag, and we need to use anonymous arrow function here. You call this DOT search and accidentally deleted that Adam so hopefully they should work. Let's inspect the own it. And this instead of saying Query should actually say value. And here we go. Let's search for an artist. Frank Sinatra. Maybe there we go. The query is Frank Sinatra. One final thing In the last application, Countdown Champ had a challenge to add functionality by allowing the user to submit their requests by pressing the enter button. We can accomplish this feature by using the on key press feature of input field. Similarly, toe on change we need to handle the event variable here. We need to check the event key property. So let's go ahead and console Log that for now. So we'll say on key press equals handling the event variable. That's consul dot log that even ducky for no, just to see what it looks like. As I say as I'm in here, the venti is a d f. But when I press return or enter, even Donkey is enter. So now we can simply call the search function. If event Daki ever equals enter, let's add that logic now, in a simple if statement, we need to wrap the whole thing embraces. We'll check if, if event hockey is equal to enter and if so, would call this not search. Let's search up. Frank Sinatra. Neither press enter. There we go. We console. Don't log with this start state and I know search was called because that's a concert long that we're using. Great. Now that we have a working search method, let's continue building music Master 7. Preparing a Web Request: We have a search method hooked up to a advocation, but we actually want that methods pull up some data to grab a information about artists will use the awesome Spotify public a p I go ahead and and get to a new browser or Tad and search Spotify BP Did you see one of the first links as Web API I Spotify developer? You want to find their endpoint reference under Web API I A p I n point reference. Then find the search feature. As you can see, the search for an item in point allows us to simply get Spotify catalog information about artists, album's tracks or playlist. That magic query that research. Luckily, to use this and point, we don't need an A P I key so we can go ahead and just copy this link for now. Toe already. Start using it. You don't need to get part. Go in peace it within your search function. Great. Now let's declare this your own as a base, you're out. Now let's explore the Spotify a p I for a few moments. As you can see, they have query parameters. A B ice will typically have parameters for each of their endpoints to allow us to specify the type of information that we want. If you've ever noticed links that you use, sometimes have keys or words before unequal sign that maps to a value that's a specify the exact information that the Web application should show on the page and points work in the same manner for a Spotify search feature. We specify our query or the word that we're searching by using the cuchi so we can use Q equals Frank Sinatra, for example. So let's declare a new fetch. Your, I will say is equal to the base you're out plus que equals. Whatever the state of our query is, we'll also want to take advantage of some more parameters, for example, the type and the limit. I also want to have our type limited to only artists, so add a second parameter. We need this and sign it will say type people's artist and one more parameter are limit will be one artist for now. Before we do anything else, that's consul dot log this fetch you are l to see what it looks like. I'll see. Go and navigate back to your application and you actually don't need braces. You guys probably caught that in reference to the variable will save and reload. And there everything's working fine. So let's look up Frank Sinatra Now as I see this, u R l I noticed there's one thing missing before the Q sign. We actually want to have a question work. The question mark initialize is query parameters to come after, so it's very important. I'm gonna save us now. And let's look up Frank Sinatra once more. Here we have our actual fetch you, Earl. Go to new browser attack. Pace it in and there you go. Here's a lot of information about Frank Sinatra. He has external your l's, his number of followers genres that he does some images about him so we can have some profiles. It's this huge Jason object that Spotify allows us to use within our application. Finally, before we move on, we can make this fetch. You are all code more concise by taking advantage of template strings in Essex JavaScript rather than using plus signs or plus equal signs more, more. We can keep this whole thing very nice in one string by wrapping it in back ticks. So let's say instead that we have this whole thing in back ticks, and this character is right next to the one key on the keyboard and all of our variables will be wrapped. Embraces proceeded by a dollar sign and, as you can see are variable is now highlighted in a different color, and now we don't need the plus or the quotation works anymore. So here we have another variable and we can get rid of those unnecessary characters now. So as you can see, the Essex allows us to have more concise strings with template strings. It's really up to you your preference to use whichever one. But just know more and more Temple Strings will start showing up in the job script code that you see in the future. Let's test it all one more time. I'll save this. Go back to the React application and let's search the Beatles. Here's our fetch your L for the Beatles. There we go. We have another Jason object. They're known for British invasion, classic rock, Mercy beet, proto punk, psychedelic rock and rock great. It still works, so let's move on to the next section, where we actually implement some code to grab the data in react 8. Fetching Data with a Url: since we created a working Fetch your help. The grabs data about artists from Spotify Eyes a p I. We simply need to implement the code that grabs that data within our react application. We can take advantage of Essex Java scripts. Fetch function that handles requests in JavaScript Coat, we simply need to specify are Fetch Terrell as the first parameter and then an object as a second parameter concerning a method key and the method that will use and where. Request we mainly deal with post methods and get methods. Post methods will submit data to a server or company's database, depending on what the user provided on a Web page. However, get requests retrieve data over the web, and our Fetcher L is an example of that get method. So let's read out the method with the fetch function. So first will specify the Fed zero. Then our second parameter will be that object. We'll have a key of method and will say get now. This data alone will not prove sufficient enough to grab the fetch method in JavaScript returns up promise and a promise in JavaScript is simply code returned by a function which represents data that may have availability now in the future or never it up. In this case, we'll check for the promise in what is called a callback function in JavaScript with an anonymous arrow function. So here's our call. Back in a then statement, we'll have a response. Variable. And here comes our anonymous arrow function, and for now, that's council dot log this response to see what it looks like. I wonder if this will be enough. Is he saying it reloads? And let's look up the Beatles. Now here we have a response. We have a euro. That is true, a status that is Okay, so we certainly got information and here's our body, but it doesn't look like what we searched earlier with our huge Jason object when we typed in our endpoint. That's because we still need to wrap another promise. We need to return the response. Jason function from this promise variable. Then we'll have another dent statement in this time. That's Consul Log the Jason that is returned as I save. I'm thinking we'll search Whitney. Use it. It's your here. We have an artist object, and there we go. Doesn't this look like the Jason object that we saw before with the followers External, Your l's their I d. Some images. Great. We just implemented fetch in Essex. JavaScript. So now that we grab data in our code, let's move on to building a profile with this information. 9. Building the Artist Profile: with the fetch data from this Jason, we can add the resulting artist tour state for the application because we limited our request to always one artist the artist object within the J Song will always just have one item in its items. Key of the artist's object. So let's change his curly braces so we could start manipulating the Jason in more than one line and then declared the artist as a Jason. The artists, the items zeroth component in that items right. But council don't log the artist for now to see what it looks like. As they say, the application will reload. Let's look a Bruno Mars, and here we have artist. So now we can simply set the state of our artist to artist or use a music shorthand when the key in the value are the same. And then, of course, we'll need to initialize artists to know very important that you have it as no in the initial state. So let's save and the artists and update. Now we want to build a profile for this artist. Let's go ahead at a profile component to the source. Fully new file profile dot gsx. We'll go ahead at the default react cooked, so it's import react and the component from react to prepare ourselves ahead of time. Let's import at that, he says. Let's extend our component on the profile class Extends component Before we do anything else, let's export this profile as default. Now let's go ahead and Orender Return sewn JSX for now with a diff that just says profile. Name another one that says profile followers. The next thing we need to do is replace the default JSX that we had previously for the profile with the actual profile component that we just created. Let's import the proof of from profile and it seems like mine worked right away. Now some of you might get a missing model air. So if that happens to you, go and go back to your terminal to reload the server. No, I'm not getting the air, but I am getting a warning that I'm not using the profile. Let's go ahead and use it. And now and the next thing I'm going to do it. Just argue to the profile hasn props artist props of the state of the artist cool, so as that saves the warning goes away, I'm gonna profile name profile followers, which is what we specified here and in our render method. Let's go ahead and Orender this stop crops so we can see if the actual artist is there when we submit before. All right, so here we have in our props, artist is no. But as soon as I look at Bruno Mars completely, we see that the artist is not know we have a complete object with our artists. Information. Great. So for now I'm to declare an artist object. I'm going to say its name is blank and has a followers count of a total that is Blake. And then, if this props artist is ever not know, we're gonna go ahead and change of the artist to the stock props up artist. So essentially, what's happening here? Artist is usually no in propped, but as soon as Render sees that ours is not no, in other words, that it has data in props. We're going to change his initial artist to that props artist and now we can change this to the default artists Don't name in this one to the default artist up followers took Let's save. Let's take out this part right here. No, we'll search Bruno Mars and then as soon as it's not know, we see Bruno Mars show up as a name and then his number of followers seems like it's around 5,300,000. So no big deal. I probably have to, but give me a couple of months and reach the same number. So great, we have some basic info down, so let's continue expanding upon this profile in the next portion and make it look good. 10. Styling New Components with CSS: let's expand upon the profile component. We want to include a profile image. Of course. Let's block the name, as was a follow account, and then we'll also add a list of their genres. Before we do so, however, we can shorten the above. If statement with Turner expression. Let's simply check. The artist has not known. If it isn't, we'll send it to this. Stop props the artist. Otherwise we'll have it as earnest itself. We can shorten it even further by taking out this whole object replacing it with the artist over here. But I feel like that one line would be way too long, and it actually looks simpler with these two lines over here. Now we'll handle having a profile image. So once again, let's look up user or an artist. Bruno Mars. We could see one of their profile images by going to images in the first object, and that you were. We want to always follow the pattern that they provide for you in the Jason object. So that way it's simpler because that's a pattern that we're using. So images isn't array and then hats, objects, so initialize an empty object here and then we have a Europe which is now anti. So now we can take advantage of that by having an image over here with a regular image. HTML or just extract images and JSX always have an alternate in case that is, no provided image for alternate will be profile. We're gonna give it a class name so that we can give its own styling later of profile image . And then our source will be artist dot images and the zero object and it's you are. So it's safe. Let's look up Bruno Mars again and that there's a giant image of Bruno Mars. So obviously, we still need to add some styling to this. However, let's move on to creating the genre's component. Now the genre's acts as all right. It's a list, so someone will have to map over the Jonah's array to so easy genre item within it. So, genres, as you can see, he's in a wreck. Let's declare an empty array within our initial object here, and then we'll have to map over the genre's within that function. So luckily, JavaScript ships of the matte function for a raise that allows us to map over it for now will simply map over each genre with an anonymous era function. They will wrap the genre within a span, just extract to see what it looks like. Donors is not defined. That's because we want artist jumps genres. So it's like someone else. The deals. There's a giant picture of them again, and the reason is not showing up right now is that we forgot to even return the J sex. It's just like the render method needs to return the J sex. The map function also needs to return the JSX as cued by this air right here, expected to return a value in this function. So as you save, let's try the Beatles again. Awesome. Here you can see all of their genres not need looking yet. And here we have a warning. Each child, in a rarity aerator, should have a unique key property, so they're expecting each key or each span tag to have a certain property. However, we can't necessarily know that all the genres air unique so you can't have the genre as just genre, however, but luckily, even that function comes with the section optional argument of the index and we could name this anything we want to be named Index Key or a we'll just call it K for short. Then we'll have the key at its kick. We'll save it reloads. Let's look up the Beatles once more and there we go. That warning goes away now. We obviously want some spacing in between here, and we probably want some commas to. However, we don't want a comma to appear at the end of the list, so we can't just do a space in a common here. In order to fix it, we're going to need to use paternity expression to check if the genre is not the last item within the array. Because if it isn't, we're gonna add a comma. However, if it is, we won't add a couple. We'll just add a space so it's a genre equals We'll check if the genre is not the last one in the list. So find the last index value. We're finding the last index value by simply looking at the length minus one, which will always be the last index value. So it's not the last next value well, at a space with the genre. Here comes our template shrink had it comin. Otherwise, we'll simply have and statement for our last one in the genre itself. And let's see what that looks like. So genres is not defined. Once again, we want artist dot genres an artist. Dutch honors here. So let's look up the Beatles and the genre's air actually looking pretty nice. So let's add some styling to this whole thing. Let's go ahead and wrap all this text information within a separate tive. It will name Miss Tive Profile info. Let's give each of these class names as well, so this one will be profound name. This one will be profile followers, and this one will be profile genres pro file. And now we can start tackling the CSS. Let's add a new section for profile and I press command Slash to do that. Automatic commenting our profile image. First thing we're gonna do is add a display of flex for our selling. We're gonna take advantage of flex. It allows us to assign portions of the screen to certain elements so that they can expand in relation to each other based on their flex numbers and concern of different device sizes and shapes. It also allows for very simple alignment in terms of axes controlled by the just by content , property and align items property respectively. So it's really easy to center things. So let's see how flex works when we change your profile. So we have a display flex just by content, everything to the center. A profile image, of course, is way too big. But we can fix that by assigning a within the height, and we'll make it 150 pixels for now. Also like giving things a border to make him stand out. This is a personal preference of mine, but you can go ahead and use a different one will make it white or a text. A decimal equivalent, which is F f f and the border radius, since I want to be a circle will be exactly half of the within the height. So sending five pixels and then we'll make its object fit to cover. So that way it looks nice as an image. So I, the Beatles and look that it's already starting to look really nice. We just need to blow up this text over here. Let's change up the profile name will make its font size bigger and increased to 26 pixels . Also, the profile followers. I wanted to have a decent phone size not as big as the name, but still significant. Let's say 18 pixels as well as the genres will have a size of 18 pixels to make sure I spell things right and profile genres. There we go. That's 40 looking a lot better. The last thing I want to do is basically center. All this profile info a little better, so we're gonna go to the profile info tag. So as I'm opening the profile, Info will simply give it a margin left of 10 pixels because we're gonna text, align everything to the left and we don't want it touching the profile, and that's looking nice. Now. The next thing you want to do is we want to make sure this has followers. Just looks like a random number for now. So was saying followers over here. Once again, let's look up the Beatles and cool. We have a very good looking profile for now. Let's move on 11. Expanding the Fetch Requst: Since we have a working profile component, let's extend this artist information by grabbing a list of their most popular tracks and making them playable. Before we do that, however, we can change our code a little bit for some user interface fixes and just to make it more readable. First off, let's reform at some of our code in profile Dajae sex in order to make it cleaner. I'm going to invent this because it looks pretty big online, as always, my urinary expression. I'm gonna put this question mark aligned with the equality Check, and that's looking better already. Let's at his face after the followers before the followers and cool now with an app dot jsx . I don't want to see this template ing before he even searched for anything so the temporally will be done in the profile and the gallery. Let's place that within here, and then we won't show it until the State of the artist is not. No, so it's not know we'll show the profile. If it is No, we'll show it did. That has nothing with it. Let's save. Here's the thing about subsequent dibs we need to wrap to Dave's within each other or within another death. So that way we don't have react complaining. And as we save, everything's fine. So now, as I search for an artist such as Bruno Mars, the template ing doesn't show up until the artist is valid. Cool. Now we can move on to fetching an artist. Top tracks. Let's go back to profile and also within another browser or tab. Navigate back to the Spotify a p I. This time we'll want the information from the Spotify in the artist section. You want to fund in point that says, getting artist top tracks. So what a P I getting artist Top treks. As you can see, the endpoint works pretty simply, just like before. We need to use an http get requests in order to grab the Jason formatted data for an artist . Top tracks within our your l. We simply specify the I D of artists we would like to get, so it's going to copy this endpoint over here. Go to your search function. Pace it as the album you were. I'm going to call it Alba Mural Constant. It was. Take out the end over here, so it just goes up to the artist section now. Luckily, when we declare artists over here, it already has an I. D property so we can take advantage of that to search for their top tracks. So, no, we can modify this bet you were l to fetch some albums. We'll have a tip lecturing again. Our 1st 1 will be album Euro slash then the artist that I d. Then we want to finish your strength will say top tracks. And then finally, the necessary last part is the country code. And for now, we can just use the U. S. And the reason it's required is because Spotify and makes it required. So if you're outside of the us or you want to get requests from a different country, go ahead and click this link over here. It links to a Wikipedia article. Where has all the relevant country codes? Now? We simply need to use the search function if all the same pattern as before, from Promise a promise to return the Jason that we need. So we'll fetch on the fetch zero. Our method, of course, is yet and then we'll return a response, and we're basically we're declaring the variable. And then we'll return the Jason we want. Hopefully, this will be the artists, artists, top tracks and Jason. So let's check if this actually works. Let's go back to react application in our fifth year. L remember we declared as a constant Well, since we re declaring it, we should declare a let. So that way it's modifiable. It's reload. Let's look up Bruno Mars. And as we can see with this fetch zero. I added an extra slash here, so let's take out this slash You guys probably caught that. Let's try one more time. Bruno Mars and great. Looks like we got some top tracks and here they all are. They have a preview out and I d. The best part is, has an album object where we can find some playable files. So great now that we have tracks logging, let's prepare ourselves and said those track to state so let tracks Rather, Const. Tracks equals Jason Tracks and we'll sepa state of tracks. Two tracks. Remember, we can use some theistic shorthand. It was at the safe two tracks, of course. He wants you initialize tracks to an anti rape and then Finally, here's another year six trick when the variable name and the key that we want to access within a function or object is exactly the same. We can just se here that tracks is equal to Jason Now. This becomes especially useful when you're declaring multiple variables at one time when you're trying to grab multiple keys of an object. So, for example, if I had tracks and albums artist here and Jason had each of those keys, we would declare all three of these variables at once. We're only getting one, though, so let's just say tracks save. Look up the Beatles for a change. So since everything's working, we can move on to creating a gallery for all these tracks and, of course, eventually making them playable. 12. Building a Gallery: we have tracks Interstate for the application. Therefore, we can pass them down to a new component that handles rendering them. We'll call this component our gallery component. Let's create a new gallery dot JSX file within our source folder gallery dot jsx. Now let's have the default react component code and follow the same pattern that we have our components before we'll import react and the component from react, we'll import at dot CSS. We'll declare the gallery class and extend component. Of course, we'll export the gallery by default as your default component. Now it's render onto the screen and return whatever JSX we need for No, let's do a gallery did and then also council dot log the gallery props. Cool. Let's include the gallery now after profile Import gallery from and make sure you do it in the string from Gallery. Let's replace that did no with our actual gallery and say that we want the tracks to be passed as props through this application state. Here we go. Let's look up an artist. How about Billie Joe? So gallery props. We see some tracks and there we go, and also I'm noticing some styling. Sometimes get squished, so let's fix that right now. An easy fix is to go to the profile info. Give it a flex, explain. So that way it always has certain sizing. There we go. But now this makes it in for a little sq. We need to change the flex direction now to Collender, because it's row by default, which aligns the other way. Finally, we consider things a little better with the justify content of center. Nice. Let's head back to the galley component now, since we have props longing for us in order to render all these props in array, we had to take advantage of the JavaScript map function again. First off, let's set a constant of tracks equal to this up. Props that tracks Remember the Essex trick we learned from last time. We can shorten this by just doing tracks within some braces, it setting it to this stop props. This will be useful if we had other keys and variables that we wanted to access as props and declare in one line. Now we can map over the tracks and we can do so one track at a time. We'll make sure to have our index as K or ready, we use that anonymous arrow functions in tax. For now, let's return overall, Dave with a key. OK, it's class. Name shall be Trek. Then we'll have an image inside. Now, with a self in closing tag, its source will be track image. It will also give it a class name of track dash image. An alternate of track. However, we need to declare this track image. Now. I will say that the cost frank image is equal to track dot album The images First element not your own. Now, before we save this, remember, we need to return all of this JSX within the map function, even though we're already returning it here but in the render function, because this declares an entirely new skill moving on. We also want the name property. Let's declare a P tag for paragraph. The class name will be Trek text and then we'll access the track name. All right, let's test it up, have a Bruno Mars again, and look at all these tracks so huge we could definitely style these a little better. So it's head toe app dot CSS for some styling changes. Now we're in the galley components I'm gonna do command slash to comment or track. He's gonna have a bit of styling. First off were to change the with 2 220 pixels as well as a height. Did you under 20 pixels? We'll give it a border of three pixel, solid and white, which is F F F and Hexi decimal. We'll give it a border radius just around things out. A little bit of three pixels. We'll give it some padding of 10 pixels. Let's align all his text left. Here's a neat feature later on a one to make it clickable. So at a cursor component of Pointer now our track image, it's still gonna be so large. I only wanted to be as big as the track. So will inherit the same width and height. Make both of them 220 pixels wide and 2020 pixels. Tone. This one will have the same border. The three picks solid. Wait, it's border radius will be three pixels. Course will make it object. Picked to cover, so looks nice and his position will be absolute before we move on. Let's make all these tracks relative so they align side to side, so looks nice. Our trek needs to have a display of in line block that's looking pretty good, and things are a little off center hook. Well, instead of having a patting on the inside, let's actually give it a margin on the outside. So things air centered and spaced out. Also, I'm not sure if they need a border radius on the outside for the track, actually, let alone the border, and that's actually looking perfect. Cool. I believe it's responsive as well, so let's go ahead and resize. And there you go. You can see all their tracks. Nice. Let's find an artist with some darker album covers such as Michael Jackson. There, that white background is looking really good. Now let's take care of the track text. We want to see the name of it. Of course, short track text. We'll have a background color of black the color of white, and what we're gonna do is we're going to show the text over the image with a black rectangle behind it. So that way it stands up that back row needs 75% capacity with of 220 pixels and what takes a line it to the center. And so it shows up over the relative tracks will make its position absolute. Let's see if this is close enough Now it's looking pretty good. It's a little too Why, though I don't want it to cover the whole border. So if you make it 214 it's certainly smaller, but we need to give it a margin left. So that way it's actually centered of three pixels. Sweet and then I want this be not on the top on the bottom. So when I said it's bottom alignment to zero Great, that's looking better. Mr Bruno Mars again just to see what his looks like. Very cool. All right, that was a lot of CSS. One more thing when we just give us some padding so we can see that directing a little better. All right, that's looking pretty nice. Let's move on to actually making these tracks playable 13. Playing Audio with JavaScript: Now that we have all of our tracks rendering onto the screen, let's actually make them playable. First off, let's remove this council dot log for the gallery. Plucked instead. Let's console log each track in. Check its contents so council dot log track track. Let's save search for a new artist or the same one. We've been searching for brutal boys, and, as you can see here, each track has a preview out. This is actually a sound file that we can preview by pacing the link. As you can see, each track comes with its own South. Now we can take advantage of JavaScript audio object toe, actually play the sound bite from our application. All we need to do is declare a new audio object, it argued. The preview are out as the first argument. Let's create a new helper method within our gallery class. We'll call this plague audio, and we'll have one argument, which is the preview your else. Let's declare a new audio object Capital audio, he argued. The preview u R L as the construct. Then we'll simply call audio dot play. Oh, let's attach this method two. Whenever the user clicks one of the tracks. Remember, we need to use an anonymous era function. We call this not play audio onto the tracks. Preview. You were out. Let's see if this works as a saving reload. It's like a Bruno one more time. Let's check for Sochi on the floor. Awesome! We have sound going, but only stopped because I muted my system. So let's think about pausing and replaying in the next video. 14. Pausing a Track: Now that we have playable tracks, we should be able to pas um, in case a user would like to play a different track or simply stop the current track from admitting sound. First off, let's implement the switching of playing your else so we'll always have one active playing your L in state as playing your health. So let's add a constructor here. Since we now need state within our gallery, Let's clear our state object and we'll say that are playing your L right now is an empty string. Great. Now we need to actually recognize if we're playing something. When we press on a truck will keep track as well of the audio object currently in state. So it's a audio right now is no. Also, we'll need to check if something is actually playing. So have a playing fly. And, of course, at the beginning, nothing is playing, so playing is false. First off, we'll check if there's currently nothing playing, because if there's nothing playing, first thing we want to do is play the on you. Let's remove that first audio play, then we want to update some state. We'll say that Well, now we're actually doing something so the plane fly will be sent to truth. Well, said the current playing You're out to the previous year. L in argument, and then we'll set the current audio object to this audio object. Remember, I'm using Essex shorthand. Otherwise, we can assume the audio is already playing. There are two scenarios to consider. We want to stop the same audio from playing or we want to switch the audio. So if the preview or L is equal to the state of the plane, your l, we can assume that we should pause the audio. The audio is stored under this thought. State that audio. So let's use a pas function on this start. Stayed the audio and then well, said the state playing It's a false Otherwise, In this case, we're simply stopping the current audio and then playing the next one. So we'll stop the current audio by pausing it, play the next one, and then we'll update the state as well. So we're changing our playing Your Alatorre preview. Your l playing is now true, of course, and then again, we're sending our audio object. Let's switch order this to match the above would save. We added some new logic. So let's go and test it up. Let's see if it still plays and it does. Can we pause it? And there we go. It's pausing. Here's another one. So what if we switch right away? Great. It seems like everything is working. So now that we have full pausing and switching functionality, let's just add some animations to the application and some styling to tie the whole thing together. 15. Animated Styling: never we had pausing, playing and stopping of audio. It would feel nice for the user to have more feedback on the exact functionality of each track as it's going up process icon hovering over each track without a really nice feature , too, so that each track is playable. And why not thrown in animation to make the application all the more dynamic? Let's do that now. We need to add an extra div within the track. This Dave will be called Track Plane. We'll wrap another DIV in the inside. This one will be called track plate dinner, and then we'll provide a short Unicode icon for now of an has 9654 which essentially looks like a right triangle play button. Great. Nothing will show up yet because we still need to edit the app CSS. Let's just go ahead and tackling the position of the track play will be absolute and have a with of 220 pixels and height of two of the 20 pixels, just like the image and the track. Attractively inner also had an absolute position, and this is controlling the triangle that we're going to see later. We're gonna line everything to the center. So that way it's in the center, are fun. Size will be a little bigger. We don't want a small icon, and they're going to give a back BRAC around color because we have a black circle enclosed our triangle. The border radius of that triangle will be 30 pixels because the width and the height will both be 60 pickles finally make its color white. We'll give it some padding top of 13 pixels, and then we need to give it some margins. So that way it's still centered of 80 pixels in a margin top of 80 pixels. So that should be enough for now in order to get a play button showing on the screen. So text align. We need to specify that it center. You guys probably caught that as I was coding for you. Let's see Bruno Mars And there we go. We have a play button now. We don't always wanted to show up. We probably only wanted to show up whenever we hover over the L. So for now we'll set the capacity to zero. So be high the element. However, when we hover over the Omen, we'll make the opacity. Is there pointing? Let's see what that looks like. So if I hover, there appears. But we can take advantage of a CSS three animation key frames feature in order to add a little faded civil call. A key frames fade in future. It is very simple. All we did you do is declare a from object looking syntax key and have a go from zero opacity to capacity is your pointing. And now we can specify. The animation name for this hover component is faded as you declared over here. But then we need to give this animation duration or amount of time that it shipped here on the screen. We'll say half a second and check it out here. We haven't fading on the screen. There's one more thing. If I play track, okay, we shouldn't be able to see the play button anymore. We should see a pause button so we can add that functionality. Now. Pretty simply, we'll have a Turner expression over here and simply check if the state of the plane you were help. It's Eagle to track preview Europe. If it is, then we can assume that we need to pause the but. And a pause button implicitly looked like two vertical bars, which is the character right next to the brackets. Otherwise, we'll have our normal playbook, which end hash. 9654 And one more thing. This text alone will not work. We need to wrap these within span tags, so spend we trade will forget that extra closing time would save and check it one more time as a JSX reloads. So check it out. We'll play now. It's possible we'll play locked out of heaven. We gotta posit and great. That's looking really nice. So with that, we had finished building music Master. Excellent job, and we have a pretty fun application on her hands. I have to say we learned all about fetch requests into react and how to handle data over the Web as well. Some new concepts with Essex coding and CS has three animations in the next sections will combine our React knowledge with the Redux Library in order to improve upon the design of our applications. Also within the next portion will find a summary of this application and the concepts we learned as well as some challenges. If you want to keep extending upon it, awesome job. Let's keep Cody