This project is a Single Page Application (SPA) designed to provide comprehensive information about various dog breeds. With an array of dynamic features, users can explore, filter, and sort through a wide range of dog breeds. From combined filters and ordering options to breed creation and search functionality, this application offers an immersive experience for dog enthusiasts and learners alike.
-
Combined Filters and Ordering: Users can seamlessly apply combined filters and select different sorting orders to tailor their browsing experience. Choose from A-Z, Z-A, lighter-heavier, and heavier-lighter sorting options.
-
Breed Categories: Discover breeds from three categories: "All Breeds," "New Breeds" (database additions), and "API Breeds" (fetched from an external API).
-
Controlled Form for New Dogs: Create new dog entries using a controlled form that validates every input. This ensures accurate and reliable data for each breed.
-
Pagination: Navigate through the extensive list of breeds with user-friendly pagination controls, making it easy to explore all breeds.
-
Search by Breed Name: Utilize the search bar to find specific breeds by name, enhancing user convenience and efficiency.
-
Detailed Information: Clicking on the "Detail" button allows users to access more detailed information about a specific dog breed.
-
HTML, CSS, JavaScript: The fundamental building blocks of the application's structure, style, and interactivity.
-
React.js: Developed using React.js for efficient component-based architecture and dynamic UI elements.
-
Express: Utilized Express.js for server-side functionality. To start the server, use
npm start. -
API Integration: Utilized external API data to populate the application with a variety of dog breeds.
-
Pagination Logic: Implemented pagination logic to manage the display of multiple breed entries.