ShowPets

• Overview
• MVP
  • Goals
  • Libraries
  • Client (Front End)
    • Wireframes
    • Component Tree
    • Component Hierarchy
    • Component Breakdown
    • Component Estimates
  • Server (Back End)
    • ERD Model
• Post-MVP
• Code Showcase
• Code Issues & Resolutions

---

Overview

ShowPets is an application where users will be able to show off their loving pets! Users will be able to add an image along with other information about their pets such as, name, age and a brief description. Users will be able to view all of the pets uploaded, however, they will be able to edit only their own posts.

Link: http://showpets.surge.sh/

🔝

---

MVP

The ShowPets will have an authentication and verification process which allows user to create and maintain their account. ShowPets will also implement full CRUD which allows users to Create, Update and Destroy their own pet posts. As well as the ability to Read (view) other pet posts. The schema for each pet posts will include: image, name, breed, age, and description.

🔝

---

Goals

• Successful authentication.
• Full CRUD.
• Correct/specific routes.
• An appropriate design and layout.
• Properly working end product.

🔝

---

Libraries

Use this section to list all supporting libraries and dependencies, and their role in the project.

Library	Description
React	Will be used to create the front-end of the application.
React Router Dom	Will be used to route and link certain components in the front-end.
Axios	Will be used to to call data from the backend.
Ruby	Can't use rails without Ruby.
Rails	Will be used to set up the back-end of the application.

🔝

---

Client (Front End)

Wireframes

• Mobile Wireframe

  https://www.figma.com/file/P7UJCmIUag7RGazooprsqn/ShowPets-Wireframe?node-id=0%3A1 >

• Tablet Wireframe

  https://www.figma.com/file/P7UJCmIUag7RGazooprsqn/ShowPets-Wireframe?node-id=3%3A10 >

• Desktop Wireframe

  https://www.figma.com/file/P7UJCmIUag7RGazooprsqn/ShowPets-Wireframe?node-id=3%3A11 >

🔝

---

Component Tree

https://app.lucidchart.com/documents/view/bb89b87d-bcda-41cf-b85e-25081a7c223d/0_0 >

🔝

---

Component Hierarchy

src
|__ Assets/
      |__ Images
      |__ Structures
      |__ Font
|__ Components/
      |__ Categories
            |__ Categories.css
            |__ Categories.jsx
      |__ CRUD
            |__ CreatePet.jsx
            |__ UpdatePet.jsx
      |__ Header
            |__ Header.css
            |__ Header.jsx
      |__ Main
            |__ Main.css
            |__ Main.jsx
      |__ Pet
            |__ Pet.css
            |__ Pet.jsx
      |__ Pets
            |__ Pets.css
            |__ Pets.jsx
      |__ SignIn
            |__ SignIn.css
            |__ SignIn.jsx
      |__ SignUp
            |__ SignUp.css
            |__ SignUp.jsx
|__ services/
      |__ api-helper.js
      |__ auth.js
      |__ categories.js
      |__ pets.js
|__ App.css
|__ App.js

🔝

---

Component Breakdown

Component	Type	state	props	Description
Header	functional	n	y	The header will contain the logo, the title, welcome user, and the create button.
Main	class	y	y	The main will be the source of all states.
Pets	functional	n	y	The Pets will be render the all pets.
Pet	functional	n	y	The Pet will render a single specified pet.
Categories	functional	n	y	The Description will render the information of the specified pet.
CreatePet	class	y	y	The CreatePet will be used to add a new pet.
UpdatePet	class	y	y	The UpdatePet will be used to update specified pet.
SignIn	class	y	y	The SignIn will allow users to sign in.
SignUp	class	y	y	The SignUp will allow users to sign up.
App	class	y	n	The App will be the brain of the app and pass props down.

🔝

---

Component Estimates

Task	Priority	Estimated Time	Time Invested	Actual Time
Back-End Data	H	3 hrs	2hrs	2hrs
Back-End Routes	H	3 hrs	1hr	1hr
Back-End CRUD	H	3 hrs	2hr	2hrs
Header	M	1 hr	1hr	1hr
Sign-In page	M	1 hr	1hr	1hr
Sign-In functionality	H	2 hrs	1hr	1hr
Sign-Up page	M	1 hr	1hr	1hr
Sign-Up functionality	H	2 hrs	1hr	1hr
Api-Helper	H	2 hrs	1hr	1hr
Pets	H	3 hrs	1hr	1hr
Pet	H	3 hrs	1hr	1hr
Categories	M	3 hrs	4hrs	4hrs
CreatePet	H	3 hrs	10hrs	10hrs
UpdatePet	H	3 hrs	4hrs	4hrs
DeletePet	H	3 hrs	1hr	1hr
CSS	H	8 hrs	8hrs	8hrs
Unexpected Debugging	H	3 hrs	.5hrs	.5hrs
TOTAL		47 hrs	40.5hrs	40.5hrs

🔝

---

Server (Back End)

ERD Model

https://app.lucidchart.com/documents/view/ffd14497-4e49-4f98-bc22-59e0122a58a8/0_0 >

🔝

---

Post-MVP

• The ability for users to comment on other pet posts.
• The ability for users to like a pet post.

🔝

---

Code Showcase

The following code allowed me to map the pet data, then filter out the pets with the corresponding category id, and display the data in reverse.

{pets
        .filter((pet) => {
          if (selectedCategory.length === 0) {
            return true;
          } else {
            return pet.category_id === parseInt(selectedCategory);
          }
        })
        .reverse()
        .map((pet) => (

🔝

---

Code Issues & Resolutions

Use this section to list of all major issues encountered and their resolution, if you'd like.

🔝