This project is a challenge for the _Nology training that I am currently undergoing. The PUNK API is a web application that fetches beers with their names, descriptions, images, tagline, and other details from the Punk API. The app features a main page with a sidebar that includes a search bar, three sliders, and three checkboxes, and the cards of each beer. Each beer also have a details page when click on that will inform the user with more information about each beer.
- Search for beers by name using the search bar
- Filter beers by alcohol by volume using the first slider
- Filter beers by the year they were brewed using the second slider
- Filter beers by pH level using the third slider
- Filter beers by specific alcohol by volume, brewed year, or pH level using the checkboxes
- Fully responsive design
The Punk API app was developed using React and was thoroughly tested using the React Testing Library. The following components were tested:
- Sidebar
- Sliders
- Cards
- Searchbar
The tests focused on ensuring that the app's components were rendering correctly and that the data from the API was being fetched and displayed accurately. All tests passed successfully, and the app is considered stable and reliable.
To run the app locally, please follow these steps:
- Clone the repository to your local machine.
- Install the necessary dependencies using npm install.
- Start the server using npm start.
- Open http://localhost:3000 in your web browser.
To use the app, simply navigate to the main page and begin searching and filtering beers. Click on any beer card to access the card info page, where you can find more details about the beer.