elrouss / spanish-with-anna

Учебный портал для изучения испанского языка, заказа перевода текстов и получения экскурсионных услуг петербургского испаниста Анны Добкес (проект заморожен)

Проект: "Español con Anna" 🇪🇸

Оглавление

1. Описание проекта
2. Стек технологий
3. Установка и запуск приложения в локальном репозитории
4. Процесс создания
5. Функционал
6. Наша команда
7. Статус проекта
8. Обратная связь

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

Проект создается по заказу Анны Добкес - известного преподавателя испанского языка в Санкт-Петербурге, переводчика, сертифицированного гида. В конечной реализации он представляет собой приложение с регистрацией и авторизацией пользователей для приобретения онлайн-курсов, занятиями студентов в личном кабинете, заказом услуг перевода и экскурсий. Находится на этапе разработки в 3 ветках: development, а также frontend и backend (подробнее о процессе работы - ниже).

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

Deploy
Frontend: появится позже
Backend: появится позже

Техническое задание: https://docs.google.com/document/d/1ewrKErNPRKoIIg7E7H9IAvaD_E07nrKHrV8pREKWmdA/edit#heading=h.cp9sw0ch9syr
Макет: https://www.figma.com/file/r3wbGorv7dpmWZiUJS8j09/Spanish-courses_Espanol-con-Anna_ORIGINAL?type=design&node-id=1200-405&mode=dev

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

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

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

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

1. git clone https://github.com/elrouss/spanish-with-anna.git - клонировать репозиторий на свое устройство (HTTPS)
2. git checkout -b development origin/development - перейти в ветку разработки
3. frontend:
   3. 1 cd frontend - перейти в папку frontend
   3. 2 npm i - установить зависимости (предварительно проверить наличие Node.js командой node -v, а также - NPM командой npm -v; в случае необходимости скачать и установить Node.js по этой ссылке)
   3. 3 npm run dev - запустить приложение и открыть в любом браузере по адресу http://localhost:3000/
4. backend:
   4. 1 cd backend - перейти в папку backend
   4. 2 скачать и установить Python по этой ссылке
   4. 3 python -m venv venv (для windows), python3 -m venv venv (для linux/macOS) - создать виртуальное окружение
   4. 4 source venv/Scripts/activate активировать виртуальное окружение на Windows; source venv/bin/activate MacOS/Linux
   4. 5 pip install -r requirements.txt установить зависимости
   4. 6 cd spanish_with_anna - перейти в папку spanish_with_anna
   4.7 в папке backend создайте файл .env по примеру example.env
   4.8 python manage.py makemigrations - создать миграции
   4.9 python manage.py migrate - применить миграции
   4.9 python manage.py runserver - запустить приложение и открыть в любом браузере по адресу http://127.0.0.1:8000/
   4.10 http://127.0.0.1:8000/api/docs/ доступные эндпоинты

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

4. Процесс создания

Работа выполнена в несколько этапов (каждый из них протестирован, выявленные баги - исправлены):

1. Верстка главной страницы на desktop с интерактивными элементами
2. Верстка форм регистрации, авторизации и обратной связи на десктоп с подключением серверной логики

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

5. Функционал

• Интерактивные элементы:
  • Выпадающее меню
  • Карусель с рандомной генерацией карточек на основе сформированного массива данных
  • Аккордеон

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

6. Наша команда

Наталья Дангаева Project Manager 💼	Борис Зашляпин TeamLead, Frontend 👨‍💻	Александр Товченников Frontend 👨‍💻	Константин Филяев Frontend 👨‍💻	Светлана Логвинова Backend 👩‍💻	Ольга Мелихова Backend 👩‍💻	Кристина Колабышева UI/UX Designer 🎨
Наталья Андреева Tester 🐞	Ксения Абдуллина Tester 🐞	Анастасия Пастернак Tester 🐞

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

7. Статус проекта

В разработке

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

8. Обратная связь

В случае выявления ошибок или предложений по улучшению нашего проекта просим создать здесь заметку с соответствующим тегом. Мы будем крайне признательны за любую обратную связь 🤗

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

spanish-with-anna's Issues

Порядок свойств в классовых селекторах (frontend)

Ссылка на источник

frontend: describe global styles and import them in index.scss

1. Variables:

• Colors
• Typography

2. Placeholders (if is needed on this stage)
3. Mixins

• min. for typography

4. Reset default styles (h, p, a, button, etc.)

feat: написать сериализатор/сериализаторы для фидбека

feat: описать модель курса

frontend: mark up component Intro (desktop)

1. I think that heading Espanol con Anna should be made as h1;
   con will be pehrhaps span and positioned by absolute
2. "Начать учиться" is anchor link, with smooth scrolling to the next section

init: создать приложение api

testing: layout of main page (desktop)

• Comparing with layout (colors, fonts, dimensions etc.)
• Interactive elements
• Pixel Perfect

frontend: mark up component InfoOnlineCourses (desktop)

Most likely buttons lead to a new page with description of each course. So, here we should make a dynamic routing and buttons must be marked up as Link (Next.js)

There should be also a single component InfoOnlineCourse

frontend: mark up Feedback for desktop

frontend: mark up Registration for desktop

NB! For this component and Authorization should be the general one - Entry

frontend: mark up component Footer (desktop)

frontend: mark up component SignupClasses(desktop)

init: создать приложение Courses

frontend: layout - tablet header (with modal)

Init: create frontend dev deployment

It seems that the best variant for Next.js dev deployment will be Vercel.

NB! Github Actions/Pages wont't build the project due to SSR rendering

init: создать django-project

feat: написать фильтры для обратной связи

feat: описать модель кастомного пользователя

frontend: mark up component Button

The component should be made with Link (Next.js) and wait for classSelector from globals, link/url/href, text as children

frontend: mark up component ReviewsStudents (desktop)

frontend: mark up Authorization for desktop

NB! For this component and Registration should be the general one - Entry

refactor: change animation of dropdown menu

The menu should go out of the header

frontend: check tab controllers for availability (esp. focus trap in modals)

1. Fix focus in arrows in accordion when they are animated

frontend: upload Formik and Yup and create general components for forms

Create branch /forms from development

general: write README

frontend: mark up component BenefitsStudying (desktop)

It seems that content is not centered -> waiting for the designer's comment

frontend: layout - tablet - intro

frontend: add micro schemes for semantic template

Useful resources:

• https://gist.github.com/paulisloud/1966bf21c70458e058b38cda6bfb9685
• https://prismic.io/docs/schema-org-nextjs
• https://loudnoises.io/blog/adding-schema-data-to-next-js-sites
• https://medium.com/@joemanfong/how-to-combine-multiple-structured-data-markup-schemas-on-one-page-react-next-js-1ea6faf78111?source=rss------nextjs-5

feat: написать сериализаторы для пользователей (регистрация/смена-восстановление пароля)

frontend: upload custom fonts

Custom fonts are uploaded with Next.js google fonts feature. It works for paragraphs etc., but not for text inside Links. It seems to be loaded, but user's local fonts are loading on the first place.

Need to find a solution

Official documentation: https://nextjs.org/docs/pages/building-your-application/optimizing/fonts

frontend: mark up component BackgroundDecorative (desktop)

I think it can be made as one picture. On tablet/mobile it can be changed on the other one

frontend: layout - tablet - facts

init: add a rule/dependencies (?) in eslint configs to ignore the problem 'unable to resolve path' with "@/*"

Actually paths work fine, but eslint doesn't like this rule. Need to find a solution or use syntax "../"

frontend: mark up components Header and Dropdown (desktop)

NB! Registration and Authorization buttons should be made as Link (Next.js)

Change email in footer

This is the correct one: [email protected]

frontend: layout - tablet - courses

init: настроить окружение frontend

Настроено:

1. Next.js;
2. Eslint;
3. Prettier;
4. SCSS (Sass);
5. Sharp;
6. Намечена структура папок в src

frontend: mark up component Facts (desktop)

The table seems to be not positioned in center: waiting for a designer's comment

refactor: change animation of accordion and check block Facts with Pixel Perfect

• Opening/closing
• Arrows
• + check indents with Pixel Perfect

init: настроить окружение backend

Django
Dotenv

Content in reviews (if small -> no button)

frontend: synchronize desktop main page

• General Styleguide
• Pixel Perfect
• W3C
• variables for z-index

frontend: mark up component ServicesTranslation (desktop)

feat: написать модель Feedback

init: создать приложение users

frontend: describe validation errors in object

frontend: upload assets

These files should be added:

1. fonts;
2. images;
3. icons (template for .svg see here)

NB! Not to forget resizing images: https://tinypng.com/

frontend: describe HEAD

META

1. title
   Испанский язык с Анной — учись легко и интересно

2. description
   Онлайн-уроки испанского языка легко и с удовольствием. Здесь вы можете подобрать курсы, идеально подходящие под ваш график и ваши потребности. Занимайтесь индивидуально с преподавателем, в группах или самостоятельно. Начните учиться уже сейчас, вас ждёт интересное путешествие!

3. key words
   испанский, испанский язык, испанский онлайн, переводчик с испанского, уроки испанского

frontend: mark up component FAQ (desktop)

A single component can be made, e.x., Tab

Основные правила Git

1. Система контроля версия (Git)

• Ссылка на документацию:
  https://git-scm.com/book/ru/v2/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5-%D0%9E-%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B5-%D0%BA%D0%BE%D0%BD%D1%82%D1%80%D0%BE%D0%BB%D1%8F-%D0%B2%D0%B5%D1%80%D1%81%D0%B8%D0%B9

2. Требования к именам коммитов

Ссылка на гайдлайн: https://www.conventionalcommits.org/ru/v1.0.0/

3. Разработка

• Ведется в ветках frontend и backend

4. Открытие pull requests и merge

• При открытии коротко пишем, что сделано (в этом поможет история коммитов) и назначаем 1-2 ревьюеров из своей команды. После проверки ревьюер может замерджить ветку, если у него нет вопросов