onemore8762 / cards

Cards

View a demo

Description

This project was bootstrapped with Create React App.

Installation

yarn

Quick start

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

yarn test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

cards's Issues

ReadMe

logout

Tasks #2

1.1 📁Страница с колодами

• 1) Отрисовка таблицы с колодам
• 2) Реализовать добавление новой колоды
• 3) Реализовать возможность удаления колоды
• 4) Реализовать возможность редактирования колоды

1.2 📋 Страница с карточками

• 1) Отрисовка таблицы с карточками
• 2) Реализовать добавление новой карточки
• 3) Реализовать возможность удаления карточки
• 4) Реализовать возможность редактирования карточки

❗ CRUD операции реализовывать без модалок (просто хардкодим передаваемые данные). Модалки будут рассмотрены на 3-м занятии.

2.⚡ Задачи, которые важно реализовать, но если не успеваете, то данные задачи нужно поставить в приоритет и сделать их в процесс прохождения Пятницы
2.1. 📁 Страница с колодами:

• 1) Реализовать поиск по имени коды. Использовать debounce
  Визуально отличие debounce от throttle можете глянуть вот здесь​

• 2) Если при поиске ничего не нашлось, то показывать сообщение "Колоды с введенным название не найдены. Измените параметры запроса" или что то типо этого

• 3) Реализовать функционал (мои / чужие колоды).

• 4) Реализовать слайдер фильтрующий по количеству карточек в колоде.

  Чтобы не атаковать при каждом движения ползунка сервер делайте либо debounce, либо если будете использовать MUI slider метод onChangeCommited

• 5) Реализовать кнопку "Сбросить все фильтры"

• 6) Реализовать пагинацию

• 7) Реализовать сортировку колод (как минимум по одному полю)

• 8) Отображать иконки удаления / редактирования только для своих колод

• 9) Если в колоде нету карточек, то дизаблить кнопку обучения

2.2. 📋 Страница с карточками:

• 1) Поиск по вопросу. Также можно реализовать поиск по ответу (если посчитаете такой функционал нужным). Использовать debounce
• 2) Если при поиске ничего не нашлось, то показывать сообщение 'В данной колоде нету карточек удовлетворяющих поиску" или что-то типо этого
• 3) Реализовать сортировку карточек (как минимум по одному полю)
• 4) Реализовать пагинацию
• 5) В поле grade отрисовать звездочки (понадобится в 3-м уроке). Изменять на данной страницу grade не нужно.
• 6) Реализовать кнопку Back to Packs List. При клике на нее возвращаться на страницу с колодами

3.⚡ Третья степень важности. Данные задачи тоже необходимо реализовать, чтобы прокачать себя и сделать проект более функциональным и профессиональным

• 1) Реализовать обработку ошибку
• 2) Везде использовать loaders и дизаблить кнопки (компоненты), которые в момент работы с сервером не должны быть доступны
• 3) Обязательно смотрим network и избавляемся от дублирующихся одинаковых запросов (если они идут подряд и в этом нету никакого смысла)
• 4) Реализовать сохранение после перезагрузки принадлежности колод (мои / чужие)
• 5) При нажатии на имя колоды, должны перейти на колоду с карточками и вверху увидеть имя этой колоды, а не просто pack name
• 6) Находясь на странице с карточками перегрузить страницу и убедиться что подгружаются нужные карточки, подтягивается название колоды и ничего не ломается
• 7) Находясь на странице с карточками реализовать возможность редактирования / удаления / обучения колоды (смотреть дизайн: последний скрин, всплывашка)

refactor

• Formik registration

Loading

Profile

Forgot password

Check Email

admin-menu

Registration

Forgot password (Create new password)

• layout
• api

Login

Error404

Logout