khvalkoilya/rslang

Библиотеки, используемые в процессе разработки приложения

Webpack используется для компиляции модулей JavaScript.

"webpack": "^4.43.0",

---

Webpack-dev-server используется для быстрого запуска приложения

"webpack-dev-server": "^3.11.0"

---

Babel - это набор инструментов, который в основном используется для преобразования кода ECMAScript 2015+ в обратно совместимую версию JavaScript в современных и старых браузерах или средах.

"@babel/core": "^7.10.2"

---

ESLint - это инструмент для идентификации и составления отчетов по шаблонам, найденным в коде ECMAScript / JavaScript, с целью сделать код более согласованным и избежать ошибок.

"eslint": "^6.8.0"

---

Этот пакет предоставляет .eslintrc Airbnb в качестве расширяемой общей конфигурации, включая ECMAScript 6+ и React.

"eslint-config-airbnb": "^18.1.0"

---

Это библиотека JavaScript для создания пользовательских интерфейсов.

"react": "^16.13.1"

---

Данный пакет является точкой входа в DOM и средством рендеринга для React.

"react-dom": "^16.13.1"

---

Библиотека для использования Swiper в качестве компонента для React.

"react-id-swiper": "^3.0.0"

---

Swiper - это современный слайдер с ускорением переходов.

"swiper": "^6.0.1"

---

Chart.js - это простой способ бесплатно добавить на ваш сайт анимированные интерактивные графики.

"chart.js": "^2.9.3"

---

Это современная альтернатива для reset.css.

"normalize.css": "^8.0.1",

---

С помощью данного расширения можно записывать и сравнивать предполагаемые типы свойств, которые передаются компонентам. Prop-types проверит их соответствие и предупредит разработчика о наличии несовпадений.

"prop-types": "^15.7.2"

---

Prettier - средство форматирования кода. Он обеспечивает согласованный стиль, анализируя ваш код и перепечатывая его с собственными правилами, учитывающими максимальную длину строки, при необходимости упаковывая код.

"prettier": "^2.0.5"

---

Sass — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS-кода и упрощения файлов каскадных таблиц стилей.

"sass": "^1.26.8"

---

Библиотека для создания компонентов, отражающих прогресс

"@ramonak/react-progress-bar": "^1.0.3"

rslang's Issues

implement a card for training mode

You task is to create a card for training mode.
All this parameters can be established in the settings.

So you should create card with maximal settings, because your markup should have place for all settings.

This is started card when word isn't introduced yet.

After writing true word there will be shown fieldsm which i've draw by pencil

You task is to create markup with:

• input for english word, inputs' size will depends on its length
• text meaning on russian language
• text meaning on english language
• text example on russian language
• text example in english language
• translation of word
• transcription of word
• image of this word
• svgs, whitch user can disable/enable by click:
  • translation svg
  • audio svg
• button for delete this word from disctionary(Удалить)
• button for put this word in hard list(Сложно)
• button for checking this word(Далее)

create default settings and connect them with card. realize logic for card

you should create default settings for tests and for unauthorized people

create a design for pages

Your task is to draw a sketch of such pages:

• training mode with full settings(with image, all fields, etc.(for expamle check second image in #39))
• page with dictionary
• page for registration(create it such as sign in, but with nessesary inputs)
• page "about team"
• short-term statistics page
• long-term statistics page
• create design for mini-game "SpeakIT"
• create design for mini-game "Savanna"

Create all this pages relying on the technical specifications

create page About Us

create page with information about all team. on hover on persons' image information about person should change in appropriate filed

Create a UserMenu

Сomponent name: UserMenu(./UserMenu/UserMenu.jsx)
className: user__menu(./UserMenu/_userMenu.scss)

You should also add object with fields like: id, name, isVisible.
Is user is not registered and he click on button, there should be 2 buttons: Вход, Регистрация
Else there should be 3 buttons: Статистика, Настройки, Выход.

Button has 2 states: Guest, My profile.

• Button has 2 states: Guest, My profile..
• when you click on the button, it is expanded into a list of links.

create mini-game "Savanna"

You should create mini-game with all requirements from technial specification. You should also create markup of it for all media's

create variables with colors and fonts

Make it after merge branch [rslang-3] with webpack configuration into develop.
Create folder variables in src and add there .scss file with constants of: colors, fonts, font-sizes in your own branch. Show your variants for all team before.

implement markup for settings

create markup for settings page rely on the design

bring together header components

You should bring together header components, add logo. Create styles also for mobile and there move header to left part of screen and add burger button for opening this, logo will be in center there. Your burger menu should close by click on link and window(not menu). Your svg should rotate(90 deg) or becomes like a cross.

add logo to page

add svg logo in page. upload it in ./src/header/logo

create markup for mini-games page

you should create page with 6 links to mini-games, do it by desing from #7

Implement MainMenu

Implement menu for desctop and mobile:
You should also add object with fields like: id, name, isVisible, url, state.
Is user is not registered there should be 1 button: Мини-Игра
Else there should be 3 buttons: Тренировка, Словарь, Мини-Игры

Desctop version:

list of the menuItems (just <div>item</div>)

Mobile version:

It has to be Hamburger btn. If you press the btn menu appears. If you click on the hamburger btn again menu disappears.

Do not hesitate to contact me)

draw a sketch of a project

create start page SpeakIt

create start page SpeakIt

create __mixes.scss(./base/_mixes.scss)

@mixin media-(name-size) needed to adapt the application to the desired size.
dimension constants will be involved.
Usage examples will be commented out in the file.

implement container for main page

create a container to create the main part. Import it in App.jsx
Add backgrond for main page

create footer markup with react

Make it after merge variables to develop branch.
Make your own branch!
Create in ./src folder footer and work there. Create responsive footer with all requirements. You can create there link to page with information about team or links to all out github accounts. Fill it at one’s discretion

add backend for settings

you should create a backend for settings for individual person, rely on the technical specification

connect BE with FE on authorization part

you should connect BE with FE on authorization part.
it should finish this part

Create a UserMenuItem

Implement button for UserMenuItem. It can be underlined or not, it depends on passed props. You can press the button and do some mocking function.
You should check field isVisible and show necessary buttons for player.

draw a sketch of a project

create Dictionary page

this page should contain 3 fields: Удаленные, Сложные, Выученные.
you should create markup for this and get data from backEnd

get data from back end

create function for get data of objects with information for our app.
Clone repository with images and audios.
Create api for getting images and audios by their urls.
Then put all nesessary information in the array, which later will used for filling cards in train mode

restore variables

restore variables, because last PR delete it

create constants of user menu items

create file in variables. These consts will import in UserManu part

create mini-game "Sprint"

You should create full game, rely on the technical specification

create constants of main menu items

create folder with file of constants in the root. These consts will import in MainMenuItem

create markup for registration page

you should create markup for unauthorized person, form for registration

configure webpack.config.js

create mini-game speakIT

follow the example of the task https://github.com/rolling-scopes-school/tasks/blob/master/tasks/rslang/speakit.md
create it in colors and fonts of our website, since everything should be in the same style

Implement MainMenuItem

Implement button for MenuItem. It can be underlined or not, it depends on passed props. You can press the button and do some mocking function.
You should check field isVisible and show necessary buttons for player.

without any decoration

Please describe your solution or idea.

Do not hesitate to contact me)

add markup for sign in page

you should create markup for unauthorized person, form for sign in

implement progress bar for card

you should add progress bar under card. it should consist of number of actual card, progress bar,
which will fills with the increase of number(actual card) and number of max words for today. default number of max words is 20.

draw a sketch of a project

create buttons for change card

Your function should accept array of data for cards.
Your task is to create buttons < and > for changing cards.
You should implement verification that the actual page is not less than 0 and not more than the maximum number of words.(use useState for tracking actualPage and for changing it)
Your function should import function Card and call it between buttons.
You should transfer to function of creating card all needed fields from array.
And at the end your function should return to Main something like that:

create input for train mode

you should create input in size of inner word

create Demo page

Create page where will information about our website
it should also has video element with video from youtube. this video should be run from this page

Init webpack

• init npm
• install webpack
• install webpack-cli
• install webpack-dev-server
• install html-webpack-plugin
• install clean-webpack-plugin
• install copy-webpack-plugin
• install cross-env
• create webpack.config.js
• install react
• install react-dom
• install @babel/core
• install babel-loader

create design for all other pages

create design for

• create full statistics(as example use screen from technical specification)(add new inset: 1 - all learned words, 2 - graphs)
• add inset to dictionary with all words
• create markup for mini-game "Аудиовызов"
• create markup for mini-game "Спринт"
• create markup for mini-game "English-puzzle"
• promo page of our website

Rely on techical specification

create markup for card in training mode

create markup for card in training mode, add styles to all fields there, create it for all media

create constant of default words

create constant with objects with information about some words.
it is need for unauthorized training and for testing in mini-games

draw a sketch of a project

create backend for sign in

you should create backend for unauthorized person, accept values ​​from a form with a login and password and realize connection with server

create markup for mini game "speakIT"

You should create markup for 'speakIT" for all media's

Install dependencies for webpack

• install eslint
• init eslint
• install eslint-loader
• install eslint-config-airbnb
• install prettier
• install prettier-webpack-plugin
• install style-loader
• install css-loader
• install sass-loader
• install file-loader
• install mini-css-extract-plugin
• install optimize-css-assets-webpack-plugin
• install terser-webpack-plugin
• install @babel-preset-react
• install @babel/preset-env
• install @babel/polyfill(dependencies)
• create .eslintrc.js
• install babel-eslint

add script for fixing all files by eslint

add setting to webpack for fixing all files by command in terminal

Connection Swiper to Main.

1.Connection Swiper to Main.
2. data transfer to Swiper.
3. correct Swiper.

create backend for registration

you should create backend for unauthorized person, accept values ​​from a form with a login and password and realize connection with server

create header markup with react

Make it after merge variables to develop branch.
Make your own branch!
Create in ./src folder header and work there. Create responsive header with all requirements for guest and for user.

catching errors in authorization

you should catch all errors in registration and sign in. Get out them on the screen for user.