The first course I took while pursuing my masters in Conservation Biology was Vertebrate Zoology. The main assignment for the lab portion of this course consisted of taking time to go out and catalogue as many vertebrates as you could within the time frame of the course. Over the next 6 weeks I took my camera equiped with the Sigma 150-600mm lens everywhere and did my best to find and identify as many creatures as I could. Towards the end of the course, I decided to spin up a quick bootstrap site to display my findings, instead of the powerpoint format suggested by the professor.

I found this exercise to be a lot of fun and have continued to capture pictures of a variety of animals on my adventures, however I have not kept the page I built up to date. Instead of continuing the tedious task of creating static pages for each animal, I am planning on expanding my dev knowledge to create a more powerful tool. My goal is to create a web app that leverages a database that I maintain that includes the common and scientific name, location of encounter, images I have taken, typical range for the animal, animal description, endangered status and threats that they face.

The tech stack I plan to use is listed below. The languages and technologies I plan to use revolve around python, sql and ARCgis.

  1. Frontend Hosting with S3 and CloudFront
    • Amazon S3: Host the React app as a static website on S3, serving all HTML, CSS, and JavaScript files.
    • CloudFront: Use CloudFront as a CDN in front of S3 to cache assets globally for faster loading times.
  2. Backend API with Flask on AWS Lambda and API Gateway
    • AWS Lambda: Deploy the Flask API as serverless functions using Lambda. This handles API calls from the frontend and integrates with your database.
    • Amazon API Gateway: Create a REST API with API Gateway to route requests from your React frontend to your Lambda functions, allowing custom domain setup and caching.
  3. Database with Amazon RDS (PostgreSQL + PostGIS)
    • Amazon RDS with PostgreSQL and PostGIS: Use Amazon RDS to host PostgreSQL with PostGIS enabled, storing animal data (encounters, images, descriptions). PostGIS supports geospatial data for encounter locations and range polygons.
    • VPC for Database Security: Set up a VPC to isolate the database and configure IAM roles for access control.
  4. Image Storage with Amazon S3
    • S3 for Images: Store all animal images in an S3 bucket, with optional CloudFront integration for faster delivery.
    • AWS Lambda for Image Processing (Optional): Automate image resizing and processing with Lambda functions triggered on image upload.
  5. Interactive Mapping with ArcGIS API for JavaScript
    • ArcGIS API for JavaScript: Use the ArcGIS API to create interactive maps, display encounter locations, and add geographic range polygons.
    • Data Integration: Fetch encounter locations and range polygons from your Flask API connected to RDS/PostGIS. Add Feature Layers to the map from your API or by integrating with ArcGIS Online if needed.
    • Interactivity: Configure popups to display animal details (names, images, etc.) when users click on map points. Use the API to add layer controls for toggling between animal categories (e.g., Fish, Reptiles).