MOVIE DB API
In this project, I used the most updated React Js futures with Styled Components; I used React Transition Group to animate when to mount or unmount something from DOM. I took data from THE MOVIE DATABASE API and showed users different data in different situations with beautiful animations. The project has a responsive design for all devices.
Netlify Link: https://agitated-hugle-838e6c.netlify.com/#/
Let's start with the first animation. I really like to play with animations. I did not use any CSS library. I know how they can make slow big applications. My first animation appears once per minute. I didn't want to show the user when they visit the home page every time. One minute still not too much, but of course, I can determine the time. Now see the picture below.
When component load first, I handle current timeStamp and compare it the other timeStamp. If I don't have any timeStamp (at the first visit) or my current timeStamp 6000ms (1m) bigger than the stored timeStamp I set isFirstVisit equal to true and trigger the first animation with the help of React Transition Group and Styled Components. React Transition Group important because I can animate and change the display property to none instead of hiding it after the animation finish. Small touches for better user experience. And the result.
Change the display property to none instead of hiding it after the animation finish.
CSS
For design I used 'font-size: 62.5%' technic. Because it is effortless to use and make your design responsive. Now see the picture below.
After I made 0 all margins and paddings for whole dom elements, including before and after elements, I sat font size to %62.5 with the help of Styled Components createGlobalStyle. It means every one rem equal 10px now. Of course, I could use 10px instead of 1rem. Why I didn't use px instead of rem because if you build your whole parameter with rem when you start to make your device responsive for small screen devices, all you have to do decrease font size and your whole 1rems 8.8px now instead of 10. I reached this result with just decreasing HTML font size. Font sizes, margins, paddings, height and widths have rem value. With a small decrease of HTML font-size value, my website almost full responsive for I tablet except a couple of little things. See the gif below...
In this project, I went with Flexbox instead of the Grid system. Grid system was also OK, but according to https://caniuse.com, 97% of browsers can run Flexbox without a problem while this is 93% for Grid CSS. I have used a lot of excellent CSS properties such as clip-path, background-visibility (it is essential for my cards that can turn and has three layers), perspective, background-clip, -webkit-scrollbar, mask-image, and mask-size. The most important one is the advanced use of the background-image property. See the pictures below...
Rating becomes the width of background-color of stars. When I set color: transparent and background-clip: text for HTML stars, background image paints stars. And a little bit low opacity black stays around stars that have an angle for seeing stars better.
And the result. Now everyone is happy. (for a vote_avarage that between 8 and 9)
Here is another usage of the background image. I make text colorful with the linear-gradient property.
I really like SVG's as a background image. Here is another example of mask-size and mask image properties. This approach same as the painting background of the element. I have @supporst future here. If a browser doesn't support mask-size or mask-image features as a solution, they can show the SVG as a background-image otherwise mask-image and mask-size works.
In this project, I also used Material UI for Pagination. You can see how I override Material UI styles with Styled Components. It is really powerful.
And here, you can see how I used Styled Components and React Transition Group for animation Modal while it is opening and closing. A lot of animation work here.
JAVASCRIPT
For improving my component structure skills, I didn't use Redux or Context API in this project. Passing props wasn't easy, but I needed to double think about component structure every time. I had three main containers, one main presentational component and a couple of the other components. As you can see in the picture, my container components stores movies that coming from API. They set loading, handle errors, scroll top after page change, handle page count for each request and pass data to pagination to create pagination structure according to the number total page count. They also handle current page data and make Api request according to it. After all this work, they pass data to main presentational component Movies.
Here a part of my main presentational component. It handles an array of movie data, displays it with map function and returns each card. Some movies didn't have posters and backdrop paths. I eliminated them before display. Also, I needed to prevent rendering this component if there is no API requests anywhere in the application.
I triggered error with a button that stays right bottom of the page.
My first approach was sending HTTP Request for each keystroke, but then I changed my mind because of performance purposes. For making HTTP Request with onSubmit, I needed to use uncontrolled components. Here you can see how I did it.
For remoting on components, I used React Router, and the 'history.push()' method was beneficial when I used it for my logo to go home page.
