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.
- 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
- Home
- Create Dog (Form)
- Gallery (View cards)
- Details (View dog details)
- 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
- Body Type
- 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!)
- Eye Type
- 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)
- Nose
Screens under 640px wide
| Home | Form | Gallery | Details |
|---|---|---|---|
 |
 |
 |
 |
| About | Body | Eyes | Snout |
|---|---|---|---|
 |
|
 |
 |
Screens under 640px wide
| Home | Form | Gallery | Details |
|---|---|---|---|
 |
 |
 |
 |
| About | Body | Eyes | Snout |
|---|---|---|---|
 |
|
 |
 |