Frontend Mentor's Contact form challenge built with Elm.
This project uses a custom development environment managed by Devbox. To begin working on the project you first need to enter the development environment.
devbox shellThe UI was built in a custom frontend workshop environment using Astro. It acts as the single source of truth for the HTML structure, CSS styles, and other supporting assets.
The workshop lives in the workshop/ directory and there's a Nushell script called workshop that allows you to manage the environment.
workshop dev # alias wd - Start the development server
workshop build # alias wb - Build the project and write it to disk
workshop preview # alias wp - Preview the build locally
workshop clean # Remove development and build artifactsThe web application was built with Elm and also uses Astro. It realises the UI using elm/html and it implements the form's logic using dwayne/elm-field and dwayne/elm-form.
The application lives in the app/ directory and there's a Nushell script called app that allows you to manage it.
app prepare # Share the workshop files with the web app
app dev # alias d - Start the development server
app build # alias b - Build the project and write it to disk
app preview # alias p - Preview the build locally
app format # alias f - Format the files
app test # alias t - Run the tests
app deploy # Deply the web app to GitHub Pages
app clean # Remove development and build artifactsThere is a Makefile that allows you to work across both the frontend workshop environment and the web application.
make # Or make build
make build # Build the workshop, share the files with the web app, and build the web app
make deploy # Build and deploy the web app to GitHub Pages
make clean # Remove development and build artifacts from both workshop/ and app/make deployIt depends on dwayne/deploy, my reusable deployment (Bash) script that I packaged with Nix and Nix Flakes.
These are all the technologies I used for this project (listed in alphabetical order):