Eric Wätke

← go back

Webapp "Lübz-Liefert"

The project is still WIP. I can share some details though!

The web-app „Lübz Liefert“ has the purpose of creating a channel for communication between local companies and their consumer base. The initial website was just a business-card like index service for companies, so they could be discovered. But we wanted more than that.

The landing page

The landing-page needed to fulfill 3 fundamental criteria.

  1. Engage the customer who potentially wants to buy stuff
  2. Engage the company which potentially wants to sell stuff
  3. Call to the action “register now”
The first two points were achieved with short descriptive texts on why the user should sign up. Additionally, I placed 3D-animations, fitting to the context.

The animations

Both animations are created with a mixture of Blender and After Effects. 2D stuff like the animated screen in the top animation, or the moving text in the bottom one is done in After Effects.

The hands itself, the movement and everything the hand holds or interacts with were made in Blender. I modeled and then rigged the hand, so I could animate it. The lighting is key in short animations like this. I placed an HDRI for the general “real-like” environment lighting in the scene, and then added a light source which technically sits in the middle of the screen when the animations are placed. That gives them a connection, additionally to the consistent art-style.

The App interactions

Once the user is securely logged-in (either by signing up directly or using Google to log in), they see a list of every participating company. There are direct links of each company, going to their website, email, telephone, WhatsApp etc. The user can also subscribe to a company. They then see and get notified for every new announcement/message by the company. Every message also gets assigned one more multiple categories. Those can also be subscribed by the user. For example, I am interested in smart-home stuff, so I could subscribe to that category and get a notification every time a company has something going on in that sector.

The app is built in Vue.JS. That ensures a smooth and almost app-like experience for the user.

The back-end

I will not go too much into detail here, so the user’s safety is ensured.

The backend is a Rest API made in PHP and communicating with a MySQL database. After realizing the complexity of the API, I am restructuring it into a GraphQL API. The login-security is ensured with an 256bit login-token. So even in the unusual case where someone changes the login-information in the front-end, he will not get far, because guessing that token would be impossibly unlikely. All data then gets loaded on demand. The data is then stored in a VueX store, rapidly accessible by all components in the app.