A web application that allows visitors to see images and editors to add, modify or remove images.

The application uses the following technologies :

• Elm
• elm-graphql
• GraphQL
• PostGraphile
• PostgreSQL

Below you can see how this web application looks.

A live demo version is available here.

Note : this diagram is built with draw.io and uses the following assets :

• Person icons created by yaicon - Flaticon
• Url icons created by xnimrodx - Flaticon

Go to the home page / to see all the images.

Go to the page /graphiql, to create an image, and on the GraphiQL user interface create a mutation with the following content

mutation AddImage($createImageInput: CreateImageInput!) {
  createImage(input: $createImageInput) {
    image {
      id
      title
      url
    }
  }
}

and the following variable

{
  "createImageInput": {
    "image": {
      "title": "${title}",
      "url": "${url}"
    }
  }
}

Replace ${title} and ${url} with the title and the url of the image that you want to add.

The UML diagrams are built with PlantUML.

1. Install Elm.
2. Install PostgreSQL.
3. Create a database named imageboard and create the database schema with the script init-database.sql.
4. Install Node.js.
5. Install the dependencies with npm install.
6. Build the application with npm run build.
7. Create the .env in the root folder with the following content.

DATABASE_URL=postgresql://${username}$:${password}@${hostname}:${port}/imageboard

and replace the variables ${username}, ${password}, ${hostname} and ${port} with the correct values to have a valid PostgreSQL connection string. For example, you can have the following connection string : postgresql://alice:secret@localhost:5432/imageboard. If you don't want to use a .env file, then you can set a valid value directly in the environment variable DATABASE_URL.

8. Run the application with npm start.

Note that a build tool like Parcel or Webpack can be used to automate the compilation and the run of this web application. But to keep the tutorial simple, these tools are not used.

9. Open a web browser on the url http://localhost:8080 to see the list of the images.
10. Open a web browser on the url http://localhost:8080/graphiql to add, modify and remove the images using GraphiQL.

You can easily debug the server part of this application (the Node.js program that launchs the web server and PostGraphile) using the Visual Studio Code Debugger.

You can activate the Elm time travel debugger by running the command npm run build:debug. Once this command executed, you will be able to see, on your web browser, the Elm time travel debugger, when you navigate to the web application.