A clean and responsive frontend application that fetches and displays random cat images using a public API. Built with a focus on modern UI, API handling, and real-world frontend practices.
🔗 Live Demo: https://cat-viewer-eta.vercel.app/
The Cat Viewer App is a simple yet practical project designed to strengthen frontend fundamentals like API integration, asynchronous JavaScript, and UI rendering.
This project demonstrates how to:
- Fetch real-time data from an external API
- Handle loading and error states
- Display dynamic content in a user-friendly layout
This project is part of a learning assignment from ChaiCode, aimed at understanding how to integrate and use public APIs (FreeAPI) in frontend development.
Assignment Focus: Learn how to fetch, manage, and display API data effectively in a real-world UI.
- 🐾 Fetch random cat images from API
- ⚡ Fast and responsive UI
- 🔄 Dynamic content rendering
- 🚫 Error handling for failed API calls
- 📱 Mobile-friendly design
Through this assignment, I gained practical experience in:
- API Integration: Understanding how to work with public APIs (FreeAPI)
- Asynchronous JavaScript: Using
fetch, handling promises, and async/await - DOM Manipulation: Dynamically updating UI with API data
- Error Handling: Managing API failures gracefully
- UI/UX Thinking: Keeping design simple, clean, and user-friendly
- Project Structuring: Organizing HTML, CSS, and JavaScript effectively
- Deployment: Hosting the project using Vercel
- HTML5
- CSS3
- JavaScript (ES6+)
- Public API (FreeAPI)
- Vercel (Deployment)
# Clone the repository
git clone https://github.com/aanchalm691/cat-viewer.git
# Navigate to project folder
cd cat-viewer
# Open index.html in browserThis project is deployed on Vercel for fast and seamless hosting.
- Add category filters (e.g., breeds)
- Add favorites/save feature
- Improve animations and transitions
- Add loader skeleton UI
This project is built as part of a ChaiCode assignment to practice working with FreeAPI in frontend applications.