diff --git a/README.md b/README.md index 108c6d2..62337a0 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ Visit live site: This project follows [these instructions](https://rootdomain.notion.site/Candidate-Exam-Front-End-Engineer-ac3dd8a3474542899d49efb894672246) and is built according to [this Figma design]() to complete the assessment tasks. -For a detailed side-by-side comparison of the design and implementation, [click here](). +For a detailed side-by-side comparison of the design and implementation, [click here](). The differences between the design and implementation are explained in the comments. ## Tech Stack @@ -18,9 +18,41 @@ For a detailed side-by-side comparison of the design and implementation, [click - Utilize [TanStack Query](https://tanstack.com/query) for efficient data fetching, caching, and synchronization. - Use [React Router](https://reactrouter.com/) for code-splitting and lazy-loaded routes. - Style using the atomic approach with [Tailwind CSS](https://tailwindcss.com/), alongside [clsx](https://github.com/lukeed/clsx) and [tailwind-merge](https://github.com/dcastil/tailwind-merge), to prevent style conflicts and enhance readability. -- Leverate [Material UI](https://mui.com/material-ui/) for ready-to-use components. +- Leverage [Material UI](https://mui.com/material-ui/) for ready-to-use components. +- Implement grid layout using CSS Grid. - Automate deployment to [Firebase Hosting](https://firebase.google.com/docs/hosting) through [GitHub Actions](https://docs.github.com/en/actions) for continuous integration. - Adopt an atomic approach to state management with [Jotai](https://jotai.org/). - Generate realistic images and avatars with [Faker](https://fakerjs.dev/). - Use [react-intersection-observer](https://github.com/thebuilder/react-intersection-observer) to achieve infinite loading and lazy load images. - Implement self-hosted fonts using [Fontsource](https://fontsource.org/). + +## Features + +### Skeleton + +![tags_skeleton](screenshots/tags_skeleton.gif) +![results_skeleton](screenshots/results_skeleton.gif) + +### Infinite scrolling + +![infinite_scrolling](screenshots/infinite_scrolling.gif) + +### Lazy load images + +![lazy_load_images](screenshots/lazy_load_images.gif) + +### Responsive Web Design (RWD) across all pages + +![home_rwd](screenshots/home_rwd.gif) +![results_rwd](screenshots/results_rwd.gif) +![tags_rwd](screenshots/tags_rwd.gif) + +### Other features + +- Code-splitting and lazy-loaded routes +- Dynamic document title + +## TODO + +- Error handling +- Testing diff --git a/screenshots/home_rwd.gif b/screenshots/home_rwd.gif new file mode 100644 index 0000000..25130fb Binary files /dev/null and b/screenshots/home_rwd.gif differ diff --git a/screenshots/infinite_scrolling.gif b/screenshots/infinite_scrolling.gif new file mode 100644 index 0000000..0da8099 Binary files /dev/null and b/screenshots/infinite_scrolling.gif differ diff --git a/screenshots/lazy_load_images.gif b/screenshots/lazy_load_images.gif new file mode 100644 index 0000000..ce58258 Binary files /dev/null and b/screenshots/lazy_load_images.gif differ diff --git a/screenshots/results_rwd.gif b/screenshots/results_rwd.gif new file mode 100644 index 0000000..504d606 Binary files /dev/null and b/screenshots/results_rwd.gif differ diff --git a/screenshots/results_skeleton.gif b/screenshots/results_skeleton.gif new file mode 100644 index 0000000..576a2a1 Binary files /dev/null and b/screenshots/results_skeleton.gif differ diff --git a/screenshots/tags_rwd.gif b/screenshots/tags_rwd.gif new file mode 100644 index 0000000..ea58e56 Binary files /dev/null and b/screenshots/tags_rwd.gif differ diff --git a/screenshots/tags_skeleton.gif b/screenshots/tags_skeleton.gif new file mode 100644 index 0000000..778f92b Binary files /dev/null and b/screenshots/tags_skeleton.gif differ diff --git a/src/components/common/Slider/Slider.tsx b/src/components/common/Slider/Slider.tsx index a1cceb3..a389a6f 100644 --- a/src/components/common/Slider/Slider.tsx +++ b/src/components/common/Slider/Slider.tsx @@ -88,11 +88,3 @@ export default function Slider({ /> ) } - -// font-weight: 500; -// font-size: 16px; -// letter-spacing: 0.15px; - -// font-weight: 400; -// font-size: 14px; -// letter-spacing: 0.25px;