Skip to content

kaizar36/imageboard

Repository files navigation

Imageboard

Description

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

The application uses the following technologies :

Below you can see how this web application looks.

Demo

A live demo version is available here.

Architecture

architecture

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

Usage

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.

UML Diagrams

The UML diagrams are built with PlantUML.

Use case diagram

Use case diagram

Class diagram

Class diagram

Entity relationship diagram

Entity relationship diagram

Sequences diagrams

See the list of the images

Sequence diagram list all the images

Add an image

Sequence diagram add the image

Modify an image

Sequence diagram modify the image

Remove an image

Sequence diagram remove the image

Installation

  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.

  1. 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.

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

Launch and debug with Visual Studio Code

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.

Debug with Elm 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.

About

An imageboard made with ELM, GraphQL, PostGraphile and PostgreSQL

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published