Create Prototypes using REAL DATA in Play — No Code, No AI

Hey everyone, hope you're all doing well. Welcome back to another video on the channel. This video is going to be a super interesting one because breakdown of one of my most recent advanced prototype that I recently shared on Instagram which was made completely from scratch in play without any coding without any AI using real data from the pokey API that's there publicly available on the internet. Now, even though I use the word API, this video is targeted towards designers. So, if you are a junior designer, mid-level or a senior designer, I'm going to tell you why watching this video is super important. I also have a question to ask you. So, before I get into all of that, let me show you how the prototype actually looks like and then we're going to get into this. Right. So, as you can see, this is the prototype and this is the list of all the Pokémon that's there. All of these are randomly just rotated a little bit to give a little bit of a nice dynamic effect. And if you tap on the logo, it does a little spin. You can also add sound effects in the prototype. Super fun. And all of this is not hard-coded. coming from the Poke API that I mentioned about. And you can also search for a Pokémon. So I can tap on that and then I can type something. So let's say I type in uh L A T. All right. And that should bring in some Pokémon over here. So this is Latios and Latas. And I'm just going to click on one of that. And when I click on that, you see that it brings up the screen with all the information over here, right? So, weight, height, base, experience, all of this, again, not hardcoded. All of this is being fetched based on what Pokemon it is. I can click on it and it'll change it to the shiny version. So, if you are into Pokemon, you're going to understand what a shiny Pokémon is. And so, you can click on that and we've got different types. So, this is a legendary Pokémon, psychic dragon. And if I click on it, it does a nice rotation with a sound effect. The region, the gender rate, um, and you can see the various statistics of the particular Pokémon with this nice spill effect, the habitat, and also the evolutions if there is. Right. So, I can go back and close this and we can try something else if we want. So, uh, let's try something like blazen. All right. So, you can see that here I have a blazakin. So I can click on that and uh it's going to show me all the details of that, right? So all right, I mean pretty much the same and you can see all that this also sort of animates in which is also super cool and super nice. The information regarding breeding, the habitat again and also all the evolutions it comes in and if there is a mega evolution, right? And then I can come here and press on the X to close it. Um I can try something else. Let's say we choose Blastoise. All right. And that brings us all the information regarding Blastoise. And then I have this P and N which is the previous and next Pokémon. So I can tap on N and then it's going to go ahead and load in the next set of information which is Caterpie, right? And all of this is again super dynamic. None of this is hardcoded. All of this information is being fetched and then everything is being rendered. And as you can see as I come in, all of these pills also slowly nicely animate in which is super nice to be very honest and looks super super fresh. All right, we can try one more Pokémon. Uh let's say we try in Eevee. All right, so this is also another Pokémon. This one is super interesting because if I scroll down over here, you can see that Eevee has multiple first level evolutions. So, I can actually swipe uh and as you can see over here, I can swipe between each of these Pokémon, which is super super nice. All right. And we can try one more which has a different one. So, if I come back again, if I type in Wormple, that has a different evolution set. So if I come down over here, you can see that this can evolve into silicone or cascun and then you have multiple breakdowns of the third evolution as well. Right? So I'm going to take you through behind the scenes of how this is built. I'm going to tell you why watching this video is super important. The industry is moving towards a phase where the industry is now expecting designers not just to be able to design screens, think and solve crazy problems, but also have the mindset of a builder, a creator, somebody who can actually take their vision and bring it to reality. Now, I'm not saying that you need to know how to code. be able to publish an app to the app store or build a SAS product. That's too far away. But right now, within the next few years, you need to know how to think like a builder and try a lot of these tools and know what it feels to be in the shoes of somebody who actually takes an idea and brings it to life. And I'm going to show you how I exactly did that in this video because I too am not a builder. I do not have any coding skills. All of this is new to me. So, how did I actually learn and what are the steps that I took to go from one step to another? That is what I'm going to show you in this video and hopefully motivate and encourage all of you to follow the same path. Now, one question that I have before we get into the video is if there is any concept that you like, anything that you want me to focus on or make a tutorial or on any idea that you have, let me know in the comment sections down below because I really want to teach you how I did all of this in the video that I'm about to show you. The thing is I can't make this entire series on making a prototype like

completely from scratch because it is too complicated. However, I can take small concepts and I can break that down and create smaller examples and demos and, you know, prototypes for you. So, if you have anything that you want me to make a video on, let me know in the comment sections down below. Happy to do it. So, without any further ado, let's get started. All right. So, this is my Figma file and as you can see, it is super duper messy because I didn't really have patience to keep it very structured and I was just trying to make sure that I get a couple of designs so that I can start building them in play. And just like everybody else, I also struggled quite a lot to go ahead and figure out what is the best way to start a process of designing things. And the first thing that I basically did was just I just went ahead and collected a couple of screenshots from some of the games that I play just to see the visual direction of most of these Pokémon apps. Right. So I've got couple of games over here. So this is the Pokemon uh trading card game, the Pokemon TCG. And uh I was just trying to take screenshots and see if there's something that I like, some elements that I can pick up from here and there. I sort of didn't like anything to be very honest because it's got this weird skiorphic design which obviously doesn't look great and doesn't look polished at all. Uh then you have Pokémon Sleep which is actually a very well polished and a very nice game. Uh it has super interesting interactions and animations. Um it's a little slow to be very honest the app but I think it's got a couple of nice visual elements. So you've got these nice patterns at the back. You've got uh these illustrations which look pretty cute. Even the actual elements that you see over here, or actually not elements, the actual images of the Pokémon, they look pretty good to be very honest. You know, they look pretty nice. There's quite a lot of detail in it. You can see some sort of shadows. So, I think there's a lot of effort that's gone into making this app. Um, and I was just trying to take screenshots to see if there's something that I really like. Right. And my favorite game is Pokémonite, which is a massive game. Uh, it's pretty interesting. And here I there were a lot of screenshots and a lot of visual elements. And that's pretty much how I figured out the logo of the app would be. I sort of try to replicate this um and use the slant. I something to give it a little bit more of a gamey vibe. And I like some of the um buttons over here. So I tried to recreate some of these buttons over here to see how this would look. I like these card elements. So there were a couple of things that I liked and I was just trying to take screenshots and see if there's something that I can, you know, steal from this, right? Because of course this is not a real app. This is just for me to play around, but of course I still want to make it look good. And there's one more app which is not which has nothing to do with Pokemon which is called as um Mo which is Supercell's latest game and Supercell is the game that's behind Clash of Clans and Clash Royale and Brawl Stars and stuff like that right so I like this card approach and I'm going to talk about how I integrated this into the designs a little bit later on but this is something that I looked at very much towards the end. This was not the screenshot that I had much before. All right. So once I had that, I started to go ahead and make some very highlevel designs, right? And I didn't know whether they were going to be cards, how the information is going to be laid out. I was just trying something random that came to my mind. I had no idea what the idea was. I did feel like I wanted to have a concept of cards and tiles, but I wasn't super sure how it's going to be. I tried some stuff over here. Didn't really like of this because of course this looks terrible to be very honest. Not super fun. And then after some time, I just started to polish things. I decided to finalize on this card structure and the idea was like this would be like an infinite scroll where I could swipe and I could select the particular Pokemon and then tapping on this card would you know give me more details of that right I also tried an approach like this which was sort of similar to this one as you can see over here um I sort of didn't really like it I felt like there was too much going on I wanted something simple and straightforward right I was trying different iterations over here visually on how to place the white area where to place the so I think a couple of just visual iterations and I was coming up with an concept over here where, you know, we would have a stack of Pokémon, you know, uh probably if I can show you a little bit later. I would have a stack of Pokémon over here and you can scroll and then basically swipe and then you can tap on a particular Pokemon. Um and then this is probably like the selected state. So I can swipe over here, you can see the next Pokemon and then when I click on this, you know, everything moves over to the top, right? Um and then all the details would come over here. That was pretty much the idea. I was testing it with a couple of other colors and other Pokémons and you know the size of the text as well that also matters like for example over here the text is towards is right align here it is not really right aligned it's sort of center align so I had to figure out what would be the logic for that right and then I was just trying to come up with another approach where uh you I put this inside like a capsule and then over here as I swipe up this would show the next set of content or the next Pokémon I wasn't sure but I like this approach where everything is sort of stored put in like a capsule and this is where I had put in basically all the other Pokémons that was there in the list and I came up with this code names for each of these Pokémons because it would pretty nice. I've not seen any other company or any other app do this uh well. So I thought this was a very interesting idea where each of the Pokémons has a particular character as you can see over here and yeah I was just trying a couple of items over here and then I started to go ahead and figure out okay let's put down some content and put down some information. All right. Now, what I essentially used is the Pokemon API, which I will talk

about a little bit later, but essentially I went to chat GPD. I put in the JSON. And again, I'm going to come back to all of that. This is essentially how the content looks like. I'm going to explain all of this a little bit later on, but I put this into ChatgPD and sort of asked it to categorize some information over here. And then I was just making a list of all the data points that we have available and what is it that we can actually put into the app, right? because this is something that we're actually going to fetch from the public internet and get that into our app. It's just not like a random mockup. It is actual code, right? So that was the idea and some of the basic information is which region it belongs to. So if you are not a Pokémon fan, you have no idea what this is. This is essentially a region for a particular Pokemon. There are multiple regions, right? And I actually went to Chat GPT to get some of these badges for me. So as you can see, Kanto, Johto, Hoen, Sino, there's a lot of other regions as well. So uh depending on which Pokemon you choose it would show the respective region. So I thought to come up with this sort of a structure where this would be like a badge like a 3D badge and then I was just figuring out the layouts how do I put the information over here. Um obviously these are pretty much highle biodata information of the Pokemon like which type it is and a Pokemon can have multiple types. So I was just trying to figure out the layout over here. Move this around left around right around. As you can see I'm just trying to play around. I don't know what works what doesn't work. I'm just trying my level best to see what works, right? And as you can see, there's a lot of iterations just to figure out a simple standard layout, right? And I sort of finalized on something like this where I'm putting everything over here. But as you can see, there's too many circles, too many items. It's quite noisy. It's not very polished and very neat, right? And I think that's how design process is. No matter how experienced you are, your first iterations are going to be pretty terrible, right? So that's basically how it was. And I was trying out with a couple of other Pokémon as well. As you can see, Rayquaza is a legendary Pokemon. Celaby is a mythical Pokemon which is also sort of a legendary Pokemon but I was just trying to see all the various types and if see this is a scalable solution right and I actually did go to chat GPT to get all the other icons for that as well and I was trying to make this big small trying out every single thing we also have like for example every Pokemon can fall into four categories which is an ordinary Pokemon baby Pokemon legendary Pokemon and a mythical Pokemon right this is a legendary this is a mythical Pokemon there's only four categories right so I was trying stuff like this and seeing if you know this actually looked good but somehow I didn't really feel it and I had to take a few days to actually take a break from this and you know come back with a fresh mind right and then what I did as you can see I then decided okay let me start all over again let's try with a different approach with a clear mind and I was thinking okay let's focus on the interaction first right what would how would this view move into a full screen details view how do I see all that information right so I basically was coming up with a system where you can tap and then this thing expands into full screen. Um, and then I was trying to figure out what is the best way to organize things. I didn't really like that I was explaining to the user how to use the app. So, I sort of went, you know, went away from that approach. All right. And I also obviously wanted the ability to search for a Pokémon. So, how would you search? Where would the button be? I didn't want something super traditional and straightforward. I wanted something very unique that apps typically don't do. I really wanted to break away from common patterns like having a search icon. That would be too obvious. I wanted to try something very new and different, right? But anyway, I sort of failed at that. And what happened was I actually started to build this in play and I realized that play doesn't actually allow you to have stroke. So this system would completely break because if I go ahead and let's say I remove the stroke, this looks terrible, right? So that stroke was adding so much importance and because play doesn't let you add strokes, I now had to come up with a completely new design to figure this out. So that's when I started exploring something like this, which is also similar to the latest design that you all of you saw. And to give a little bit of emphasis and if you see a lot of the Pokemon games and Pokemon apps, every time there's a Pokemon that's shown, it's sort of shown in this multi-layer structure, right? They've got a couple of background, background elements, the Pokemon name. It's not very simple. There's a couple of layers of structure. So I was trying to come up with something like that. And of course, these colors could be dynamic depending on the color. As you can see, every Pokemon has a color. And so that would depict what is shown over here. All right. And then I was trying to figure out how do I lay out all of these things. I was trying to add dividers, seeing what is the best way to do this. And I realized that this is actually not going to work. This is not sort of pretty scalable because right now I'm on a big device, but what if it's a smaller device? How is that going to look? All of this is going to be squished. And you can see the alignment is probably weird. And it would just wasn't really working out. And as you can see, I'm really struggling to figure out even just basic design and structure of how this should be, right? This is almost I don't know the 30th frame or something like that, right? And this is typically how a design process is and it's super difficult. It's not just junior designers who face this problem. Everybody faces this problem, right? And then I figured out the best way to bring in structure is to put them into containers. And this makes it a little bit easier to be very honest, right? So I came up with this structure where I put everything into cards like that. And I like the fact that these were like

elevated cards and they look like 3D cards and not just super flat design. And how do I build a scalable solution over here? So because I wanted to put the type of Pokemon, the region and also the various types. Like for example, some Pokémon have only one type, some have two types. So how would that work? Because at the end of the day, I need to build this logic in play, right? So I need to say that if there is a Pokémon which has one type, then we just hide one of this or else no, we show both. So how is this actually going to work in code? I need to I had to think like an engineer as well. It's super important to have that mindset. And then I tried to have colors over here to add a little bit more vibrancy but I think it was just clashing with everything and was not really working out. I was also trying to see if you know the color system would scale. So I added a lot of hex codes and trying to see which color looks well in what cases and stuff like that. And I sort of started liking this approach and then I decided to start moving on and making the other set of screens. And then we have the statistics which is also a very important part of the Pokémon. And I was trying out various ways of presenting this information. I sort of didn't like this. It was okay for a first draft, but I felt it was too easy and pretty straightforward, right? And uh I tried like just without any graphs, just something like this. And then I tried with progress bars. This didn't really look great at all. And I came up with this approach, which is essentially these pills. And these pills are actually items in games and in the TV shows, which are pills that are actually made to improve the statistics of these things like for example, HP, attack, defense, special attack, speed, and special defense. These spills are actually used in the games to actually improve the performance of Pokemon. So I thought this would be a great concept to use these tablets as spills in order to go ahead and you know use that as a benchmark. So you could visually see it in a graph instead of something like this. You could see it like this progress bar sort of which is quite unique and very different than what we see in regular apps right and I actually used to build most of these colors and as you can see some of them didn't really do a good job. You had this background image some of them you know looked too you know 3Dish. they didn't look realistic and I sort of finalized on this approach and I was just trying to make the different versions so that I could export it. So it was actually a lot of effort and it took a significant amount of time to sort of make this work. There's also a bit of math I was doing over here trying to understand because not just are these stats for example they al there's also a minimum and a maximum limit that a Pokemon can go to depending on the level. So I was trying to figure out the math as well which was too complicated. So I didn't really go with this approach. I just went with the basic statistics over here. And the rest of the things were pretty straightforward and easy. Like Pokemons can have abilities. They could have genders also. Uh and a lot of Pokemons can hatch from eggs and you can mate Pokemon to create eggs and that would give you like a combination of different characteristics and effects. So every Pokemon can have one or multiple eggs. Then there's habitat information. There's items that Pokémon can hold. When you capture it, it would be holding this items. And evolutions is pretty much very important. And this is where things got super duper complicated because I actually didn't think about this very well. And once I started building the evolutions is where things got so complicated that it actually took me 3 to 4 days just to figure this out. And let me explain what that means. So if you see over here, here is just like the evolution chain of a particular Pokémon. And there are multiple evolution chains that are possible. And I had to figure out understand first of all how is the data structured so that depending on how the data is structured I can figure out how to design the interface. So let me give you a quick example over here. So some Pokémons do not have any evolution. For example, Lapras it has no evolution. So it cannot evolve. Some Pokémon over here have a straightforward tree. So I have Bulbasaur, Ivasaur, Venusaur which is also like Charmander, Charmeleon, Charizard. Very linear approach. And then you have Pokemons like Eevee where Eevee could evolve into Jolon, into Vaporeon, into Espeon, into Umbreon, into a lot of other types of Pokémon. Right? So, it's one Pokémon where the first evolution level itself has multiple branches. But over here, Bulbasaur can only evolve into Ivosaur and Venusaur. Right? And here we've got another one which is a little bit more complicated which is Oddish can evolve into gloom and gloom can evolve into Vume or Blossom. Right? Of course this can this is going to sound Greek and Latin for non-Pokémon fans but as you can see there's a different structure and in order for you to actually build something you need to understand stuff like this at a deeper level. Not just being able to design screens you need to really be able to understand how to think from a systems design standpoint. That's super important, right? And so depending on the structure, I came up with this sort of a matrix and with examples of how this would actually be laid out, right? And this actually wasn't the final design. I actually figured out a different solution because this was super complicated. And so I used this basic structure to figure out how the logic would fit in and make all of this appear. When do we have an extra card? carousels inside? For example, over here we have two Pokémon. different cards. When would each of these happen? Right? I had to think about all of the structure and I came up with basically

the stream where I was calculating the number of possibilities at each level. So for example here in the first level there could be more than one. Here in the third first level also there is more than one and then there is only one in each of those. Right? So depending on how this data is structured and sort of colorcoded it to make it easier. I actually spent three to four days just trying to figure this out and make this happen in code. Right? And I'm also sharing a couple of examples over here of how uh the eggs look like. Of course, all of these were generated with Chad GPT. It was super fun and I think Chad GBD did a phenomenal job and even the habitat like before initially I had this concept of an island which is like a floating island which is a nice concept to be very honest but then I sort of didn't like that and I thought you know maybe let's just make it a little bit more visual right and I tried to come up with a system like this with this blur effect. sort of didn't go with that and I came up with various types of habitats that are there. So every Pokemon can fall into one habitat. So I basically put all of that and that's also something that I did for the regions as well. Um I don't know. Yeah, they we have all the various regions which is Johto, Kanto, Hoen, Palia, all of the various regions the Pokémons are in. So I have two different sets of images, one for region and one for habitat. Right? So this is typically how the design process look like. And once I had something like this, I then decided to go into play and you know, make all of this together, right? Um, some of it obviously I started doing it beforehand like you know it's not that I finished all of this and went to play. I started doing this things in play and then coming back and iterating and trying to figure things out along the side. It was a very unstructured process to be very honest and I think it was super important that it had to be unstructured because there was no product manager, there was no scope defined, there was no logic, there was no engineering effort scoped out. None of this was done. So I actually had to figure out and do this you know ad hoc and impromptu as needed right so this is typically how self projects are actually built so now let me take you into play and show you how I built this all right so here I'm in play and as you can see the title of this is actually called old and version one because when I built a lot of the logic I realized that I don't like the UI I don't like some of the logic and the way I've built it I want to redo it so I actually went ahead and duplicated the whole thing. And so if I close this, behind I have Pokedex V2, which is obviously the final uh version. And this is where everything is there. Now I'm going to go ahead and play the simulator. Some things may not work in a simulator. I'm just going to check if that's see that's something that's going to work. Um if not, that's totally fine, right? So yep, as you can see, things are loading. And I can click on a Pokemon over here. And there's also sound that comes and it fills in all this information. And we have all the data over here. You can see that even these things also appear. Um and then we have breeding information, the habitat, some information about that. All right. And also the evolutions um as well. So this is basically the final design. I'm going to show you basically how I built this at a very high level and typically showing you an insight behind the scenes of what it takes to build stuff like this, right? And if you and this is really cool information to have because this is going to give you perspective and context and someday this knowledge is going to be useful to you. So basically the way this would work there are events that trigger or happen multiple times. So when I click on this as you can see the initial layout is very random. It just it looks pretty weird right but a lot of the things are hidden and they start appearing as and when events occur right I'm going to explain what that is. So if I go uh to the interaction mode, you can see there's a lot of logic. There is an insane amount of logic that goes into behind building stuff like this, right? And the fun thing in play is that you can also set up logics and if you don't like it or you don't want to try it out, if you have multiple versions, you can actually disable them. And so I sort of like marked them as archive. I can add comments so that I don't touch that. And this is not going to affect the actual logic. So when the page loads, there's a lot of things that we want to do. And this is why splash screens exist because when the splash screen comes on the screen behind the scenes there is so many things that are happening. I need to fetch the data. I need to figure out a lot of information define a lot of things. So let me give you an example. So the first thing that I wanted to do was when the page load is I wanted to animate the logo. So if you see this if I open this up uh let's try this again. You can see that the logo appears and then it moves up to the top. So basically I can see playing around with the opacity and the position and stuff like that. Right? I'm just going to move this over to the side. Um and I have the search button over here. And I didn't use the search icon. I use the letter S. And that's something that I neatly did because if I click on a particular Pokemon, you can see that I also have X to close uh P and N to basically go to the previous and the next Pokémon. I didn't want to use arrows. I wanted to try something very unique and unconventional. And it took me a lot of time to figure out this visual direction to be very honest. And this is not something that I suddenly came up with. It took me a couple of iterations to figure out what would be nice. And this essentially looks like a Pokeball, right? So instead of the circle in the middle, you would have the um alphabet

right? Anyway, so I'm just going to minimize this for now. All right. And so then basically I would have a lot of these functions in order to duplicate the cards. So I could basically I have to duplicate all the Pokemon cards that are there. And as you can see, they sort of animate in and as you can see they sort of animate over here. And as you can see all of these are being done in a specific order. It's not random. All of these have to be executed one after the other. So it's also important to understand the structure the sequence of interactions because these are super important, right? And then this is where the most important thing is the fetch node which basically pulls in information from this URL. And I'm going to talk about this in a little bit but let me just show you the very high level structure of how I build this right and what we basically do if you see over here I have something called as variables and events. Like I said, events are triggers that are signals which perform a sequence of actions, right? So, for example, showing stats, updating the Pokemon ID. Every time I tap on a Pokemon, it updates the ID and then it does a sequence of interactions that updates all the information, right? Refreshing, loading tiles, closing, resetting stats, um showing cards, filling data, filling, you know, search grid, recent searches. So all of these are events that are even set up by engineers when they have to go ahead and build stuff right and all the information is stored things over here. So for example, the Pokemon ID, the species ID, the uh actual info which is also called as a dictionary which I can explain in a little bit. And then you have the evolution info, forms info, all the URLs that I'm storing like over here, I just pasted it over here in this case. But in most of the other cases where I'm reusing these URLs, I put them into a URL. All right? Uh because in case if I make a mistake, then if something is breaking, I wouldn't know where to fix. But if I have everything inside like a variable, then that would store that information, the various colors, the names of the Pokemon, um I've got a couple a lot of things over here, right? And so I you slowly start building all of this as you go ahead and create interactions. And this is typically how engineers do it as well. You know, just making the designs and Figma is not sort of enough anymore, right? So what I basically did is over here I'm just gathering a list of the Pokémon. So if I come over here and I maybe I can explain what's happening. If you see over here, it's called as sprint. And this is basically printing some information. And you know, engineers usually use this as debugging. So in case there's an issue or they want to check trial and error, certain information, they print it, right? And that gives you the information. So basically, I'm just actually counting how many Pokémon are actually there. So this fetch node is fetching all the Pokémon. And now I'm counting as you can see it says dot count how many Pokémon are there. And that is,32 Pokémon that exist. Right now, what if I change this to actually show you what this thing actually fetches? Not the Pokemon, but what information does actually fetch. So, I can come over here and I can just remove this part. All right. I And it reloads the prototype. Um, which it should. All right. And as you can see, it's fetching all the information. All right. And I'm storing all of this information into a variable called as full Pokemon list. And this list basically has a list of all the Pokémon which has the name of the Pokémon and the URL which then has further information about the Pokémon. Right? So this URL is just giving me the list. Right? So I also need to understand how the whole API is structured and I'm going to show you that a little bit later on like I mentioned. But this is going to help me understand what am I actually fetching. Right? When I tap on fetch, if I actually have to see all of this information, I need to use the print action. And that's going to show me what is it actually fetching, right? And I'm storing all of that inside a variable so that I can go ahead and then use this full Pokemon list and then do whatever I want with that. So, what I basically did over here is after a delay, I set the grid. All right, which is why if I sort of let me just collapse this or maybe let me just uh disable this for now. Not that one. Let's disable the print node. All right. So, oh, it's going to it should reload again. All right, there we go. So, it reloads and this grid is being set up, right? So, the entire coming of the grid because right now this is not in a grid. The grid happens later. I'm going to show you that in a second. And then I need to go ahead and fetch all these the list of all of these Pokémon. All right. And then I need to go ahead and fill the text and the image. So, as you can see over here, I take the that information, that response as a dictionary, and then I go to results and then I select the URL. And there's a lot of things that I'm doing over here. It's pretty complex. Um, uh, I can't go ahead and explain it right now. You're not going to understand it, right? But I'm taking that URL and going inside that URL and trying to fetch the elements. I'm fetching the name. I'm fetching the image. As you can see, uh, I'm going multiple levels. And in the world of gaming, images are called as sprites. And so there are multiple Pokemon images and I'm using the

official artwork and that's how all of this is being filled as you can see over here. Right? And so I'm doing this all in one sequence at a time. All right. This is basically me loading all the tiles as you can see over here. All right. And uh as you also set up some logic like when I scroll as you can see there's a scroll trigger this thing actually you know reduces in size. So if I scroll this you can see it reduces in size and then it comes back up again. Right? So pretty just fun interactions. I can tap on it and that will sort of rotate it and you can also hear like a sound effect that you can also add in play. All right. And this is where I update the pokey ID. So right now the pokey ID is actually nothing. But when I click on an element the poke ID adapts and then it goes ahead and fills all the information. So basically as you can see over here is that this variable called poke ID is what changes based on when I tap on something. Right? So to give you a very simple example of what that means is when I click on this poke card. All right. So I have a couple of items over here. When I click on this, you can actually see that I'm updating the variable to something. All right. So poke ID is the position of the card plus one. I'm not going to explain what that is. And that affects the Pokemon ID. And then now I create an event called as update Poke ID when I click on it. So when I click on an element, I update the Pokemon ID. So that's going to go ahead and then trigger a series of um interactions where it starts first of all fetching all the information. So the Pokemon info is going to fetch a lot of the information. And let me give you an example of that. Right? So if I open this up and here I'm just going to say Pokemon info. All right. And let's say we just choose a random Pokemon. This is going to reload again. All right. So uh let me choose um I don't know. Let's choose Pikachu. Right. Click on Pikachu. And now it's going to fetch all information about Pikachu. All right. And if I don't know how big this is. There's a lot of information. All right. So, you can see it gives you the names of the Pokemon. Um, it gives you uh I don't know what else. It's got a ton of information, right? And I need to scrub through all of this basically. I mean, I don't have to scrub through this over here, but there's a documentation where I can know everything. All right. and um version groups, moves, um it's got a bunch of information, the abilities, and basically a lot of things. And then I take all of that and store that into a new variable called as Pokémon info. All right. And now for every section, I can then refer to this Pokemon info, which is also called as a dictionary, which has all of this information stored and update that over here. So the weight, the height, the base experience, all of that is actually coming from this information that I have actually stored. All right. And there's also another one called species. So there are two sets of information. One is in the Pokémon URL and species URL for every Pokémon has two different URLs. And then so I need to get the information and fetch all of that. So I'm storing it into the Pokemon info. Here species info. All right. Yeah. And then I'm just storing all of that. And then the last thing that I do is I check this thing called as fill data. All right, which is a variable. And once this fill data, as you can see over here, if I can find that, um, fill data is set to false. If I set that to true, when the Pokémon ID is updated, so basically the sequence is I update the Pokémon ID, I get the first level of information. Once information, I get the second level information. All right, as you can see over here. And then it then opens up the page. All right, which as you can see over here is the main page. And once the page is open, while the page is opening, I'm also going to trigger this event or basically updating the variable called fill data. Right? So now I'm just saying that now fill data, it's a it's like a switch. Turn on the switch. It's now ready to be filled. Right? So now when this is done now in the Pokémon details every element I've actually broken this down into multiple components. So for example when I click on this if you see over here when the variable got filled data is changed run all of these things. So it updates the name of the Pokemon it updates the um ID number updates the image the colors all of that is being fetched the from the Pokemon info. It is fetching the Pokémon name. So basically that's how it goes ahead and fetches all that information and updates everything and for every element the main trigger is fill data. As you can see anything that I click on it fills the data based on that. So if I even if I click on the forms on fill data it fills all of that right. So this is what we call as systems design or systems thinking which is super duper important for designers to understand because we are expected to think like this and build products. Designing screens is becoming the bare minimum nowadays. All right. And that's also pretty much how I built the search experience. The, as you can see, I have the input field over here. Um, and the text input. So, as you can see, I have so much of logic of what happens when I'm typing, right? So, for example, as you can see, while typing, what actually

happens behind the scenes? Um, and I can give you a couple of examples. So, if I click on the search over here, I have the search Pokémon. Um, I don't seem to have the keyboard. So, what I can do is let me just open up my mirroring. So, now I'm mirroring my phone. And now I can click on the search icon. And as you can see, um, I should get a keyboard, but the keyboard isn't coming because it won't show in the simulator over here. And I can search for a Pokemon, right? So let's say I search for Charizard, type in C H A. All right? And then it brings in all of these Pokémon and I have to basically get the list of all the Pokémon and then depending on what this letters are, match it with the search results and then show that over here. Right? So this is Charmander, Charmeleon, this is Macham, this is Hitmonchan, this is Chan C. Um, basically all of these Pokemons have the letter Ca, right? And then if I say C H A R, all right, then it resets everything and then it brings in all the Pokémon which have C H A R in the name, right? And if I type in something weird, all right, so something like this, then it knows that there are no items, right? And then that's when I can show an error image. And this is typically how engineers also build things, right? So it actually helped me understand how to actually build a basic search experience. And this itself took me like 2 days just to build this standard search experience. Right? And so now for example if I click on char over here and then I click on uh let's say this one. All right. Now this as you can see it goes ahead chimchar it goes ahead and fills in all the information. It updates the Pokemon ID. All right. And then it goes ahead and updates all of this information. So this is a firet type Pokémon. This is the co region. These are the various stats of the Pokemon. Um, in evolutions. So, Chimchar, Monferno, Infernape, these are all the evolutions, right? And now I can go back and close this. Let's try uh So, as you can see, sometimes things break, but that's okay. Uh, let's try something else. Let's just type a random number, right? Uh, let's type R U D. Is there Do we have something like that? All right. Okay, we do have a random Pokémon. Uh, what's it called? It's called uh Dudiggon. All right. So, this is a dragon type Pokemon. All Yova region. These are the stats of that. Um, held items. There are no forms or evolution. So, that's why it's not showing. We can try something else. All right. Let's try Jinx. All right. So, Jinx is also a fun Pokémon. All right. Um, it has all of this information. As you can see, all of this is super dynamic. So, basically a sequence of actions that's happening all the time. All right. And the pre-evolution form is called as smooth jump, right? So, that's fun. And I can tap on C to cancel. And then we come back over here. Right? And this is like a super dynamic realistic prototype that exists out there. All right. So now let me quickly show you the API and help you understand how I studied all of that. Now to give you some context, I have never worked with APIs nor do I understand anything about it. And this was my first time really diving in and figuring out how do I use this information. And essentially to be very short, let me go back to the main screen. All right. Uh let's go back to the Pokei API over here. It's actually a database of information that you can collect. All right? And sometimes you need this thing called as an API key which is like a key to a lock, right? Only if you have the key will you be able to, you know, open the lock. This is like an open source API. So you don't really need an API key. You just use it, right? And so as you can see when I click on the docs, there's so much information about everything like berries and contests and evolutions and games and items. If I come down here to Pokemon, all right, one Pokemon has a ton of information, right? And every Pokemon has a distinct URL. All right, so let's say I click on Pokemon over here. You can see that this Pokemon called Clefairy has a bunch of information, right? And these are all the data points that are available, right? And whenever I got stuck, as you can see, I'm using the browser, which is the new browser. You can press command E and that gives you the chat. So anytime I have a question, I can go ahead and help ask you to help me understand what this is, how do I use this, what am I supposed to do with this, right? And this is my first time doing it. So if you are seeing this for the first time and if you're pretty much confused, that's exactly how I was. And I just used the to help me understand certain things that I was not understanding. Right? So I'll give you an example over here. Right? So let's say we go to uh search for habitats, right? How do I know how many habitats exist? All right? So what I could do here is I can copy this thing. All right. And I can come over here and paste that over here. Right? And now this gives me what we call as a JSON which is what I was storing that information in. And if I call this pretty print then you can see that it has nine types of habitats. All right. And these are all the results. All right. It's called cave habitat, forest habitat, grassland habitat. Right? Now how did I know that I could even do this? Right? So if I come over here and I just click away and I type in how can I check how many habitats

um are there right I just type on that and then the is going to read everything that's there on the screen and help me understand what to do right so you can see it says you can check the number of habitats by calling the Pokémon habitat endpoint so you can see that I just have to copy this link all right which I just did and then I can go ahead and paste that and that's what we saw over here right and as You can see in this example the count is nine. There are nine different habitats. Right? So summary use this look at the count field in the response for the total number. Right? So it's actually helping me understand certain things that I'm looking for. And this is super duper helpful. Right? And if I come back to the main um screen over here. All right. You can enter this gives you information for one single Pokémon. So I can even type in a number or an information. So let's say I type in uh Pikachu. All right. And that gives me this. And in fact, I can even open this over here. And this gives me all information about Pikachu, right? So, it gives me the abilities, the base experiences, the forms. Um, these are all things that you probably would not understand. The height, the held items, the rarity of those items. There is so much information for every single Pokémon, right? And so there's a structure that these are laid out in. So, we basically use that structure to come down over here. There's a lot of things that you can choose various statistics that we looked at. All right? So, this is basically HP, right? So if I want to get more information about this, I can then go and click on this. So how do I see how many stats are there? So I click on this, I choose stats, copy this URL and paste that over here. And now I can see that there are totally eight stats. HP, attack, defense, special attack, special defense, speed, accuracy, and evasion. Right? These are all the various stats that exist for a particular Pokemon. Right? So it took me a lot of time to understand all of this and basically used Dia, which was super helpful and made my life so easy. And this is typically essentially how you're supposed to learn things, right? And I always talk about the fact that you're always supposed to be figuring out ways to learn things and learn things, right? Tools exist for you to learn these things. That's how I build the entire Pokémon protocol. So, that's pretty much it for this video, guys. Thank you guys so much for watching. Hope you guys really enjoyed it. If you did, let me know in the comment section down below. Make sure to leave a like and subscribe to the channel for more amazing, awesome content. I'll see you guys in my next video. Till then, take care and bye-bye.