 the right way. All right. I hope you all enjoyed that introduction to the video with the coffee b-roll. I haven't done that in a while. I don't know why I got away from it. I think it's because I haven't really been drinking coffee like that and I actually am not even gonna lie. Sometimes I do that even if I don't drink coffee. I'm really excited about today's video. A full day of coding and design. This is kind of a new type of video where I show you all my process of designing and building a web app. It makes me have to actually build something because I can go months without doing any side projects. Also, it's a really creative video and I hope it can be helpful to those of you all who are new to web development or just want some inspiration. If you could give this video a thumbs up, I would greatly appreciate it and consider subscribing to the channel for more content like this. Believe it or not, design is actually really important. I know some of you devs out there could care less about design and you would make everything black and white and apps would be terminal based, which is just disgusting. But for those of you all who appreciate design, it's a great skill set to have and it's pretty rare to find a developer who not only cares about design like UIUX, understands it, has experience with designing applications and coding like that's kind of a unicorn. There's such a high expectation nowadays when it comes to applications because let's face it, we spend a lot of time on our phones so all these different companies are competing to retain our attention as long as possible and you can't do that with a bad experience. In today's video, I'm going to be walking you all through how I would implement a new feature to an existing application. So I built this Pomodoro timer because if you've watched any of my previous videos, especially the routine and productivity videos, you'd know that also within the 45 minute time frames that I typically choose, I have like realistic goals and not these huge goals that I typically don't achieve and a lot of time frame. With all that being said, the feature that I would like to build out, at least part of it, is to have like three different dropdowns where I can select a focus time along with a long break and a short break. The current Pomodoro timer that I have actually only has two buttons in the Pomodoro timer. So one button to press start and the other button to reset the Pomodoro timer. Since I'm a front end developer, I thought it would be cool to do some front end development and maybe a little bit of react rendered component functionality as well. I think it's good to have small goals that you can achieve, especially when it comes to programming. I find myself too often trying to complete way too much just to end up never finishing the app because I stopped working on it out of frustration. When it comes to developing a new feature or creating an app, one thing I really like to do is I like to design first. So design focus development and I'm a bit partial and biased towards having good design and creating the design first before development. I think it makes it easier to program personally knowing how the different UI elements interact with each other can help you when it comes to building out the functionality later on along with the CSS. If you don't know what the layout is, you can find yourself pretty confused and stuck and frustrated because you don't have a starting point for the application. We know that we have a Pomodoro timer and that we want to add some dropdowns to the application. That will be our MVP. So now we can actually start doing some design work. Also keep in mind that I'm probably not going to finish the entire app in this one video. Give this video a thumbs up if you like to see part two or comment down below part two. Using this app should be like an escape from all distractions by selecting a focus time along with choosing between a short and long break in between focus time intervals. Since we are designing a relaxing Pomodoro timer, we need to make sure the theme of the React app is relaxing. I'll look up an adjective that describes the nature of the app and then colors hex value to try to pinpoint the specific colors. Then I'll grab a color, go to Adobe color wheel, make that the main color and try to find colors that are analogous to make the theme feel consistent. For the sake of time, I'll skip over fonts for now. I usually like to go with Roboto though. Wireframing is the next step in the design process. This is the stage where I'll actually just be drawing a bunch of pretty boring looking boxes, but the main purpose of wireframing is to create the layout and that will actually help me a lot when it comes to doing the CSS. So I'll use my iPad or a sheet of paper to illustrate relationships between elements such as a navigation, the Pomodoro timer, overall layout, call to action and imagery if there is any. Wireframing should be very raw and unpolished process with minimal colors. One reason I like wireframing is because it makes coding the layout more simple and less confusing because I know where each design element should be located within the app. I usually like to design with Figma, but I've used Adobe XD a lot as well. Designing with an intelligent app like Figma also makes coding easier because I can actually copy the CSS from the design into my favorite text editor, Visual Studio Code. Technology makes a huge difference when it comes to coding, which is why I am happy to be partnering with Logitech. Thank you to Logitech for sponsoring this video and sending me over the new Logitech Combo Touch keyboard case that's honestly made my experience with my iPad Air so much better before I would really only use my iPad when I was like on the go, like on an airplane and my wife and I wanted to like watch a movie. Otherwise, we wouldn't really use it because I love using a keyboard, especially when I'm consuming content or I'm doing some research. But now with the Combo Touch, in many instances, I can actually replace my laptop with my iPad because the Combo Touch keyboard case makes my iPad Air a much more powerful and usable device. Utilizing the Logitech Combo Touch keyboard case has made designing a lot more fun. I'll use sketch mode for the actual designing and wireframing part and then I'll use read mode whenever I need to do some research like I mentioned earlier looking for different color palettes and a theme for this web app. Before, I would just resort to using my laptop because I didn't have a case keyboard to make the research process easier. Now, after using the Combo Touch's spacious click anywhere trackpad to research, I can simply detach the keyboard from the case and start designing in sketch mode. As a content creator and front-end engineer, I spent a lot of time prototyping designs, editing pictures, and thumbnails on my iPad so I appreciate the Logitech Combo Touch's versatility that make my creative processes easier. The Combo Touch keyboard case offers four different modes type, read, sketch, and view modes. As you can imagine, one of my favorite modes to use is sketch because I spend a lot of time editing thumbnails for YouTube and designing as a front-end software engineer. The Combo Touch is incredible because not only does it protect itself from my clumsiness, but it also transforms my iPad into a more powerful device. The large trackpad combined with the new click anywhere feature gives digital creatives and professionals like myself on the go flexibility. The Logitech Combo Touch keyboard case is one of my favorite tech items and I would definitely recommend it to anyone who is a creative or professional. The first thing I need to do is to create a container that will house the drop-down menu items and position them into the same row. I'll do this by creating a CSS class for the container to style. Next, I'll add display flex to create a flex container. Then I'll need to align items and justify content properties, but I can't remember which axes they specifically work on. Now I'm going to go to like CSS tricks and actually see what justify content does versus align items. Before I import material design at the drop-downs, I'll simply create empty divs with borders to make sure everything is positioned correctly. Okay, so I'll need to do justify content to space evenly the items that way I don't need to add margin to the drop-downs because the space evenly property ensures that the items in the container are distributed so that the spacing is evenly between each other. Basically the space between the edges are equal. I also need to ensure that I add flag traps so the items aren't cut off or squished together at smaller viewports. So I already have material UI installed so now all I have to do is add the select menu items which are the drop-downs in the design. I'll do this by importing form control input label select menu item and form helper text which are necessary components for the drop-down to work. I'll next create a state variable and a setter method for focus time so I can easily update the value of the focus time whenever the drop-down value changes. I basically write the same code but using different variable names for short break and long break. Now you can see that you can select different drop-down times for the pomodural timer and you can use a break. The last thing I want to do is disable one of the break interval drop-downs if the other has a value to prevent any confusion for the user. To do this I'll simply create two new Boolean state variables with setter methods. The state variables will be set to false initially and when on change event occurs for one of the select menu drop-downs the other will be disabled by calling its setter method and passing it false along with passing the Boolean state variable to the disabled prop built inside the select component. Now you can see that the short break drop-down is disabled when the long break drop-down is selected and vice versa. Alright I think this is a good point to stop. I think I did a good amount of work. Remember I said try to achieve small goals opposed to basically trying to eat the whole pie in one setting. I got the drop-downs position correctly. I also added the functionality for the select drop-down menus to actually work along with adding some functionality for you to be able to disable one break if the other is selected. Obviously there's a lot more work to do. I actually have to tie the data from the drop-downs to the actual progress bar along with doing some refactoring and make things more simple and of course some more UI work for the action buttons such as the play reset and stop buttons and of course some styling because the pomodoro timer like the circular progress bar is actually really big it needs to be a little bit smaller. I'm definitely going to finish this project I'm going to speak it into existence so if you all want to see part two like I mentioned earlier be sure to give this video a thumbs up. With all that being said once again thank you to Logitech for sponsoring this video and as always have a blessed rest of your week I'll see you all soon peace