https://github.com/elrouss/at-work

Отзывчиво-адаптивный интерфейс двухстраничного приложения с карточками пользователей
https://github.com/elrouss/at-work

elrouss html5 react redux scss typescript vite

Last synced: 8 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/elrouss/at-work
• Owner: elrouss
• Created: 2024-04-12T05:28:06.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-04-12T15:06:50.000Z (8 months ago)
• Last Synced: 2024-10-28T03:22:29.205Z (about 2 months ago)
• Topics: elrouss, html5, react, redux, scss, typescript, vite
• Language: TypeScript
• Homepage: https://elrouss.github.io/at-work/
• Size: 1.81 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Карточки пользователей




  

    

  





  

    Оглавление

    


      
Краткое описание проекта

      
Стек технологий

      
Установка и запуск приложения

      
Особенности работы приложения

    

  



1. Краткое описание проекта

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


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




Макет: https://www.figma.com/file/ZUhwEwudliE4AF3JMDEDkj/%D0%A2%D0%B5%D1%81%D1%82%D0%BE%D0%B2%D0%BE%D0%B5-%D0%B7%D0%B0%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5-At-Work?type=design&node-id=0-1&mode=design![image](https://github.com/elrouss/at-work/assets/108838349/70b283fe-5c54-4847-aa98-4af386eb5138)




Деплой: https://elrouss.github.io/at-work/




(к оглавлению)


2. Стек технологий



  

  

  

  

  

  

  



(к оглавлению)


3. Установка и запуск приложения


1. `https://github.com/elrouss/at-work.git` - клонировать репозиторий (HTTPS)

2. `npm i` - установить зависимости

4. Добавить в корне проекта файл `.env` и скопировать в него содержимое `.env.example`

5. `npm run dev` - запустить приложение и перейти по ссылке `http://localhost:5173/at-work/`

(к оглавлению)


4. Особенности работы приложения


- На странице выводится 6 карточек с информацией о пользователях (все фотографии - моковые данные). При клике на иконку их возможно скрыть, архивировать и отредактировать на отдельной странице по динамическому роуту. На странице редактирования добавлена кастомная валидация данных, которая отрисовывает ошибку под текстовым полем в случае невалидности формы. После сохранения открывается модальное окно, которое автоматически закрывается через 4 секунды. Данные обновляются на стороне клиента, но не сохраняются после перезагрузки приложения

- Для корректной работы роутов при деплое на GH Pages используется Hash Router

- Отзывчиво-адаптивный интерфейс, рассчитанный на мобильные устройства (от 320px), планшеты и настольные компьютеры

(к оглавлению)