Skip to content

FrankJaskon/portfolio

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 

Repository files navigation

Version
1 EN
2 RU
EN

Projects

Project Links:

Contents

Project
1 Presentation Mobile App
2 NPM Package for Locales
3 Authentication Implementation
4 News Platform
5 Tattoo Shop Landing Page

Presentation Mobile App for demonstrating the capabilities of a multichannel marketing product based on accurate data.

Technologies Used:

  • JS, React-native, TypeScript, Axios, Yarn, Yarn workspaces, Eslint, Prettier, webpack, metro, FSD, emotion.

Project Goals:

  • Develop a presentation app for Android demonstrating the functionality of the provided SDK.
  • Implement business requirements within specified deadlines.
  • Create an easily extensible modular project using a monorepo structure.
  • Develop UI-kit components using emotion.
  • Style the application according to the design from Figma.
  • Implement routing within the application.
  • Localize the application.
  • Develop themes and allow adding new themes to the application.

Achievements:

  • Built the app from scratch and implemented the planned functionality within tight deadlines.
  • Acquired basic skills in mobile application development using React-native for Android.
  • Designed and implemented a scalable and maintainable application architecture.
  • Independently configured and implemented a monorepo structure using Yarn Workspaces.
  • Demonstrated the ability to independently solve assigned tasks, gather missing information, and break down complex tasks into subtasks.
  • Developed a UI-kit component base from scratch for mobile applications.

NPM Package for automatic extraction of locales at the fragment level and formation of unified application-level locales.

Project Goals:

  • Optimize translation handling time and improve development convenience.
  • Form locales based on default messages.
  • Allow both common translation files and fragment-based files for working with translations at the component level.

Achievements:

  • Developed and successfully applied in several production projects.
  • Reduced time costs for organizing translations.

Authentication Implementation and image handling demonstration.

Technologies Used:

  • JS, React, NextJS, TypeScript, CSSModules, NPM, Webpack, Babel, FSD, RTK, RTK QUERY, STORYBOOK, Eslint, Prettier.

Project Goals:

  • Plan and organize user authentication using JWT Tokens.
  • Implement authentication via Google service.
  • Implement authentication via GitHub service.
  • Handle images, including user avatar customization.
  • Develop a UI-kit for the project.
  • Localize the application.

Achievements:

  • Successfully applied Agile methodology skills. Created tasks, estimated complexity and deadlines, and participated in task distribution within the team.
  • Demonstrated strong communication skills within the team, solving non-standard situations that arose during development.
  • Completed tasks within the planned deadlines.
  • Applied skills in working with Jira and Slack.
  • Implemented the frontend part of the application's authentication. Participated in discussions of concepts and implementation possibilities. Achieved token isolation to prevent interference at the application level.
  • Conducted code reviews and evaluated the solutions of other developers.

News Platform.

Technologies Used:

  • JS, React, TypeScript, CSSModules, NPM, Webpack, Babel, FSD, RTK, RTK QUERY, Redux Thunk, Axios, JEST, RTL, CYPRESS, STORYBOOK, Eslint, Prettier.

Project Goals:

  • Organize a maintainable and scalable codebase using Feature Sliced Design architecture.
  • Display the user interface and improve user experience with the SPA application.
  • Manage application state using Redux Tool Kit.
  • Demonstrate working with TypeScript.
  • Demonstrate working with APIs using RTK Query and Redux Thunk.
  • Develop a UI-kit for the project.
  • Implement routing within the application, including protected routes.
  • Localize the project.
  • Support multiple themes.
  • Apply code splitting in practice.
  • Support multiple codebases with feature_flag switching.
  • Optimize initial application load and bundle size.
  • Implement asynchronous loading of components, translations, reducers, images, and libraries.
  • Demonstrate working with Storybook.
  • Demonstrate project configuration from scratch.
  • Demonstrate working with environment variables.
  • Demonstrate working with testing environments such as Jest, React Testing Library, Cypress.

Achievements:

  • Acquired skills in working with high-load SPA applications.
  • Acquired skills in comprehensive codebase test coverage.
  • Acquired skills in working with StoryBook.
  • Acquired and successfully applied FSD architecture in practice.
  • Successfully configured a React application from scratch.
  • Acquired skills in independently solving tasks.
  • Successfully applied code splitting and lazy loading practices for components, reducers, libraries, images, and translations.

Tattoo Shop Landing Page.

Technologies Used:

  • JS, HTML, CSS, Babel, ESLint

Project Goals:

  • Demonstrate basic skills in working with native JavaScript.
  • Demonstrate proficiency in HTML and styling using CSS.
  • Develop custom interactive elements using JavaScript.

Achievements:

  • Achieved a responsive interface using native HTML, CSS, and JS technologies.
  • Implemented responsive CSS animations.

RU

Проекты

Ссылки на проекты:

Содержание

Проект
1 Презентационное мобильное приложение
2 NPM пакет для локалей
3 Реализация аутентификации
4 Новостная площадка
5 Лэндинг тату-магазина

Презентационное мобильное приложение для демонстрации возможностей работы продукта мультиканального маркетинга на основе точных данных.

Применяемые технологии:

  • JS, React-native, TypeScript, Axios, Yarn, Yarn workspaces, Eslint, Prettier, webpack, metro, FSD, emotion.

Решения в проекте направлены на:

  • Написание презентационного приложения для Android, демонстрирующего функционал работы с готовым SDK.
  • Реализацию бизнес-требований приложения в заданные сроки.
  • Создание легко расширяемого модульного проекта с применением монорепозиторной структуры.
  • Создание UI-kit компонентов с применением emotion.
  • Стилизацию приложения в соответствии с дизайном из Figma.
  • Роутинг по приложению.
  • Локализацию приложения.
  • Формирование темы и возможности добавления новых тем в приложении.

Достижения:

  • Создал приложение с нуля, реализовал запланированный функционал в лимитированные сроки.
  • Приобрёл базовые навыки работы с мобильными приложениями с использованием React-native для Android.
  • Проработал и задал расширяемую и легко поддерживаемую архитектуру приложения.
  • Самостоятельно сконфигурировал и реализовал монорепозиторную структуру с применением Yarn Workspaces.
  • Продемонстрировал умение самостоятельно решать поставленные задачи, собирать недостающую информацию, разбивать сложную задачу на подзадачи.
  • Сформировал базу компонентов UI-kit с нуля под мобильные приложения.

NPM пакет для автоматического извлечения локалей на уровне фрагментов и формирования единых локалей уровня приложения.

Решения в проекте направлены на:

  • Достижение оптимизации времени работы с переводами и удобство разработки.
  • Формирование локали на основе default messages.
  • Возможность иметь как общие файлы переводов, так и разбитые на фрагменты для возможности работы с переводами на уровне отдельных компонентов.

Достижения:

  • Реализовал и успешно применил на нескольких production проектах.
  • Сократил затраты времени на организацию переводов.

Реализация аутентификации, демонстрация работы с изображениями.

Применяемые технологии:

  • JS, React, NextJS, TypeScript, CSSModules, NPM, Webpack, Babel, FSD, RTK, RTK QUERY, STORYBOOK, Eslint, Prettier.

Решения в проекте направлены на:

  • Продумывание и организацию аутентификации пользователя с применением JWT Tokens.
  • Подключение аутентификации через сервис Google.
  • Подключение аутентификации через сервис GitHub.
  • Работа с изображением. Кастомизация аватарки пользователя.
  • Формирование UI-kit под проект.
  • Локализация приложения.

Достижения:

  • Успешно применял навыки работы по методологии Agile. Формировал задачи, оценивал сложность и сроки выполнения задач, участвовал в распределении задач в команде.
  • Показал хорошие навыки коммуникации в команде, умение разбираться с нестандартными ситуациями, возникающими во время разработки.
  • Решал задачи в запланированные сроки.
  • Применил навыки работы с Jira, Slack.
  • Реализовал фронтенд часть аутентификации приложения. Участвовал в обсуждении концепций и возможностей реализации. Добился изоляции токенов, чтобы предотвратить вмешательство на уровне работы приложения.
  • Проводил код-ревью и оценку решений других разработчиков.

Новостная площадка.

Применяемые технологии:

  • JS, React, TypeScript, CSSModules, NPM, Webpack, Babel, FSD, RTK, RTK QUERY, Redux Thunk, Axios, JEST, RTL, CYPRESS, STORYBOOK, Eslint, Prettier.

Решения в проекте направлены на:

  • Организацию удобно поддерживаемой и масштабируемой кодовой базы с применением Feature Sliced Design архитектуры.
  • Отображение пользовательского интерфейса. Улучшение пользовательского опыта при работе с SPA приложением.
  • Управление состоянием приложения с использованием Redux Tool Kit.
  • Демонстрацию работы с TypeScript.
  • Демонстрацию работы с API. Использование RTK Query, Redux Thunk.
  • Формирование UI-kit под проект.
  • Роутинг по приложению. Защищённые маршруты.
  • Локализацию проекта.
  • Поддержку нескольких тем.
  • Практическое применение Code splitting.
  • Поддержка нескольких кодовых баз. Переключение между кодовыми базами по feature_flag.
  • Оптимизацию первой загрузки приложения и размера бандла.
  • Реализация асинхронной загрузки компонентов, переводов, редьюсеров, изображений, библиотек.
  • Демонстрацию работы с Storybook.
  • Демонстрация конфигурации проекта с нуля.
  • Демонстрация работы с переменными окружения.
  • Демонстрацию работы с тестовыми окружениями, такими как Jest, React Testing Library, Cypress.

Достижения:

  • Приобрёл навыки работы с высоконагруженными SPA-приложениями.
  • Приобрёл навыки работы с комплексным покрытием тестами кодовой базы.
  • Приобрёл навыки работы с StoryBook.
  • Приобрёл навыки и успешно применил на практике FSD архитектуру.
  • Успешно сконфигурировал React приложение с нуля.
  • Приобрёл навыки самостоятельного решения задач.
  • Успешно применил практики code splitting и lazy loading для компонентов, редьюсеров, библиотек, изображений и переводов.

Лэндинг тату-магазина.

Применяемые технологии:

  • JS, HTML, CSS, Babel, ESLint

Решения в проекте направлены на:

  • Демонстрацию базовых умений работы с нативным JavaScript.
  • Демонстрацию владения HTML. Умение работать с стилизацией, с использованием CSS.
  • Написание кастомных интерактивных элементов при помощи JavaScript.

Достижения:

  • Добился отзывчивого интерфейса с применением нативных технологий HTML, CSS, JS.
  • Реализовал отзывчивые CSS анимации.

About

Fronted portfolio

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published