Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/vladyslavvagin/petlove

PETLOVE
https://github.com/vladyslavvagin/petlove

api-rest axios-react cloudinary-api formik-yup javascript material-ui mobilefirst react react-hook-form react-router react-router-dom redux redux-persist redux-thunk redux-toolkit rest-api styled-components toastify

Last synced: 2 days ago
JSON representation

PETLOVE

Awesome Lists containing this project

README 

        
**PetLove App** - An application for searching a new house for pets and for people who looking for a new cute friend in their life. App consist of 6 public pages, 2 private pages (with two sub pages Favorites and Viewed) and pages for login and registration user:



**PUBLIC PAGES**

- Home -  this page will appear first when you load the app, and if user will logout from his profile. There are main title with hero image.

- News - page with list of news about animals, pets with search bar and pagination. For click "Read more" will open new blank of browser with new's web resource.

- Friends - Page with list of companies` contacts which help our pets a lot.

- Find pet - Page with list of existing pets, with pagination and search-filter-bar where user can filter list of animals by various parameters like type, gender, location, price, popularity, species and keyword.

- Registration page - Page with form for register new user.

- Login page - Page for login user to app.

- 404 Page - if will be wrong URL, user transfer to 404 page. This page have button for go to Home page.

  

**PRIVATE PAGES**

  - Profile - Page with information about user, with list of pets of current user, with list of Favorites and Viewed pets. On this page user can change avatar and/or other information about him and Logout from app. For creating new pet user can go to page Add-pet. When user Logout he will transfer to Home page. By default on Profile page will be shown Favorites list of user's pets.

  - Add-pet - Page with form for creating new pet of current user. After succesfull creating user will transfer to Profile page.

In header user can register, login , change palitra of app and navigate by nav.menu.



**App created by using:** React.js, Redux, Redux-Persist, Redux Toolkit, JavaScript, Styled-Components, Axios, Formik + Yup, React-hook-form, React-select, Material UI

Application was created by "Mobile First" approach with 3 breakpoints 375px, 768px and 1280px. From 320px to 375px responsive design. All images also adaptive due to screen resolution and size of screen. All images in webp format.



**Layout** - https://www.figma.com/file/puMNfZVg4YI8UZoJ1QiLLi/Petl%F0%9F%92%9Bve?type=design&node-id=55838-750&mode=design&t=Xg1IwIcKebTl5xGs-0



**Backend** - https://petlove.b.goit.study/api-docs/



**Tech.requirements (in Ukrainian language)** - https://docs.google.com/spreadsheets/d/1DmQUeGZy_oaXN6yn69ORLzou1ZQRyTMlrAqPSit_clw/edit#gid=1134921873



**General requirements**

The layout should be responsive, except for mobile devices as follows:

- mobile: (from 320px - fluid; from 375px - adaptive)

- tablet: from 768px;

- desktop: from 1280px



It should include:

- adherence to semantics according to HTML5 standards

- fonts connected

- optimized sizes of vector and raster graphics

- ensured support for displaying images for retina screens

- optimized loading of static images

- all icons connected through a sprite

- added display of the page's favicon