- Implements responsiveness using theme and styled system's responsive styles
- Everything is created from the ground up. CSS is done using Styled Components
- Slider activates automatically, useEffect cleans up the setInterval when clicking buttons
- React code is not polished, just wanted to responsiveness to work well on all screens
- Practicing standard React Router concepts
- Index routes, nested routes,
<Link/>,<NavLink/> - Dynamic URL parameters, useParams hook
- useNavigate, useSearchParams, useLocation hooks, query string
- React.lazy() and React.Suspense
- Done using TypeScript and Styled Components
- Fetching data from an api
- While data is loading, a load indication is displaying
- Utilizing styling along with event handler and useState to implement dynamic change of the details tab, depending on the tab selected
- Basic styling so it doesn't look too ugly
- React, TypeScript, Styled Components, Styled System
- Utilizing useState
- Conditional rendering
- Styled components and theme
- Custom CSS styling with Grid and Flexbox
- Not responsive
- Some simple accordion
- Given the file with reviews create a component that will display an image, name, position and review text.
- Two buttons should switch to the next / prev review.
- Styled System + Styled Components + Box
- React Icons
- useState, useEffect hooks, localStorage save/retrieve data, forms, controlled form,
- Class components, component lifecycle methods, HTTP requests, real api
- useState,
- computed properties,
- rewritten from class components to hooks
- Utilizes basic usage of useState() hook
- Conditional render
- Events
- CSS modules
- React Icons library
- Fetching tours from an api using fetch, async / await syntax and useEffect()
- Storing them in state using useState()
- Implementing sort of state machine to render according to the current state (showing content, loading content, showing error if occurred)
- Some responsiveness, although without any particular media queries
- Responsive
- Implemented a spinner that runs while page is loading. Used React Icons library
- Each card has a description text, which is truncated, and a "Show more / Show less" toggle button.
- This one is vanilla JS, not TypeScript
- Practical usage of styled components.
- Use ThemeProvider and theme (styled system)
- Set up CD for gh-pages on each new push to main, utilize GitHub actions