FeatherGuide: Digital Bird Encyclopedia

View Live Demo

FeatherGuide is an interactive digital encyclopedia designed to catalog and present comprehensive data on various bird species. Built as a responsive, multi-page web application, it integrates modern web technologies with an intuitive user interface to provide users with scientific classifications, conservation statuses, habitat origins, and multimedia resources.

The platform also serves as a frontend interface for an integrated machine learning engine, allowing users to upload images for real-time automated species identification.

✨ Features

• Interactive Directory: Browse a responsive grid of beautifully designed bird cards.
• Dynamic Search: Instantly filter the directory by a bird's common name or scientific name.
• AI-Powered Identification: Upload a photo to identify a bird species. (Requires a separate backend service).
• Detailed Profiles: Click any bird to view a dedicated profile page with:
  • High-resolution image carousel.
  • Embedded YouTube video.
  • Detailed description, habitat, and origin information.
  • Conservation status badge.
  • "Field Notes" with expert advice for birdwatchers.
  • A direct link to the species' Wikipedia page for further reading.
• Responsive Design: A seamless experience on desktops, tablets, and mobile devices.
• Pure Frontend: Built with vanilla HTML, CSS, and JavaScript, making it lightweight and easy to deploy.

🛠️ Technologies Used

• Frontend:
  • HTML5
  • CSS3 (Flexbox, Grid, Custom Properties/Variables)
  • Vanilla JavaScript (ES6+, async/await, Fetch API)
• Data:
  • JSON for storing the bird species data.
• AI Backend (Dependency):
  • The image identification feature is designed to communicate with a separate Python/Flask backend running on http://localhost:5000. This repository only contains the frontend code.

🚀 Getting Started

To run this project locally, you will need a local web server to handle the fetch() requests for the JSON data.

Prerequisites

• A modern web browser.
• A local web server. If you have Python installed, you can use its built-in server.

Installation & Setup

1. Clone the repository:

   git clone https://github.com/ejramirez525/featherguide.git
   cd featherguide

2. Start a local server:

   • Open the project folder in your code editor.
   • If you are using VS Code, the easiest way is to install the Live Server extension and click "Go Live".
   • Alternatively, if you have Python 3 installed, you can run the following command from the project's root directory:

   python -m http.server

3. Open the application: Navigate to http://localhost:8000 (or the address provided by Live Server) in your web browser.

❗ Note on Image Identification

The "Identify Photo" feature will not work out-of-the-box. It requires a separate machine learning backend service to be running and accessible at http://localhost:5000/api/bird_classifier. This service is responsible for receiving an image and returning a predicted species name.

📂 Project Structure

FeatherGuide/
├── CSS/
│   └── featherguide.css
├── JSON/
│   └── birds.json 
├── JS/
│   ├── app.js    
│   └── details.js          
├── index.html       
├── details.html     
├── about.html    
├── author.html        
└── README.md            

👤 Author

• EJ S. Ramirez

---

This project was developed as a sample project for the subject Web Programming in TVL-ICT Grade 12 at Saint Michael College, Cantilan Incorporated. It serves as an exercise in modern frontend web development, demonstrating skills in HTML, CSS, and asynchronous JavaScript.