- Overview
- Link to API/Backend Repo
- Meet the Team
- Wireframing
- Whimsical tools
- Schemas
- Link to PM Board
- Explanation of App
- Screenshots of App
- CRUD breakdown
- Tools, tech, and skills used
- Add profile view counter
Railway:
Netlify:
Did your pet chew up their toys again? Searching for new accessories to swag out your newly adopted fur baby?
Welcome to PetLyfe — your trusted online pet accessory shop committed to providing cats and dogs with a wide variety of high-quality toys and accessories.
We love our pets, and we know you do too. Above all, we love spoiling them with fun, snazzy accessories so they live life to the fullest.
Our lives are defined by special moments with our fur babies. We believe that bedazzling their lives with fun and excitement creates unforgettable memories that last a lifetime.
At PetLyfe, we don’t just bring joy to the children animals we adore. We bring joy to humans too.
When visiting PetLyfe.com, visitors will be greeted with a landing page featuring a welcome image featuring pets with our products and a call to action button: "Shop All".
Below, visitors will be directed to shop for cats or dogs to better filter the product content for the user. There will also be another "Shop All" option.
Below the cats and dogs filter section, visitors will be encouraged to create an account to sign up for exclusive discounts and offers.
On the top left of the header, our logo will take visitors to the home page.
On the top right, visitors can click on Shop All, Login, and View shopping cart (with an image of a shopping cart).
On the bottom of the screen, a footer will provide links to Shop All, Login, Shopping cart, and About.
On the shop all page, visitors will see all products in our inventory with the option to view details and add product to their shopping cart. Visitors can also filter by cat or dog.
Visitors will see what items are in their carts and proceed by logging in or checking out as a guest.
Visitors can add more items, edit their cart, or delete items.
They can pay with a mock credit card input section, and once accepted, the screen will read: “Your fur baby thanks you for your order!” with a "Return to products" button.
- Brandon Alvarez
- Sandy Caba
- Erin Baright
- Caprice Genninger
- Gary Bowen
Products:
const Product = new Schema
(
{
name: {
type: String,
required: true
},
imgURL: {
type: String,
required: true
},
price: {
type: Number,
required: true
},
rating: {
type: Number,
required: false
}
},
)
- Use MongoDB and Express to create the back-end
- Use React to create the front-end
- Use multiple functional components
- Give user capability for full CRUD (products for MVP, see post-MVP... preferred CRUD demonstration)
- Deploy to Railway and Netlify
- CSS styling to match wireframe and branding
- Responsive Design
- Add user capability to review products (with full CRUD capability)
- Loading animation on home page
- Ability to edit a user profile
| Date | Deliverable | Status |
|---|---|---|
| Nov 3 | Project Team Building | Complete |
| Nov 4 | Wireframes + Final Project Approval | Complete |
| Nov 5 - 6 | Create Back-End + Deploy Back-End | Complete |
| Nov 7 | Continue Back-End + Testing + Develop Front-End Components | Incomplete |
| Nov 8 | React Front-End MVP + CSS Styling | Incomplete |
| Nov 9 | Refine CSS and proceed with Post-MVP Improvements | Incomplete |
| Nov 10 | Present and Celebrate | Incomplete |