Skip to content

yulyaolshanska/petly-project-frontend

BranchesTags

Repository files navigation

Petly - Take good care of your small pets

https://team-project-petly.netlify.app/

Опис

Petly - додаток, який допомагає піклуватися про своїх маленьких вихованців. У ньому ви зможете зберігати інформацію про своїх улюбленців, переглядати список тварин, яких можна придбати, або шукати новини, пов'язані з життям братів наших менших.

Зміст та структура проекту:

Проект виконаний за допомогою react.js та node.js для мобільної, планшетної та пк версій. Він складається з:

  • Header - шапка додатку,
  • RegisterPage - сторінка реєстрації,
  • LoginPage - сторінка входу,
  • OurFriendsPage - сторінка списку партнерів,
  • NewsPage - сторінка новин,
  • NoticesPage - сторінка оголошень,
  • UserPage - сторінка користувача.

1. Header

Компонент рендерить:

  • Logo - перенаправляє на сторінку home
  • Navigation з компонентами:
    • Nav - загальна навігація
    • UserNav - навігація для АВТОРИЗОВАНОГО користувача
    • AuthNav - навігація для НЕАВТОРИЗОВАНОГО користувача

На планшетній і мобільній версіях компонент Nav, UserNav, AuthNav відображаються в бургер меню. Логотип додатку переносить користувача в неймовірний світ сторінки Home .

2. RegisterPage | маршрут - /register

  • AuthForm - форма реєстрації користувача

Сторінка реєстрації містить в собі компонент AuthForm, яка містить форму з першою частиною полів форми та кнопкою Next і елементом навігації Login.

  • кнопка Next - відображає в формі наступну частину полей форми, а також кнопки Register та Back
  • кнопка Back - повертає користувача на попередні поля форми
  • кнопка Register - реєструє користувача
  • елемент навігації Login - переадресовує користувача на сторінку LoginPage.

Всі поля форми валідуються і виводять користувачу відповідну інформацію в випадку, якщо введене значення не валідне. Після реєстрації користувач повинен бути переадресований на сторінку UserPage.

3. LoginPage | маршрут - /login

  • AuthForm - форма входу користувача

Сторінка логінізації містить в собі компонент AuthForm, яка містить в собі форму з полями логінізації та кнопкою Login і елементом навігації Register.

  • кнопка Login - авторизує користувача
  • елемент навігації Register - переадресовує користувача на сторінку RegisterPage.

Всі поля форми валідуються і виводять користувачу відповідну інформацію в випадку, якщо введене значення не валідне. Після рееєстрації користувач бубе переадресований на сторінку UserPage.

4. OurFriendsPage | маршрут - /friends

Сторінка отримує дані з бекенда і відображає список контактної інформації про партнерів. Клік по елементу з робочими годинами відкриває вікно з переліком робочих годин.

5. NewsPage | маршрут - /news

Сторінка містить:

  • поле для пошуку новини по ключовому слову
  • список новин, які отримує з бекенда.

Клік по лінку ReadMore на карточці з новиною переадресовує користувача на ресурс з новиною на окремій вкладці браузера.

6. NoticesPage | маршрут - _/notices

Під час першого входу на сторінку рендериться список оголошень з продажу. Сторінка містить компоненти:

  • NoticesSearch - форму пошуку. Містить поле для пошуку(фільтрації) оголошення в категорії по вмісту ключового слова в заголовку оголошення

  • NoticesCategoriesNav - блок навігації. Компонент рендерить блок навіції з маршрутами:

    • /notices/sell - відкриває на сторінці компонент NoticesCategoryList зі списком оголошеннь з продажу
    • /notices/lost_found - відкриває на сторінці компонент NoticesCategoryList зі списком оголошеннь з знайшов/шукаю
    • /notices/in_good_hands - відкриває на сторінці компонент NoticesCategoryList зі списком оголошеннь з віддам в добрі руки.

    АВТОРИЗОВАНИЙ користувач: Компонент рендерить блок навігації з маршрутами:

    • /notices/favorite - відкриває на сторінці компонент NoticesCategoryList зі списком оголошеннь доданих до обраних
    • /notices/own - відкриває на сторінці компонент NoticesCategoryList зі списком оголошеннь створених користувачем

  • NoticesCategoriesList - список оголошень. Рендерить список всіх оголошень відповідної категорії - NoticeCategoryItem, данні по яким отримує з бекенду

    • NoticeCategoryItem - Містить елемент списку оголошень, карточку одного оголошення з кнопками AddToFavorite, LearnMore. Клік по кнопці:

      • AddToFavorite:
        • якщо користувач АВТОРИЗОВАНИЙ - додає оголошення в обрані, або показує кнопку для видалення з обраних, якщо таке повідомлення там вже збережене,
        • якщо користувач НЕАВТОРИЗОВАНИЙ, виводить повідомлення типу нотіфікація з інфо, про те що потрібно авторизуватися для використання даного функціоналу
      • LearnMore - відкриває користувачу модалку з детальним описом даного оголошення - NoticeModal.

    • NoticeModal - Компонент рендерить модалку з повним описом відповідного оголошення та кнопками AddToFaforite, Contact

      • AddToFavorite
      • Contact - при натисканні переадресовує користувача на мобільний пристрій для виконання телефонного дзвінка по номеру користувача, що створив оголошення. Модалка закривається по кліку на кнопку закриття модалки, клік по бекдропу, а також клік по Escape.

      АВТОРИЗОВАНИЙ користувач: Компонент рендерить кнопку для видалення оголошення, якщо дане оголошення створене цим користувачем. Клік по кнопці видаляє оголошення.

  • AddNoticeButton - Рендерить кнопку для:

    • АВТОРИЗОВАНОГО користувача клік по кнопці відкриває компонент AddNoticeModal.

      • AddNoticeModal рендерить модалку для створення нового оголошення з першою частиною полів форми та кнопками Next і Canсel.

        • Next - відображає в формі наступну частину полей форми, а також кнопки Done та Back
        • Back - повертає користувача на попередні поля форми
        • Done - виконує сабміт форми

        Всі поля форми обов'язкові до заповнення

    • НЕАВТОРИЗОВАНОГО користувача клік по кнопці виводить повідомлення типу нотіфікація з інфо про те, що потрібно авторизуватися для використання даного функціоналу.

7. UserPage | маршрут - /user

Компонент рендерить сторінку з компонентами

  • UserData - Компонент рендерить контактну інформацію користувача в полях UserDataItem з можливістю редагувати дані в полях
    • UserDataItem - Рендерить елемент, який виводить дані користувача, а також кнопку для редагування цих даних.
  • Logout - Компонент рендерить кнопку для виходу користувача з облікового запиту
  • PetsData - Компонент рендерить кнопку для додавання карточки з твариною та список відповідних карточок - PetsList Клік по кнопці відкриває модалку з формою для створення карточки тварини - ModalAddsPet
    • PetsList - Компонент рендерить карточки з описом тварини. Карточка має кнопку для видалення.
    • ModalAddsPet - Компонент рендерить модалку з формою для створення картки з даними про тварину користувача. Всі поля для вводу обов'язкові для заповнення

Налаштування проекту

npm install
npm start

Маршрутизація

  • /news - публічний-необмежений, переадресує на сторінку NewsPage,
  • /notices - публічний-необмежений, переадресує на сторінку NoticesPage
  • /friends - публічний-необмежений, переадресує на сторінку OurFriendsPage
  • /register - публічний-обмежений, переадресує на сторінку RegisterPage
  • /login - публічний-обмежений, переадресує на сторінку LoginPage
  • /user - приватний, переадресує на сторінку UserPage

Backend-розробка

Petly-backend


https://petly-backend-production.up.railway.app/auth/signup     post - реєстрація користувача (потребує  password, email- обов'язкові,  name, city, phone, birthday), потребує передачу даних для оновлення за допомогою body/raw/JSON {name,email, }

https://petly-backend-production.up.railway.app/auth/login      post - логінізація користувача (потрубує email, password), потребує передачу даних для оновлення за допомогою body/raw/JSON {name,email, }

https://petly-backend-production.up.railway.app/auth/logout     get -  вихід з аккаунту зареєстрованого юзера

https://petly-backend-production.up.railway.app/auth/current    get  - віддає данні користувача при вже наявному токені

----------------------------------------------------------------------------------------------

https://petly-backend-production.up.railway.app/friends  -      get -  всі дані з друзями /доступна пагінація (default {page = 1, limit = 10})

----------------------------------------------------------------------------------------------

https://petly-backend-production.up.railway.app/news -          get - всі дані з новинами /доступна пагінація (default {page = 1, limit = 10})

----------------------------------------------------------------------------------------------

https://petly-backend-production.up.railway.app/notices            get  - всі оголошення / доступна пагінація (default (page = 1, per_page = 15))/ (обрати за категорією з доступних: ["sell", "lost_found", "in_good_hands"], за допомогою params)

https://petly-backend-production.up.railway.app/notices/:id        get  - детальна інформація по оголошенню

https://petly-backend-production.up.railway.app/notices/:category  post -  додавання оголошення (потребує name,title,birthday,breed,male,location,comments - обов'язково, price, avatar, category ), потребує передачу даних за допомогою body/form-data/text (key=name,key=title, ...) body/form-data/file key=avatar; обрати за категорією з доступних: ["sell", "lost_found", "in_good_hands"] query (notices?category=in_good_hands);

https://petly-backend-production.up.railway.app/notices/:id        delete - видалення оголошення за його id

-----------------------------------------------------------------------------------------

https://petly-backend-production.up.railway.app/user                  GET /user - віддає данні про користувача, включно з домашніми улюбленцями, при наявності токену;

https://petly-backend-production.up.railway.app/user/pets             POST /user/pets - додає юзеру домашнього улюбленця, наявніть токену (потребує name - обов'язково, birthday, breed, comments)), потребує передачу даних за допомогою body/raw/JSON {name,breed, };

 https://petly-backend-production.up.railway.app/user/pets/:petsId    DELETE /user/pets/:petsId - видаляє домашнього улюбленця по його id, наявність токену;

https://petly-backend-production.up.railway.app/user/avatar           PATCH /user/avatar - оновлення аватара юзера, наявність токену), потребує передачу даних за допомогою body/form-data/file key=avatar;

https://petly-backend-production.up.railway.app/user/:properties      PATCH /user/:properties - оновлює одне поле з інформацією про юзера(одне з name, email, birthday, city, phone), окрім аватара, properties - поле яке треба оновити, потребує передачу даних для оновлення у params  ;

якщо не знайшов потрібної інформації по функціоналу спробуй почитати, те що розміщено нижче:

--https://petly-backend-production.up.railway.app


POST /auth/signup - реєстрація користувача (потребує  password, email, name - обов'язкові, city, phone, birthday)
POST /auth/login - логінізація користувача (потребує email, password)
GET /auth/logout - логаут
GET /auth/current - віддає данні користувача при вже наявному токені

/======== Данні про юзера ================/
GET /user - віддає данні про користувача, включно з домашніми улюбленцями, при наявності токену;
GET /user/notice - віддає оголошення створені користувачем
PATCH /user/avatar - оновлення аватара юзера, наявність токену);
PATCH /user/:properties - оновлює одне поле з інформацією про юзера(одне з name, email, birthday, city, phone), окрім аватара, properties - поле яке треба оновити, потребує передачу даних для оновлення

/======== Данні про цуцика юзера =======/

POST /user/pets - додає юзеру домашнього улюбленця, наявніть токену (потребує name - обов'язково, birthday, breed, comments));
DELETE /user/pets/:petsId - видляє домашнього улюбленця по його id, наявність токену;

/========  Дані по друзях ===============/

 GET /friends  -   всі дані з друзями /доступна пагінація (default {page = 1, limit = 10})

/========  Дані по новинах ===============/

GET  /news -     get - всі дані з новинами /доступна пагінація (default {page = 1, limit = 10})

/====== Робота з оголошеннями=======/

GET /notices - всі оголошення / доступна пагінація (default (page = 1, per_page = 15))/ (обрати за категорією з доступних: ["sell", "lost_found", "in_good_hands"], за допомогою req.query (params at the postman SET))
GET /notices/:id  - детальна інформація по оголошенню(потребує id оголошення)
POST /notices  -  додавання оголошення (потребує name,title,birthday,breed,male,location,comments - обов'язково, price, avatar, category ), потребує передачу даних за допомогою body/form-data/text (key=name,key=title, ...); body/form-data/file key=avatar; query (notices?category=in_good_hands)
DELETE /notices/:id - видалення оголошення за його id

/======== Робота з favorite оголошеннями =======|

GET /user/favorite - віддає улюблені оголошення користувача
DELETE /user/favorite - видаляє оголошення з улюблених у користувача (потребує notice_id оголошення в query) (приклад // url/user/favorite?notice_id=6372bb9b6b1a551c201218ef)
POST /user/favorite - додає оголошення до улюблених (потребує notice_id оголошення в query)

About

team-project-petly.netlify.app/

Resources

Readme
Activity

Stars

1 star

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Contributors 9

Languages