IE retrospective • Web Applications

Iconic Engine, Web-Applications

Web applications using AWS, Vue.js, React and more.

  1. Login portal with registration and login forms, link
  2. "Tiles" editor to customize image arrangements, link
  3. Digital-Assets-Manager front-end developed by a team, link
  4. VR video editor and 360 camera movement, link
  5. App for exploring GraphQL interfaces, link

1. Login Portal

Snabbdom, esbuild, UIKit, Vanilla JS

login portal

login portal, vasoo

The "Login Portal" consisted of login-related pages for multiple, branded applications. Mobile and VR apps used login-portal's "device login" flow, where users would signin to an app by submitting a device code at the web form. It featured registration, login, logout, profile-update, reset-password and forgot-password flows.

This app consisted of only a few files. It was ~130kB small and login pages for new apps were added easily and quickly.

What I did

I created this little web app. I created and configured the "dev" and "prod" AWS buckets, cloudfront urls, gitlab pipelines and all the rest, including writing a cloudfront invalidation package.

At the project README, I also maintained a compact list of fully qualified href paths to the bucket and login pages for each application.

login portal, zee5


2. Tiles Editor

React, GraphQL

tiles editor screenshot

Content Managers at Deutsche-Telekom used the "Tiles Editor" to customize a "Tiles" visualization used in one of their mobile apps. This editor was sold to Deutsche-Telekom before development started and was completed in under a week, using React components from a pre-existing React app.

css for the stage element

.stage {
    position: relative;
    height: 154px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas:
      "tile-16 tile-10 tile-4 tile-1 tile-1 tile-5 tile-11 tile 17"
      "tile-18 tile-12 tile-6 tile-1 tile-1 tile-7 tile-13 tile 17"
      "tile-20 tile-14 tile-8 tile-2 tile-3 tile-9 tile-15 tile 21"
}

What I did

I wrote this app iteratively making changes while sharing updated links and screenshots and getting feedback from the rest of the group.


3. DAM FE

Vue3, Storybook, GraphQL

edit asset version

DAM-FE was the "Digital Asset Management Front End" web app for an ambitious "digital marketplace" I won't try describing here. It never reached an audience.

It was developed rapidly in an informal way. Major pages and forms were created by me and additional developers were gradually brought into the project. There was no designer, but everyone collaborated to created designs for each page and section.

vue js componentvue js component

What I did

I setup the foundations for this application, creating its gitlab project and deployment infrastructure, the initial routes and pages etc. I did not choose the Vue.js framework it used.

edit asset version

I facilitated communication in many different ways and solicited positive participation and contributions from people who otherwise may not have formed any sort of friendly relationship. I gave code reviews and blocked bad changes from going into the main branch. I supported new developers when they reimplemented parts I had written.

Every day or so, I proactively published compact and interesting little updates with screenshots, gifs and short lists of hyperlinked-things myself and other developers had accomplished.


4. IVE Interactive Video Editor and Player

React, Styled-Components CSS, Three.js, GraphQL

ivy video editor

The main concept involved "portals" that transported users between VR video spaces. For example, an editor could create "haunted forest" video scenes and link them together with portals; Viewers could "walk" the forest by travelling the portals. Additionally, editors could draw mesh areas showing advertisments and could time their visibility to occur in sync with events from the video.

What I did

I wrote React components for this application and later migrated its deployment to a new cluster.

I wrote the 360 camera and reticle behaviour demonstrated here:


12. GraphQL Voyager

HTML, Vanilla JS

voyager, social profile apivoyager, social profile api, subscriptions

This single page web app used the voyager application to showcase Iconic Engine's GraphQL APIs: social-profile, venom-api, hybrid-api and iconic-dam. It consisted of a single HTML file importing the voyager script and sending an introspection query to a service.

What I did

I setup the bucket and deployments. Nothing special, but very useful for developers investigating GraphQL services.


← Return to IE Retrospective

bumblehead.com