# React Day30 - UI Challenge

###### tags: `react`

## Prepare

- An article to learn how to setup React Project
- Did we need unit test for the leason
- Actually unit test it's hard for me, but it is important.Maybe can add at one of HARD part.
- Did we teach unit test for the leason
- Did we need something like storybook for the leason
- What kind of storybook ? User story ?
- How do we make user learn something and
- and ?

### Day0 - Environment setting
Node, Create React APP, Hello world
- I think it can be Day1 leason,but it's just my opinon.You got the final decision.

### Day1 - 3-column preview card component
Easy
Thinking in Component

https://www.figma.com/file/sGYoydSExNQ8EXEniv6eov/card-component?node-id=0%3A1

### Day2 - Profile card component
Easy
JSX, Element, Component
https://www.frontendmentor.io/challenges/profile-card-component-cfArpWshJ

### Day2 - Pricing component with toggle
Easy
onClick, useState
https://www.frontendmentor.io/challenges/pricing-component-with-toggle-8vPwRMIC

### Day3 - Timer
Easy
useEffect
https://www.frontendmentor.io/challenges/launch-countdown-timer-N0XkGfyz-

### Day4 - Avatar change
Easy
useEffect, useState

https://dribbble.com/shots/15655020-Profile-cards-Webpixels-Components
- Frontend Mentor //Pick this one ?
https://www.frontendmentor.io/challenges/profile-card-component-cfArpWshJ

### Day5 - Sign-in Form
Easy
onChange, onSubmit, post API

https://dribbble.com/shots/17653492-Cryptocurrency-wallet-app

### Day6 - Chat Room
Easy
useState, onSubmit
https://dribbble.com/shots/17654946-Dating-App-UI

### Day7 - Sidebar Navigation
Easy
onClick, useState, Context
https://dribbble.com/shots/17659480-Sidebar-Navigation

### Day8 - Interactive pricing component
Easy
useState, onChange, Context
https://www.frontendmentor.io/challenges/interactive-pricing-component-t0m8PIyY8

### Day9 - Image Slider
Easy
onClick, useReducer
https://dribbble.com/shots/15682266-Daily-UI-072

### Day10 - Alert
Medium
React Portals, Notify by server

https://dribbble.com/shots/16891665-Daily-UI-011-Flash-Message

### Day11 - Flight Ticket Booking
Medium
https://dribbble.com/shots/17653309-Flight-Booking-App

### Day12 - Savings Calculator Concept
Medium
// It's a lot of thing in this topic,what are your plans? Or any idea?
https://dribbble.com/shots/11128318-Savings-Calculator-Concept?showSimilarShots=true&_=1646670313862

### Day13 - Table
Medium
// It's a lot of thing in this topic,what are your plans? Or any idea?
https://medium.com/paperpillar/our-process-to-redesign-dashboard-for-server-hosting-platform-2f3a0861b3aa

### Day14 - Photo room
Medium
Lazy Loading
https://www.frontendmentor.io/challenges/galleria-slideshow-site-tEA4pwsa6

### Day15 - Toast

### Day 20 - Controls-Swap
Hard
Gesture
https://dribbble.com/shots/17648743-Experimental-Controls-Swap

### Day 21 - Shoes App
Hard
Shopping Cart
https://dribbble.com/shots/17655571-Nike-Shoes-App-Design-Concept

### Day 22 - Inbox
Hard
Pagination, Search
https://dribbble.com/shots/16855178-Data-Tables-Inbox

### Day 23 - Date Picker
Hard
https://dribbble.com/shots/14008248-Minimal-Date-Picker-Component-Redesigned-UX

### Day 24 - Car booking
Hard
Map
https://dribbble.com/shots/17652634-Cab-booking-app

## This for CSS 30

### Meet landing page
https://www.frontendmentor.io/challenges/meet-landing-page-rbTDS6OUR

### Suite landing page
https://www.frontendmentor.io/challenges/suite-landing-page-tj_eaU-Ra

### Clipboard landing page
https://www.frontendmentor.io/challenges/clipboard-landing-page-5cc9bccd6c4c91111378ecb9

### Room homepage
https://www.frontendmentor.io/challenges/art-gallery-website-yVdrZlxyA

## Hard to implement, but can be challenge
### Work space select animation
https://dribbble.com/shots/4948155-Work-space-select-animation

## Beginner truth
-If the video more than 10mins~15mins, will feel hindered.