Solvro Cocktailer is an interactive React application that lets users browse, filter, and save their favorite cocktails fetched from a public API.
The project was built to explore working with REST APIs, state management, and modern front-end UI design.
Note
Public link to page: https://solvro-cocktailer.netlify.app/
- 🔍 Search cocktails by name ❌ (not finished)
- 🧃 Filter by alcohol type, category, or glass type
- ❤️ Add / remove favorites with animated heart icons
- 🔄 Toggle view between all cocktails and favorites
- 📱 Fully responsive design
Warning
Not all functionalities have been implemented or are partially operational.
Important
The function to view the details of the cocktail and its ingredients could not be created in time.
- React + TypeScript – component-based architecture and type safety
- Axios – API communication
- SCSS – styling and animations
- Flaticon – icon set for UI elements
The main entry point of the app.
Manages global state for favorites and the toggle between all cocktails and favorites view.
Stores favorite cocktails in localStorage.
Displays the app title and the ❤️ Favorites button, allowing users to switch between views.
Interactive filtering panel that allows filtering by:
- cocktail name,
- alcohol type (all / alcoholic / non-alcoholic),
- category,
- glass type.
Handles fetching cocktail data from the API, applying filters, and displaying the list of cocktails.
Also supports the Favorites view.
Represents a single cocktail card — shows image, name, type, and a clickable animated heart icon for favorites.
npm install
npm run start
npm run build
The app will be available at: http://localhost:3000/
The project uses the public Solvro Cocktails API:
Frontend design & implementation: Oliwier Kądziołka / olios
GitHub repository: https://github.com/olios123/solvro-cocktailer