This is my bank of mini apps. Built on a pure React.
These apps are useless but shows my coding style and what features I can implement. These apps are my past homeworks given by the mentor.
Apps:
-
CIAN Filters
Many controlled inputs with diffrent types, fetching json, filtering data, reused ccomponents, SCSS/Sass -
WORDLE
useReducer & useEffect hooks, correct addEventListener on keyboard, UI colorization based on game logics, PropTypes, SCSS/Sass
PLAY NOW -
Avito Filters
Tree-menu built from json, smart checkbox-selecting, recursion, single component for every parent and his child, SCSS/Sass -
Pokemons
Redux, GRID plate with little boxes, async state update, fetching data by url, pagination, count for caught pokemons, CSS Modules -
JetBrains Menu
Recursion, reused components, large data, CSS Modules
Famous mini-game to find out what 6-letters word was hidden.
createPortal, useReducer & useEffect hooks, correct addEventListener on keyboard, UI colorization based on game logics, PropTypes, SCSS/Sass
Wordle - its a mini-game. You have to find out hidden word. Originaly, hidden word updates once in a 24 hours – but in my game it changes after game end`s. You have 6 tries to find him, every try will give you clue on strokes and keyboard – green background means you caught correct letter in his original place, yellow background means that this letter includes in hidden word, but not in exactly that place, grey background means that this letter is not correct and not includes in hidden word.
CIAN Filters built to find mortgage for your future house.
Many controlled inputs with diffrent types, fetching json, filtering data, reused ccomponents, SCSS/Sass.
The application is configured to search for suitable offers from banks. The offers themselves and all information about the bank are stored in a large json file. The interface is built from controlled reused inputs. Each input has its own state. All states are connected together and checked at the same time using a helper function. This function selects suitable bank offers and displays them in the interface.
Avito Filters shows you logically correct work of compicated tree of checkboxes.
Tree-menu built from json, smart checkbox-selecting, recursion, single component for every parent and his child, SCSS/Sass.
We have pure json file with filters info: id, parentId and so on. Its not deep, but flat: all filter-options stays on one deepensy level. We have only id and parentId to build a tree of options. So if you select all childrens of one parent tree, parent's checkbox is setting on automaticly. It works to the other side too: if all childrens of parent is setted up and you setting down one of them, parent and that children sets them checkboxes off.
Simple game without logics: this app just shows you how do I handle fetching data by link.
GRID plate with little boxes, useCallback, memo API, async state update, fetching data by url, pagination, count for caught pokemons, CSS Modules.
We have pokemons on the interface. Pokemon's data comes with link: name, his id, picture and else. We can catch Pokemon, but it costs 0.5 sec. To handle delay, I used hook useState with callback inside, because delay action is asynchronous (setTimeout). We also have pagination here – you can look around and pick another pokemon, if you dont like pokemons on the current page.
Big tree-like menu from JetBrains website. Originaly, it helps navigate in a huge documentations of products.
Recursion, reused components, large data, CSS Modules.
We have here huge json file, like 30,000 strokes. We just draw menu with that options, what we have in json file: every option has his id, anchors, inner pages and so on. You can select some option – on the right side of screen you'll see openned page's id or anchors, depends on what exactly did you select.
Это – мои мини-приложения, собранные на чистом React без вспомогающих библиотек.
Они в каком-то смысле бесполезны – они просто показывают мой стиль кода и какие задачи я могу решить. В приложениях есть и тестовые задания известных российскому рынку компаний и полностью выдуманные приложения.
Данные приложения – мои домашние задания от ментора.
Приложения:
-
CIAN Filters
Множество контроллируемых инпутов, работа с данными из json, фильтрация данных, переиспользование компонентов, SCSS/Sass. -
WORDLE
useReducer & useEffect хуки, корректный addEventListener на клавиатуре, окрашивание UI опираясь на игровую логику, PropTypes, SCSS/Sass
PLAY NOW
-
Avito Filters
Древовидное меню из чекбоксов, построенное с помощью "плоского" массива объектов, умное поведение чекбоксов, рекурсия, единственный компонент, который используется для "предков и наследников", SCSS/Sass. -
Pokemons
Redux, GRID сетка с маленьками ячейками, асинхронное обновление стейта, реальный запрос по url, пагинация, счетчик для пойманных покемонов, CSS Modules. -
JetBrains Menu
Рекурсия, переиспользование компонентов, огромное количество данных, CSS Modules.
Известная мини-игра: ваша задача – найти загадочное слово за 6 попыток с нативными подсказками.
createPortal, useReducer & useEffect хуки, корректный addEventListener на клавиатуре, окрашивание UI опираясь на игровую логику, PropTypes, SCSS/Sass
Wordle – это известная мини-игра по поиску слова. Не переживайте – с подсказками на экране угадать слово будет не сложно. У вас есть 6 попыток, чтобы угадать слово. Каждая попытка будет давать вам подскаку в вводимой строке и виртуальной клавиатуре – зеленый фон буквы значит, что буква угадана в нужном месте, желтый фон – что буква угадана, но ее расположение иное, серый фон – что буква отстуствует в слове.
Приложение CIAN Filters позволяет отфильтровать предложения банков на ипотеку
Множество контроллируемых инпутов, работа с данными из json, фильтрация данных, переиспользование компонентов, SCSS/Sass.
Приложение имеет множество контроллируемых инпутов, с помощью которых ищется множество подходящих предложений из json-файла. У каждого компонента есть свой стейт, который передается корневому компоненту. Корневой компонент принимает все стейты и формирует массив подходящих предложений, а потом отрисовывает их в интерфейсе.
Приложение Avito Filters показывает логически правильное поведение чекбоксов – например, выбор дочерних при выборе родителя и так далее.
Древовидное меню из чекбоксов, построенное с помощью "плоского" массива объектов, умное поведение чекбоксов, рекурсия, единственный компонент, который используется для "предков и наследников", SCSS/Sass.
У нас есть плоский json-файл и данными для опций в меню – их id, parentId – id родителя. С помощью данного файла мы строим древовидное меню с помощью рекурсии. Логика приложения построена на следующем: если вы выберете всех детей какого-нибудь родителя, то он тоже выберется. Более того, если у этого родителя есть "братья", и они тоже выбраны, то выберется и один общий предок сверху – и так далее. Работает и в обратную сторону – при снятии галочки с родителя, то и у всех наследников галочки тоже снимаются.
Простейшая игра без какой-либо логики – в этом приложении я показываю как обрабаываю реальный запрос по url, получаю json-файл и рисую компоненты на его основе.
GRID сетка с маленьками ячейками, useCallback, memo API, асинхронное обновление стейта, реальный запрос по url, пагинация, счетчик для пойманных покемонов, CSS Modules.
У нас есть ссылка с данными покемонов: их id, имя, аватаркой и так далее. Фетчим эти данные по кнопке и отрисовываем интерфейс. Мы можем поймать любого покемона, но поимка длится 0.5 секунды из-за setTimeout. Во время этого окна можно поймать и другого или нескольких – при этом стейт обновится правильно, пойманы будут все. У нас есть и пагинация чтобы выбрать какого-нибудь другого покемона, она работает с помощью useEffect и обновляет стейт с покемонами новым списком.
Огромное древовидное меню с официального сайта JetBrains. Нужен для навигации по большой документации продуктов компании.
Рекурсия, переиспользование компонентов, огромное количество данных, CSS Modules.
У нас есть огромный json-файл и данными по каждой опции меню – в файле около 30 000 строк. По нему мы выстраиваем древовидное меню с помощью рекурсии. Если выбрать какую-нибудь опцию в меню, то справа можно увидеть неработающую гиперссылку или id страницы, которую надо открыть.