Hog Wild is a React web application that allows users to explore information about different hogs. Users can view hog tiles, filter hogs based on various criteria, sort them by name or weight, and enjoy additional features like hiding hogs and adding new ones.
- Clone the repository:
git clone https://github.com/saonara/react-hooks-hogwild.git - Navigate to the project directory:
cd react-hooks-hogwild - Install dependencies:
npm install - Start the development server:
npm start
- Upon loading the app, hog tiles are displayed, showing the name and image of each hog.
- Click on a hog tile to view additional details such as specialty, weight, greased status, and highest medal achieved.
- Use the filter option to display only greased hogs.
- Sort hogs by name or weight using the sorting feature.
- Bonus features include the ability to hide hogs and add new hogs using a form.
- Enjoy exploring the world of hogs!
- Built with React, utilizing hooks for state management and functional components.
- Followed React best practices for component structure, state management, and data flow.
- Implemented filtering and sorting functionalities using state and callback functions.
- Added the ability to hide hogs from view without deleting them.
- Implemented a form for users to add new hogs to the page.
- Utilized Semantic Cards for enhanced visual presentation of hog details.
- Semantic UI React library: https://react.semantic-ui.com/
- Hog data provided by Learn.co curriculum.
Feel free to submit issues, suggest improvements, or contribute to the project via pull requests.
This project is licensed under the MIT License. See the LICENSE file for details.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent