Adopt Don`t Shop use The Dog API to provide with information about different breeds and display dogs' photos. The initial goal of the project is to promote adoption over buying, help with choice of the dog and the most important - brigthen up the mood of a user.
Try it yourself with this link: http://adopts.netlify.app
- HTML5
- CSS
- JavaScript
- Axios
- React
- NPM
- Pleasing to the eye responsive design
- Dropdown lists to choose the breed
- Reusable cards with breed information
- Random dog pictures slider
- Contact form with restricted input
- Google maps for searching shelters nearby
Clone this repo to your desktop and run npm install to install all the dependencies.
{Landing page} As a user I want to see clean menu visualisation. I need comfortable and fast way to get information about the website and, most important, breed I`m interested in. I would like to get more details about adoption process and get support in dogs adoption questions. Photos of different breeds would help me to make my choice. As a user I want to transfer through the Website easily and get interaction by click on a buttons or links. I would like learn more about organization I'm dealing with.
{Breeds Info} As a user I want to see detailed information to inspect breed details. I want to get all characteristics of a breed before adoption to avoid surprises.
{Contact Us} As a user I need to send the request for chosen breed. I want to send my request after I filled it and click submit button.
{Congratulations} As a user I want to be sure my adopt request was sent succesfully. I want to get some information about dog shelters in my area on a map. As a user I user want to get adress of nearest dog shelter(s)
- Robert Kaniuth: navbar, full dog's info page, contact form, congratulation page
- Vladyslava Klovak: about us section, picture slider, map component, welcome section, footer
- Valeria Kurylko: dog's info section, footer, management
- Ahmed Elbehary: routes implementation, 8 steps section