coding-challenge

Coding Challenge

Example Svelte project demonstrating USFS AirFire favored technologies

USFS AirFire Coding Challenge

This directory contains a Svelte app that can be used as a starting point for the USFS AirFire Coding Challenge. For more information about Svelte, see https://svelte.dev.

The challenges listed here and in scripts/README.md are suggested starting points. In general they go from easy to difficult and are designed to see what technologies you are familiar with. Feel free to add your own modifications to show off what you know.

NOTE: No one is expected to easily accomplish all of the tasks! Thats whey they are called "challenges". So don't spend too much time on a specific task that looks unfamiliar.

Svelte app

Instructions for running the Svelte app found in working-example/ and for creating a new Svelte app from scratch are found in Svelte Setup.

Challenges

  • Get the working-example version up and running on your computer.
  • Follow the instructions at the end of Svelte Setup to create deployable .html, .js and .css files. Deploy them somewhere.
  • Follow the instructions in Svelte Setup to create a new my-example Svelte app.
  • Customize my-example with some of the following:
    • modify the javascript with more console.log() statements to see what is happening internally
    • restyle the app with a Wes Anderson color palette
    • enable animation in the TimeseriesPlot.svelte component. What does this do? Tweak other aspects of the Timeseries plot as you see fit.
    • create a "StatusBox" component that shows the selected_id
    • add support for additional 'status' information
  • Use bootstrap classes (e.g. "row" or "col-md-6") to modify column widths or rearrange the app into a single-column app appropriate for mobile devices.
  • Add further styling for mobile devices.
  • Use/modify the .geojson generated by scripts/DNR_burnportal_exec.R to display recent prescribed burn locations in the Leaflet map. (This will require adding another item to src/stores/polygon-data-store.js.)

Scripts

The scripts/ directory has a scripts/README.md file describing data processing scripts written in R and python and associated coding challenges.

Top categories

Loading Svelte Themes