The Mountain Legacy Explorer (MLE) app is a web-based frontend interface designed to provide users with an intuitive and interactive way to explore the Mountain Legacy Project's (MLP) collection of historic and modern survey images.
The Mountain Legacy Project at the University of Victoria supports numerous research initiatives exploring the use of repeat photography to study ecosystem, landscape, and anthropogenic changes. MLP hosts the largest systematic collection of mountain photographs, with over 120,000 high-resolution historic (grayscale) survey photographs of Canada’s Western mountains captured from the 1880s through the 1950s, with over 9,000 corresponding modern (colour) repeat images. Over the years, the MLP has built a suite of custom tools for the classification and analysis of images in the collection (Gat et al. 2011; Jean et al. 2015b; Sanseverino et al. 2016).
- Image Browser: Browse through the MLP's collection of over 120,000 high-resolution historic mountain photographs.
- Image Pairs: View repeat photo pairs to visualize changes in the mountain landscape over time.
- Metadata Access: Access related metadata for each image, including location, date, and photographer information.
- Search and Filter: Search and filter images by location, date, and other criteria to quickly find specific images.
- Frontend: Built using ReactJS, a popular JavaScript library for building user interfaces.
- Backend: Integrated with the MLE API, which provides access to the MLP's image collection and metadata.
This section describes how to run the MLE frontend on your machine for development or local use.
- Node.js — The project targets Node 22 (see
engines.nodeinpackage.json). Use nvm, fnm, or the official installer to match this version. - npm — Installed with Node.js.
- MLE API (for full functionality) — The frontend talks to a separate API service. For local development the API is expected at
http://localhost:3001by default. Clone and run the mle-api repository if you need image data, search, and other backend features.
The app reads configuration from environment variables. For local runs you can use .env or .env.local in the project root (Create React App loads both; .env.local overrides .env and is usually not committed).
| Variable | Description | Example (local) |
|---|---|---|
NODE_ENV |
Environment mode | local or development |
REACT_APP_API_BASEURL |
Base URL of the MLE API | http://localhost:3001 |
REACT_APP_BASEURL |
Base URL of this frontend app | http://localhost:3000 |
Example .env.local:
NODE_ENV=local
REACT_APP_API_BASEURL=http://localhost:3001
REACT_APP_BASEURL=http://localhost:3000If you don’t have a .env or .env.local, create one with the values above so the app knows where to find the API and itself. Restart the dev server after changing env vars.
-
Clone the repository
git clone https://github.com/[repository-url] cd mle-frontend -
Install dependencies
npm install
-
Configure environment
Ensure.envor.env.localexists withREACT_APP_API_BASEURLandREACT_APP_BASEURLas above. -
Start the development server
npm start
The app will open at http://localhost:3000. Without the API running, features that depend on backend data (e.g. image browser, search) will not work, but you can develop UI and routing.
The repo includes a Dockerfile (production build served with nginx) and docker-compose for a development-style run with hot reload.
-
Development (with file watching):
docker-compose up --build
The frontend runs in a container with the project directory mounted; the app is available at
http://localhost:3000. Ensure.env(or env vars indocker-compose.yml) match your setup; the compose file uses thebuildstage andnpm startinside the container. -
Production-style image:
Build and run the multi-stage Dockerfile (build + nginx). The container serves the built app on port 80; map it as needed (e.g.-p 3000:80).
For a full local deployment that builds the frontend and runs the API and queue, use the provided shell script:
-
Edit
run-script.sh
SetAPI_REPO_DIRandFRONTEND_REPO_DIRto the absolute paths of yourmle-apiandmle-frontendclones. -
Run the script
./run-script.sh
It installs dependencies, builds the frontend, and uses PM2 to run the client, API, and queue. Ensure Node.js, npm, and PM2 are available and paths are correct.
| Script | Purpose |
|---|---|
npm start |
Start the development server (default port 3000). |
npm run build |
Production build; output in build/. |
npm run serve |
Serve the build/ folder locally (uses serve). |
npm test |
Run tests (Jest). |
- Port 3000 in use — Stop the process using port 3000 or set
PORT=3001(or another port) beforenpm start. - API requests fail or 404 — Confirm the MLE API is running at the URL in
REACT_APP_API_BASEURLand CORS allows your frontend origin. - Changes to
.envnot applied — Restartnpm start(or the Docker container); Create React App only reads env at startup. - Docker build or run issues — Ensure Docker and Docker Compose are up to date and that
.envexists if the compose file references it.
- Clone the repository:
git clone https://github.com/[repository-url] - Install dependencies:
npm install - Add a
.envor.env.localwithREACT_APP_API_BASEURLandREACT_APP_BASEURL(see Environment variables above). - Start the app:
npm start
Contributions to the MLE app are welcome. Please submit a pull request to the repository with your changes.
If you encounter any issues with the MLE app, please submit an issue to the repository.
The MLE app is licensed under the MIT License.
Developed and maintained by Runtime Software Development Inc.
The MLE app repository is located at https://github.com/scrose/mle-api.