WebApp that allows you to view the items in the landsat8_c2l1t1 collection, at the https://eod-catalog-svc-prod.astraea.earth static STAC server.

This application uses a number of open source projects to work properly:

• React - A JavaScript library for building user interfaces
• Next - The React Framework for the Web
• TailwindCSS - A utility-first CSS framework for rapid UI development.
• React Map GL - Makes using Mapbox GL JS in React applications easy
• Framer Motion - A production-ready motion library for React
• Zustand - Bear necessities for state management in React

• Turf.js - Advanced geospatial analysis for browsers and Node.js
• React Tailwindcss Datepicker - A modern date range picker component for React using Tailwind 3 and dayjs
• Lucide Icons - Beautiful & consistent icons, made by the community.
• React Paginate - A ReactJS component that creates a pagination.

This is a Next.js project bootstrapped with create-next-app.

• Filter by dates and location (boundary box coordinates)
• 2 view modes for collection items:
  • Map based: click in an item geometry
  • Text based: click in a card's item
• Pagination
• Route change animation
• Persisting data in user's session

First clone this repository

Then, install all dependencies:

npm install

Note: this project was developed using the node version 20. I strongly recommend using a tool like nvm or any node version manager.

This project uses Mapbox, so to run this locally, you'll need a Mapbox Access Token

Once you have your acess token, create a .env.local file at the root of the project, and add:

NEXT_PUBLIC_MAPBOX_TOKEN=YOUR_ACCESS_TOKEN

Then, run the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result.

Go to stac-collection-visualizer.vercel.app/ to access the latest deployed version.