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.
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