Let's build a complete web app using Country Rest API | React Portfolio Project with TypeScript

Описание: Welcome to the full React TypeScript Web App using Rest Countries API. This is a full video course from the scratch to the full-phase multi-page web app using React, TypeScript, Redux, Redux-thunk, Axios, Material UI and SASS. This can be a very good portfolio project to include in your front-end developer portfolio. This video will help you to advance your React skills from beginner level to semi-advance level.

⭐ Features - Key ideas you will learn from this video are: ⭐
🔸 Render countries data from API data
🔸 React Sort data / React sorting
🔸 React search functionality / filter data
🔸 React routing
🔸 State managements with the Redux and Redux-thunk
🔸 Switch theme color dynamically
🔸 Pagination
🔸 State consistent with local storage


⭐ Tech Stacks ⭐
🔸 React
🔸TypeScript
🔸Redux
🔸Redux-thunk
🔸Material UI
🔸SASS
🔸Axios



➤Live Demo:
https://bw-country-api.netlify.app/
➤ Github Repository:
https://github.com/thebikashweb/count...

➤ Figma design file:
https://www.figma.com/file/6avfWlGpz3...



⭐ Timestamps ⭐

0:00 Introduction and what we are going to create
00:03:16 Create a React app with TypeScript
00:06:49 Install dependencies/packages
00:08:20 Folder structures
00:10:42 Router setup
00:19:20 Redux setup
00:33:32 TypeScript types & reducers
01:06:04 React Material UI
01:12:21 SASS & Styling
01:22:40 Appbar component
02:06:33 Drawer component
02:45:10 Country Card Component
03:11:36 Country List Component
03:19:24 Fetch data from the API
03:33:45 Render actual countries data
03:45:20 Add to cart action and reducer
04:05:10 Cart items with real data
04:54:11 Remove item from the cart
04:55:59 Change cart icon color
04:59:01 Making cart icon clickable
05:00:49 Disable add-to-cart button
05:08:25 Search feature
05:26:20 Sort feature
05:49:00 Pagination
06:12:11 Switch theme color
06:21:32 Single country page
06:21:32 BONUS👌🏻 store state in local storage


#React #TypeScript #ReactPortfolio

Rest Countries API with color theme switcher
Rest Countries API React Typescript project
React Portfolio Project
React Advance Level
React pagination
React search filter and sorting
Redux state management live example
Redux thunk