Skip to content

Vostafi69/unistory

Repository files navigation

Тестовое задание

на позицию Frontend/Solidity Developer

Создать приложение на React, сподключением криптокашелька и выводом информации с бэкэнда.

ReactTypeScriptViteTailwindCSSReduxReact Query

Содержание

Требования

Дизайн:

https://www.figma.com/file/8ejkTFQVtBPLcBIRvdzZI8?embed_host=notion&kind=file&node-id=0%3A1&t=Vohq9u7LNsNutjXD-1&viewer=1


  1. Сверстать 2 страницы в соответствии с дизайном страницы:
  • Главная страница
  • Страница участника
  1. Подключить функционал к страницам: При открытии страницы, уведомить пользователя о том, что потребуется расширение Metamask для браузера. Выполнить подключение криптокошелька Metamask при нажатии на кнопку CONNECT METAMASK в шапке. После подключения необходимо отображать адрес подключенного кошелька вместо кнопки.

    При заполнении формы, BETA TEST REGISTRATION загрузить данные для таблицы PARTICIPATION LISTING и отобразить ее, введенные данные добавить в начало таблицы. Новая запись должна содержать введенные name, email и адрес подключенного криптокошелька. Сделать удаление созданной записи из таблицы (другие не должны удаляться).

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


  • Использование TypeScript.
  • Должен подключаться кошелек Metamask. Для подключения рекомендуется использовать библиотеку wagmi.
  • Использовать роутер для перехода между страницами.
  • Будет преимуществом:
  • Сделать бесконечный список для таблицы (новые данные должны подгружаться с бэкенда).
  • Спроектировать приложение согласно FSD.
  • Использовать библиотеку для управления запросами (TanStack Query, RTK Query, SWR или подобную).
  • Развернуть приложение на одной из бесплатных платформ (Netlify, Github Pages или подобные).
  • Использование Tailwind для стилизации.

Технологии

Начало работы

Стянуть проект:

$ git clone https://github.com/Vostafi69/unistory.git

Перейти в директорию проекта:

$ cd unistory

Установить зависимости:

$ npm i

Запустить проект:

$ npm run dev

Примеры

Главная страница


Главная страница

Главная страница


Страница участника