In this project you will build a full stack pet adoption platform, with search, user/adoption management & admin dashboard. The goal of this platform is to allow users to sign up, search and adopt pets.
Below you have a list of pages and their components that will need to be implemented. In this document you will find all the information you will need to complete the frontend portion of this application. Until your database is running you should use fake data to ensure your application is working properly.
- Login/Signup button
- Login/Signup modal (triggered when the button is pressed)
- Header welcoming users to the site
- Text explaining what the service is.
- Link to the Search Page
- Should take an email address
- Password (twice to make sure passwords match)
- First and last name
- Phone number
- Email address
- Password
- Header welcoming user by their first and last name
- Search button
- Should have a link to → My Pets Page
- Has access to navigate to profile settings
- Form with the following fields: password, email, first name, last name, phone number,user can add a short bio.
- Save button to save any changes done.
(Can toggle between pets and saved pets)
- Text displaying - you currently do not own or foster any pets. (if they don't have any pets)
- Cards displaying all the pets the user owns/fosters
- Card Component: Card component should display an image of the pet Pet’s name Pet’s current status (foster/adopted) See more button (this button takes you to a full detailed description of the pet)
Should be able to see all the pets details of a specific pet
Pet details: Type (dog, cat), Name, Adoption Status, Picture, Height, Weight, Color, Bio, Hypoallergenic (yes/no), dietary restrictions, breed of animal (Poodle, Siamese)
There should be a button for the owner of pet to return the pet to the adoption center (if they are fostering the pet or adopted it) If the person is not the owner they should see a button to adopt and a button to foster. (If they are already fostering, they should see a button to adopt) There should be an additional button to save for later (Or unsave if already saved)
- Search bar
- Results of search (List of animal card components that link to the pet page)
- Search Bar Component:
- Can toggle between basic and advanced search
- Basic Search: Can search based on Type of animal
- Advanced search: Can search based on Adoption Status, Height, Weight, Type, Name
Form allowing admin to add a pet (with all of the pet details)
- List of all the users in the database (pet owners and administrators)
- Clicking on a user should display all the pets that the user owns along with all of their profile details so the administrators can contact the user.
- List of all pets and ability to go to the pet page and edit. (The edit should be just like adding a pet but with the details already displayed there)