Custom Dog Generator

Table of Contents

• Custom Dog Generator
  • Table of Contents
  • Overview
    • Features/Tools
    • Pages
  • Desktop View
  • Mobile View

Overview

Visit Site: custom-portrait-app.firebaseapp.com

Users can generate their own dogs using Pizzapup illustration assets by completing a multi-step customization/personalization form. All dogs are displayed in the gallery where users are able to view details for each dog and add/update accessories.

Features/Tools

back to top

• React.js - react.dev
• React Router - reactrouter.com | lazy
• Firebase - hosting | realtime database
• SCSS + CSS variables for dynamic styles
• Hex to Color Name Feature - color input is processed into the nearest matching color name
• React Toastify
• Emotion
• All assets designed and developed by Pizzapup

---

Pages

back to top

• Home
• Create Dog (Form)
• Gallery (View cards)
• Details (View dog details)

Form Step Descriptions

• About
  • Name
  • Favorite Toy
  • Description
• Body
  • Body Type
    • Regular: average build
    • Medium: frequents the cookie jar
    • Chonky: devoured the cookie jar
  • Body Color
    • Coat color: select the dominant color for your dog's coat
• Eyes
  • Eye Type
    • Squint: Could be due to allergies ... but most likely these eyes are judging you
    • Round: Big eyes
    • Closed: Universal, sweet, pure
  • Eye Color
    • Available with certain eye types (can't see when they are closed!)
• Snout
  • Nose
    • Long: The classic dog snout
    • Button: Lil button nose
    • Heart: Similar to button but for the extra sweet pups
  • Mouth
    • Smile: happy pup
    • Straight: Normal. Or, again, possibly judging you
    • Tongue: For the goofballs & the ones that just cant help it (pug parents and senior dog owners know whats up)

---

Desktop View

back to top

Screens under 640px wide

Home	Form	Gallery	Details

About	Body	Eyes	Snout

---

Mobile View

back to top

Screens under 640px wide

Home	Form	Gallery	Details

About	Body	Eyes	Snout