Routes & Components

Routes

1. Landing Page '/' <Landing />

• Navbar with search bar and header underneath
  • <NavBar />
  • Welcome Message Header
• Scroll to see featured products, alternating with additional featured categories
• Featured Categories
  • <ProductTypeGrid />
  • <ProductTypeNode />
• Featured Categories
  • <ProductsGrid />
  • <ProductNode />
• About Petsy
  • <About />
• Footer at bottom
  • <Footer />

2. Product Page '/products/:product_id' <ProductPage />

• Photos gallery view
  • <ProductPhotos />
• Name and information on right column with price & add to cart button
  • <ProductInfo />
• Scroll down for reviews
  • <Reviews />
• Below reviews, show more products from that shop
  • <ProductsGrid />
  • <ProductNode />

3. Pet Types '/pets/:pet_id' <PetType />

• Filter by details on left column
  • <Filter />
• Product Type grid on top
  • <ProductTypeGrid />
• Products filtered by pet type
  • <ProductsGrid />
  • <ProductNode />

4. Product Types '/product_types/:product_type_id' <ProductType />

• Filter by details on left column
  • <Filter />
• Products filtered by pet type & product type
  • <ProductsGrid />
  • <ProductNode />

5. Manage Listings '/manage_listings' <ManageListing />

• View user's created listings
  • <ProductsGrid />
  • <ProductNode />
• When user clicks product node, the product components are hidden and the edit product form is shown
  • <EditForm />
• When user clicks "add a listing" button, the product components are hidden and the create product form is shown
  • <CreateForm />
• After a user creates a new listing or edits and existing listing, the form is hidden and the product components are shown with the new/edited listing.

6. Cart '/cart' <Cart />

• View cart and items in cart
  • <Cart />
• Clicking checkout will hide the cart component and show the checkout form to input shipping and payment details
  • <CheckoutForm />
• Clicking confirm/purchase will show order confirmation
  • <OrderConfirmation />

6. Purchases '/users/:userId/purchases' <PurchasesPage />

• View purchases page and products user has purchased
  • <PurchasesPage />
• Edit and delete reviews
  • <ReviewEditForm />
  • <ReviewDeleteButton />