learn-co-curriculum/react-hooks-hogwild

HogWild: The React app for fans of prize-winning pigs

React Week 1 Project

Deliverables

• When the app first loads, display a tile for each hog in the porker_data.js file. In the tile, display the name and image for each hog.

• When the user clicks on the hog tile, display the other details about the hog (its specialty, weight, greased, and highest medal achieved)

• Allow the user to filter the hogs that are greased

• Allow the user to sort the hogs based on name or weight

• BONUS: Allow users to hide hogs (not delete them, just hide them from view!)

• BONUS: Add a form to allow users to add new hogs to the page

• BONUS: Implement Semantic Cards for each hog

Project Guidelines

• Follow React best practices to create components and decide where state needs to live
• Pass props down from parent components to children
• Use inverse data flow and callback functions to pass data up from child components to parents
• Re-render components by setting state

What we have so far

• A file containing all our hog data (./src/porkers_data.js) imported into App.js
• A <Nav> component rendered in our App.js

Trying to figure out where to start?

There are lots of ways to build this project, and while some ways are better than others, there is no 'right' way! Start by wireframing what you want the app to look like and breaking it up into components.

One good model to follow for this is Thinking in React.

Once you've decided on your components, use the MVP (minimum viable product) approach. What's the simplest thing we can render to the page? Perhaps a paragraph tag displaying each hog's name? Which components would this involve?

When building your filter and sort functionalities, consider what you want to store in state and where that state should be stored. How can a child component pass information up to its parent component? Think about what needs to happen upon each index rerender. What if a user filters out un-greased pigs, and then wants the remaining pigs sorted by weight?

Be sure to use good programming practices, such as clear variable names and single responsibility functions. React apps can quickly become tangled and hard to debug if built without best practices!

Styling

We've imported the Semantic CSS library to keep your piggies looking pretty. To keep your hogs in columns, make sure their parent container has the class "ui grid container". The children in the columns should have class "ui eight wide column". (Semantic uses a grid with a default of 16 units wide, so 8-wide will make two columns and 4-wide will make 4 columns.)

Semantic will take care of assigning the columns for you. You can also try implementing Semantic Cards for each hog.

react-hooks-hogwild's Issues

Ethical issues with Hogwild

Canvas Link

https://learning.flatironschool.com/courses/6257/assignments/228569?module_item_id=534040

Concern

Hi there,

I want to acknowledge that I know the pigs in this lab are fictional. But Flatiron is a progressive, forward-thinking institution, and improvements could be made here.

If we are going to show off these cute baby pigs at a county fair in one lab, we also have the responsibility of following up on what happens to them after the county fair is over in a following lab. It isn't pretty.

More farm animals are killed in one week than the total number of humans killed in all wars throughout history combined - Melanie Joy, PhD.

Please bear with me for a short anecdote. I grew up in Lancaster, PA, close to Harrisburg where the PA Farm Show is hosted. The first calf born at the farm show in 2022, Winston, made headlines and was all over social media. People brought their families and children to see him. But when the show was over and the cameras were off, no one cared about what happened to Winston. A local farm sanctuary tried to track him down and contacted his original owner who said he was 'caught off guard that someone cared enough to follow up on him' and that Winston was already 'sent away to another farm.' In reality, Winston had been sent to a local auction and sold for slaughter as just a baby. Someone tried to contact the local paper to follow up on this, since Winston was such a hit, but no bites. The papers never responded. They only cared about the cute side of Winston. This farm show made about $40 million and attracted over half a million visitors. So many people celebrated Winston, commented and shared about him, but no one was willing to open their eyes to what his actual fate was.

We have all seen more overt violence against animals, but this type of propaganda used to culturally erase them is unbearable. And this lab is the same kind of propaganda, dwelling on the cute and comfortable side of farm animals without any care as to what their fate holds. Even though not intentionally, by continuing to use this HogWild lab in its curriculum, Flatiron is contributing to that cultural erasure of their lives, trauma, and experience.

I know that Flatiron can do better than this. Please consider updating this lab. Thanks for reading this and I really appreciate your consideration. As a Flatiron Alum, please let me know if there is anything I can do to help with any updates. I provided some potential alternatives to brainstorm below - each could be used to meet all of the same core deliverables without exploiting the cute and comfy side of farm animals that everyone wants to see, when so few people are willing to see what happens beyond that.

Additional Context

No response

Suggested Changes

Farm Sanctuary App:
Display a tile for each animal living at the sanctuary, including its name, image, and type of animal.
When the user clicks on the animal tile, display the other details about the animal (such as breed, age, and rescue story).
Allow the user to filter the animals by type (e.g. cows, pigs, chickens, goats).
Allow the user to sort the animals based on name or age.
BONUS: Allow users to hide animals (not delete them, just hide them from view!)
BONUS: Add a form to allow users to add new animals to the page
BONUS: Implement Semantic CardsLinks to an external site. for each animal

Potential names:

• HoofedHaven
• AnimalOasis
• BarnyardBliss
• PeacefulPastures
• SanctuarySweeties

Climate Change App:
Display a tile for each issue related to climate change, including its name and image.
When the user clicks on an issue tile, display the other details about the issue, such as its causes, effects, and potential solutions.
Allow the user to filter the issues by category, such as energy, transportation, agriculture, or waste management.
Allow the user to sort the issues based on name or impact level.
Bonus: Allow users to mark an issue as "completed" or "in progress" to track their own efforts to address it.
Bonus: Add a form to allow users to submit their own suggestions for addressing an issue, which can be reviewed by moderators before being added to the app.
Bonus: Implement Semantic CardsLinks to an external site. for each issue, including tags that highlight its category, impact level, and status.
BONUS: Allow users to hide issues (not delete them, just hide them from view!)
BONUS: Add a form to allow users to add new environmental issues to the page
BONUS: Implement Semantic CardsLinks to an external site. for each issue

Potential names:

• PlanetPulse
• ClimateChamp
• EarthEmergency
• GreenGenius
• ChangeChaser

Farmers Market App:
Display a tile for each vendor at a farmer's market, including their name, image, and type of produce they sell.
When the user clicks on the vendor tile, display the other details about the vendor (such as location, hours, and products available).
Allow the user to filter the vendors by produce type (e.g. fruits, vegetables, baked goods).
Allow the user to sort the vendors based on name or type of produce.
BONUS: Allow users to hide vendors (not delete them, just hide them from view!)
BONUS: Add a form to allow users to add new vendors to the page
BONUS: Implement Semantic CardsLinks to an external site. for each vendor

Potential names:

• FairVegetables
• MarketMavens
• GreenHarvest
• Vegendary
• FarmFestivities

Local Restaurant App:
Display a tile for each restaurant in a local area, including their name, image, and type of cuisine.
When the user clicks on the restaurant tile, display the other details about the restaurant (such as location, hours, and menu items).
Allow the user to filter the restaurants by cuisine type (e.g. Italian, Mexican, Thai).
Allow the user to sort the restaurants based on name or rating.
BONUS: Allow users to hide restaurants (not delete them, just hide them from view!)
BONUS: Add a form to allow users to add new restaurants to the page
BONUS: Implement Semantic CardsLinks to an external site. for each restaurant

Potential names:

• BitesNearMe
• TableFinder
• HungryHelper
• CuisineExplorer
• DineOutNow

Pet Adoption App:
Display a tile for each pet available for adoption at a local shelter, including their name, image, and type of animal.
When the user clicks on the pet tile, display the other details about the pet (such as breed, age, and temperament).
Allow the user to filter the pets by type of animal (e.g. dogs, cats, birds).
Allow the user to sort the pets based on name or age.
BONUS: Allow users to hide pets (not delete them, just hide them from view!)
BONUS: Add a form to allow users to add new pets to the page
BONUS: Implement Semantic CardsLinks to an external site. for each pets

Potential names:

• PawsFinder
• FurryFriendFinder
• AdoptAPetToday
• FurEverHome
• PawfectMatch

Book Club App:
Display a tile for each book available for discussion in a book club, including its title, image, and author.
When the user clicks on the book tile, display the other details about the book (such as summary, author bio, and discussion questions).
Allow the user to filter the books by genre (e.g. fiction, non-fiction, mystery).
Allow the user to sort the books based on title or author.
BONUS: Allow users to hide books (not delete them, just hide them from view!)
BONUS: Add a form to allow users to add new books to the page
BONUS: Implement Semantic CardsLinks to an external site. for each book

Potential names:

• BookishBuddies
• LiteraryLeague
• ChapterChat
• LitLovers
• ReadReadMeet

Fitness App:
Display a tile for each workout available at a local gym, including its name, image, and type of exercise.
When the user clicks on the workout tile, display the other details about the workout (such as duration, equipment needed, and difficulty level).
Allow the user to filter the workouts by type of exercise (e.g. cardio, strength, yoga).
Allow the user to sort the workouts based on name or difficulty level.
BONUS: Allow users to hide workouts (not delete them, just hide them from view!)
BONUS: Add a form to allow users to add new workouts to the page
BONUS: Implement Semantic CardsLinks to an external site. for each workout

Potential names:

• SweatSquad
• FitFrenzy
• WorkOutWorld
• GymGuru
• TrainTogether

Pet Grooming App:
Display a tile for each available pet grooming service, including its name, image, and type of pet.
When the user clicks on the grooming tile, display the other details about the grooming service (such as duration, price, and what is included).
Allow the user to filter the grooming services by type of pet (e.g. dog, cat, bird).
Allow the user to sort the grooming services based on name or price.
BONUS: Allow users to hide services (not delete them, just hide them from view!)
BONUS: Add a form to allow users to add new services to the page
BONUS: Implement Semantic CardsLinks to an external site. for each service

Potential names:

• Fur-Get-Me-Not
• PurrfectGroom
• FluffSpa
• BarkBath
• WagWash

Virtual Museum App:
Display a tile for each exhibit in a virtual museum, including its name, image, and theme.
When the user clicks on the exhibit tile, display the other details about the exhibit (such as description, artist, and date).
Allow the user to filter the exhibits by theme (e.g. contemporary art, ancient history).
Allow the user to sort the exhibits based on name or date.
BONUS: Allow users to hide exhibits (not delete them, just hide them from view!)
BONUS: Add a form to allow users to add new exhibits to the page
BONUS: Implement Semantic CardsLinks to an external site. for each exhibit

Potential names:

• ArtVoyage
• CultureCruise
• ExhibitExplore
• HeritageHunt
• MasterpieceMeander

Language Learning App:
Display a tile for each language available to learn, including its name, image, and country of origin.
When the user clicks on the language tile, display the other details about the language (such as level, grammar, and vocabulary).
Allow the user to filter the languages by country of origin (e.g. French, Spanish, Mandarin).
Allow the user to sort the languages based on name or level.
BONUS: Allow users to hide languages (not delete them, just hide them from view!)
BONUS: Add a form to allow users to add new languages to the page
BONUS: Implement Semantic CardsLinks to an external site. for each language

Potential names:

• PolyglotPilot
• LinguaLaunch
• VerbVerse
• TalkTrek
• SyntaxSafari

Travel Planning App:
Display a tile for each destination available to visit, including its name, image, and continent.
When the user clicks on the destination tile, display the other details about the destination (such as description, landmarks, and best time to visit).
Allow the user to filter the destinations by continent (e.g. Europe, Asia, South America).
Allow the user to sort the destinations based on name or best time to visit.
BONUS: Allow users to hide destinations (not delete them, just hide them from view!)
BONUS: Add a form to allow users to add new destinations to the page
BONUS: Implement Semantic CardsLinks to an external site. for each destination

Potential names:

• TripTrekker
• AdventureAid
• RoamReady
• DestinationDesign
• LatitudeAdjustment

Animal Rights Activist Group App:
Display a tile for each animal rights organization or event, including its name, image, and type of activity (e.g. protest, fundraiser, educational).
When the user clicks on the organization or event tile, display the other details about the group or activity (such as location, date, and mission statement).
Allow the user to filter the groups or activities by type of activity (e.g. animal welfare, veganism, wildlife conservation).
Allow the user to sort the groups or activities based on name or date.
BONUS: Allow users to hide animal rights organizations or events (not delete them, just hide them from view!)
BONUS: Add a form to allow users to add new animal rights organizations or events to the page
BONUS: Implement Semantic CardsLinks to an external site. for each animal rights organization or event, including additional information such as a summary of their mission statement, recent news, and upcoming events.

Potential names:

• AnimalAllies
• CompassionateCauses
• PawsitiveProtests
• Furry Friends for Change
• Be the Voice

NO WAY TO SUBMIT HOGWILD PROJECT IS IT REQUIRED OR NOT

Canvas Link

https://learning.flatironschool.com/courses/6558/pages/hogwild-the-react-app-for-fans-of-prize-winning-pigs?module_item_id=571400

Concern

No way to submit it. It is very unclear as to if this is a REAL assignment or just one of those THINK ABOUT IT BUT DON'T DO IT assignments. On CANVAS it says we must VIEW it which looking at the page satisfies. So is it required or not?

Additional Context

No response

Suggested Changes

No response