Занимаюсь веб разработкой и осваиваю новое в ней. Пишу на React/Redux Toolkit.
Начал изучать frontend с 2021 года. Получал/получаю знания с видео уроков, статей, документаций, а также у знакомых людей находящихся в этой тусовке.
FrontEnd привлекает своим влиянием на интерфейсы, с которыми взаимодействует пользователь, а также - логикой, результат которой может быть хорошее настроение.

Проекты ◾ To-Do List App Стек технологий: React, Redux-Toolkit, Material UI

Описание:

• Задачи добавляются по кнопке Enter или же иконкой Add
• Удаление задач происходит по наведению на добавленную задачу, где появляется иконка Delete
• Каждая из задач имеет функцию изменения в ней текста иконкой Edit и сохранения - иконкой Save
• Можно завершить задачу по клику на CheckBox
• Также можно завершить или же наоборот оставить все задачи в списке иконкой LibraryAddCheck
• На статус панели есть отображение количества задач, которые остались ещё недоделаными
• На статус панели также есть Custom Radio - состояние задач: "Все", "Активные", "Завершённые"
• Там же присутствует возможность удалить все завершённые задачи из массива - Clear completed

Пример на ▶️ Codesandbox: todos | Репозиторий: https://github.com/GamaRayL/TODO

◾ Weather Today App Стек технологий: React (useState, useEffect, useCallback, useMemo)

Описание:

• Fetch данных из Weatherapi API (https://www.weatherapi.com/)
• Также поиск по городам проходит через массив Geonames API (https://www.geonames.org/), данные которого передаются в первый API
• Поиск создаёт список из 4х подходящих городов
• Изменение погоды влияет на изменение иконки (https://github.com/basmilius/weather-icons)
• Присутствует переключатель с Цельсия на Фаренгейт и обратно
• Индикаторы представлены в виде объектов массива, которые обёрнуты в функцию, которая принимает аргументы - это всё замыкается. Перебор происходит внутри компонента Indicator. Данный метод позволяет сделать чтение кода более лёгким
• Данные между компонентами передаются props`ами
• Некоторые вычисления внутри компонентов происходят с использованием унарных операторов
• Используются хуки, которые предотвращают повторения вычислений
• Также есть псевдонимы путей в jsconfig`e

Пример на ▶️ Codesandbox: *weather today app |* Репозиторий: https://github.com/GamaRayL/Weather-App

◾ Agency Портфолио (тестовое) Стек технологий: React (useCallback, useState, useEffect)

Описание:

• Использована Flexbox модель
• При изменении размера ширины экрана десктопный вариант заменяется мобильным и наоборот
• Мобильная верстка отображается при ширине менее 1040 px
• Десктопный вариант тянется по ширине максимум для отображения 4 колонок, после этого контент не тянется, увеличиваются только отступы по краям
• При выборе категории (Show ALL / Design / Branding / Illustration / Motion) отображаются только карточки этой категории, при выборе "Show all" - отображаются все карточки
• Нажатие кнопки "Load more" подгружает еще 9 карточек, а также возвращает прежнее количество по нажатию на "Return"
• Есть возможность выбрать карточку нажав на неё. Она подсвечивается. Повторное нажатие убирает подсветку
• Если выбрана карточка, то при нажатии кнопки "Del" карточка удаляется. Она также не отображается при смене категорий
• Нажатие на метку категории внутри карточки - отображает категорию этой карточки
• Также есть псевдонимы путей в jsconfig`e

Пример на ▶️ Codesandbox: *agency |* Репозиторий: https://github.com/GamaRayL/Weather-App

◾ Конвертер валют Стек технологий: React (useState, useEffect), Typescript, Material UI

Описание:

• Валюта конвертится при вводе цифр в поле "Ввести сумму"
• По стандарту валюта в которую конвертится зависит от языка браузера (взаимодействует с API, что преобразует код - языка в код валюты)
• Кнопка "Swap" меняет выбранные валюты между собой
• API взят с https://github.com/fawazahmed0/currency-api. Запросы проходят без лимита
• Флаг (в меню выбора валюты) получает класс из хардкода и отражает его
• При получении ошибки с API запроса обновляется страница и выводит ошибку

Пример на ▶️ Codesandbox: converter | Репозиторий: https://github.com/GamaRayL/simple-currency-converter