Fungai Chivaurah

#100DaysOfCode Day 12: Took some time away for a much needed break but i'm back. Today i built an Instagram clone in ReactJS. This was a challenging, but fun build!😁 Still working on some additional features.

4. Remove items from the basket This action is also triggered by a dispatch and will look for a match between the item selected for removal and all items in the basket array. When a match is found, that item is then removed from the basket array using the splice method.

3. Calculate the total value of the basket As we add items to our basket, we need to keep track of the value of all items added or removed. To do that, let's define a function that will iterate through the basket array & keep track of the basket's value with the reduce method.

2. Add products to your basket Once the user has logged in, they can add products to their basket by clicking a button which calls "addToBasket". That function will send the product into the data layer and add it to our current basket.

1. Login Page: So the logic for the logic page will call signIn to login a user & register to create a new user. Once successful, both functions will take the user to the home page using the navigate function from react-router-dom.

#100DaysOfCode Day 11: I spent the last couple of days building an Amazon clone in React. Here's a quick 4 step overview of how it works. 🧵

Step 7: Add functionality to the UI. We created an object of type SpotifyWebApi() in step 4 so we will retrieve that object from the data layer and use it to call functions that allow us to play, pause, skip and skip previous songs, all from spotify itself. Cool, right?

Step 5: Use the access token to make API calls. Now that we have the access token in local state, let's make calls to the Spotify API and retrieve all the data we'll need inside of our application such as, the current user, their playlists, their discover weekly..etc

Step 4: Store the access token. Once authorisation is granted, the Spotify server issues an access token, which is used to make API calls on behalf of the user. To avoid prop drilling, let's use React Context API to store the token in the data layer instead.

Step 3: Build the Login page. The UI for this is simply a logo and a login button which points to the Spotify authentication endpoint described above. From there, the user consents to the clone using their data and can log in using their real Spotify account.

Step 2: Write logic for the login Url 1. authEndpoint = authenticate the user in spotify. 2. redirectUri = bring the user back to our app after successful login. 3. clientID = spotify identifier. 3. scopes = the functionality that we plan on pulling from the spotify API.